Reference for the typography, colour, layout and component classes used on the site. Each example shows the rendered class with a class-name label and a one-line spec underneath.
Thirteen colour variables in the Base collection. Use these via the Designer’s variable picker, never raw hex.
--black#000 — dark page background and dark footer.
--grey-body#444 — default body text.
--grey-dim#6E6E6E — muted text, dates, secondary captions.
--grey-faint#AAA — hairline rules, footer legal on light.
--navy#031D45 — brand navy. Headings, primary text on light.
--navy-mutedrgba(3,29,69,0.7) — 70% navy. Eyebrows and nav links on light.
--cream#EBEBE1 — default page background.
--cream-deep#E8E8E4 — light footer, slightly deeper than page.
--white#FFF — pure white. Logos on dark, theme primary in dark mode.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare,
--white-bodyrgba(255,255,255,0.7) — body text on dark backgrounds.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare,
--white-mutedrgba(255,255,255,0.55) — muted text on dark backgrounds.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare,
--white-faintrgba(255,255,255,0.4) — faint text / footer legal on dark.
--signal#00C1E6 — signal cyan. CTAs, accents, action markers.
Plus Jakarta Sans throughout. Display weights and sizes shift by audience: large + bold for hero moments, modest + lighter for institutional content. Specs reflect desktop values; clamps where present scale fluidly above tablet.
heading--inst56px / 1.05 / weight 500 / -0.025em / --navy. Display heading, used as page H1.
heading-section--instNo fixed size (inherits) / 1.1 / weight 500 / -0.02em / --navy. Section heading, pair with subhead-rule for divider.
subhead-ruleSection heading + 1px bottom rule on --rule, pb 20, mb 32. Used at the start of each major section.
cta-light__headingclamp(28px, 3.2vw, 40px) / 1.1 / weight 400 / --navy / text-wrap balance. Closing CTA heading on light pages.
lead--instA short, weighted introduction. Wider than body, narrower than a heading.
A short, weighted introduction. Wider than body, narrower than a heading.
22px / 1.45 / max 40ch / --navy. Lead paragraph for hero or section opener.
lead--portfolioA short, weighted introduction. Wider than body, narrower than a heading.
22px / 1.45 / max 40ch / --navy. Lead paragraph for hero or section opener.
text-bodyA standard body paragraph. Comfortable reading width, generous line height. Use for the working text of any page — the body of an announcement, the description of a service, the explanation under a heading.
Inherits 16px / 1.7 / weight 400 / max 56ch.
note--instA small note or caption, typically under a chart, image, or as a definition line.
14px / 1.6 / max 32ch / --text-dim. Use sparingly.
Block YearOswald 60px / 1 / weight 200 / -2px tracking / --navy. Decorative year marker on grouped lists.
eyebrow12px / 1 / weight 600 / 0.22em tracking / uppercase / --navy-55. Default eyebrow for light pages.
eyebrow + eyebrow--lg--navyCombo. 14px / weight 700 / 3px tracking / mb 14. Larger eyebrow for section heads.
eyebrow + eyebrow--lg--whiteCombo. Same as above but --text-dim colour, for use on dark backgrounds. Showed against black for legibility.
Two button styles. The nav pill is the only true button on the site; everything else is a styled text link.
nav-ctaPill 100px radius / pad 8/20 / --signal bg / --navy text / 11px / 0.88px tracking / uppercase. Sits at the right of the desktop nav.
cta-light__emailclamp(20px, 1.6vw, 26px) / weight 400 / underline 2px / 5px offset / underline colour --navy-55. Closing CTA on light pages.
Sections handle vertical rhythm. Shrinkwraps cap horizontal width at 1280. Grids set column ratios. All values shown are desktop — responsive overrides not documented here.
section-heroPadding-top 160 / padding-bottom 96. First section on every page; the 160 top accommodates the fixed nav.
section-structurePadding-bottom 96, no top padding. Used for stacking content sections after the hero.
section-two-colPadding-bottom 96. Identical to section-structure; intent is to flag a two-column composition. Candidate for consolidation.
shrinkwrapMax-width 1280, auto margins, responsive horizontal padding (see below). The standard content container — every horizontal layout uses this class.
64px56px32px32px (inherits)One consistent horizontal rhythm across body, CTA, and footer at every breakpoint. Generous on big screens for the institutional feel; tightens to give phone screens more reading width. Set on shrinkwrap once — propagates to every element using the class.
56px64px (bumps up)32pxLive site uses a --margin token at the values (left). Webflow doesn't allow custom breakpoints, so values were mapped to its defaults (991 / 767 / 479) and resequenced to monotonically tighter (64 → 56 → 32). The 32px tightening kicks in at 767 here vs 620 on the live site — small drift in landscape-phone range, same intent.
Site-wide propagation. For these values to apply everywhere, footer__inner and cta-light__shrinkwrap should be swapped to shrinkwrap. Currently separate classes; planned unification.
cta-light__shrinkwrapWidth 1280 fixed (no gutter), 1px top rule on --rule, clamp(56, 7vw, 88) top padding. Closing CTA wrapper on light pages.
footer__innerMax-width 1280, auto margins, no gutter. Sits inside the footer’s outer padding.
grid--hero1fr / 1.4fr / 96 col gap / 96 row gap / align-items end. Hero composition.
grid--3-21.5fr / 1fr / 96 col gap / 60 row gap. Combo on grid. Used for asymmetric two-col content.
grid--1-21fr / 2fr / 80 gap. Combo. Used when the right column carries the main content.
grid--year1fr / 4fr / 60 row gap. Combo. Year label left, grouped list right.
section-divider100% width / 1px / mb 64 / --rule background. Horizontal section divider.
Composed examples. Each component is shown once with its part-classes listed below. Internal class names are flagged so you can map any part of the rendered example back to its style.
nav-link12px / weight 600 / 0.06em tracking / uppercase / --navy-55. Shown here on navy for legibility — actual nav uses --dark-nav on dark variants.
navigationPosition fixed / top 0 / h 64 / pad 56 horiz / flex space-between / center align / transparent bg. The desktop nav wrapper.
Footer (composed)Parts: footer-base outer pad 56/56/28/56 · footer-light --cream-deep bg / footer-dark --black bg · footer__inner 1280 max · footer__top-light/-dark 1.8/1.2/1 grid · footer__bottom flex end · footer__logo mb 14 · footer__socials 16 gap row · footer__legal 11/15 · footer__legal--dark white-40% · footer__text 14/18 / --text-dim.
feed__item (vertical)Parts: feed__item column flex / pad 28v / 6 gap · feed__details wrap row / 6 gap · feed__date 11px / 0.16em / uppercase / --text-dim · feed__name 17 / 1.45 / weight 500 / --navy.
feed__item-hort (horizontal)Same parts as feed__item; row flex instead of column / 16 gap. Used on Media Coverage list.
No form classes currently exist on the site. The KIN Investor pages do not yet contain any forms (no contact form, no newsletter, no investor enquiry). When forms are added, this section will document Form, FormTextInput, FormButton, and FormBlockLabel styles.
Small classes used as combos to constrain or modify other elements.
narrow (combo)A constrained block of body text. Use as a combo on body-text--inst or similar to cap reading width and shift colour to muted.
Combo. max-width 13em / colour --text-dim. Apply on top of body-text--inst.
A small group of classes is intentionally not documented above because they’re either single-use, mobile-only, non-semantic, or empty. They’re tracked in a separate punch list (handed over alongside this page) so the working design system stays uncluttered. Classes parked there: corp-tree set (single-use on Structure page), mob-nav set (revisit when responsive is decided), Div Block 3/4/5/6, Flex Block, Link Block, Section, Body (rename or delete), and the empty rules footer__col-label, social-icon, logo-navy (fill or delete). Combo opportunities: footer-light/-dark, footer__top-light/-dark, feed__item/-hort.
Plus Jakarta Sans throughout. Display weights and sizes shift by audience: large + bold for hero moments, modest + lighter for institutional content. Specs reflect desktop values; clamps where present scale fluidly above tablet.
heading--inst56px / 1.05 / weight 500 / -0.025em / --navy. Display heading, used as page H1.
heading-section--instNo fixed size (inherits) / 1.1 / weight 500 / -0.02em / --navy. Section heading, pair with subhead-rule for divider.
subhead-ruleSection heading + 1px bottom rule on --rule, pb 20, mb 32. Used at the start of each major section.
cta-light__headingclamp(28px, 3.2vw, 40px) / 1.1 / weight 400 / --navy / text-wrap balance. Closing CTA heading on light pages.
lead--instA short, weighted introduction. Wider than body, narrower than a heading.
22px / 1.45 / max 40ch / --navy. Lead paragraph for hero or section opener.
body-text--instA standard body paragraph. Comfortable reading width, generous line height. Use for the working text of any page — the body of an announcement, the description of a service, the explanation under a heading.
Inherits 16px / 1.7 / weight 400 / max 56ch.
note--instA small note or caption, typically under a chart, image, or as a definition line.
14px / 1.6 / max 32ch / --text-dim. Use sparingly.
Block YearOswald 60px / 1 / weight 200 / -2px tracking / --navy. Decorative year marker on grouped lists.
eyebrow12px / 1 / weight 600 / 0.22em tracking / uppercase / --navy-55. Default eyebrow for light pages.
eyebrow + eyebrow--lg--navyCombo. 14px / weight 700 / 3px tracking / mb 14. Larger eyebrow for section heads.
eyebrow + eyebrow--lg--whiteCombo. Same as above but --text-dim colour, for use on dark backgrounds. Showed against black for legibility.
Two button styles. The nav pill is the only true button on the site; everything else is a styled text link.
nav-ctaPill 100px radius / pad 8/20 / --signal bg / --navy text / 11px / 0.88px tracking / uppercase. Sits at the right of the desktop nav.
cta-light__emailclamp(20px, 1.6vw, 26px) / weight 400 / underline 2px / 5px offset / underline colour --navy-55. Closing CTA on light pages.
Sections handle vertical rhythm. Shrinkwraps cap horizontal width at 1280. Grids set column ratios. All values shown are desktop — responsive overrides not documented here.
section-heroPadding-top 160 / padding-bottom 96. First section on every page; the 160 top accommodates the fixed nav.
section-structurePadding-bottom 96, no top padding. Used for stacking content sections after the hero.
section-two-colPadding-bottom 96. Identical to section-structure; intent is to flag a two-column composition. Candidate for consolidation.
shrinkwrapMax-width 1280, auto margins, 24px horizontal gutter. The standard content container.
cta-light__shrinkwrapWidth 1280 fixed (no gutter), 1px top rule on --rule, clamp(56, 7vw, 88) top padding. Closing CTA wrapper on light pages.
footer__innerMax-width 1280, auto margins, no gutter. Sits inside the footer’s outer padding.
grid--hero1fr / 1.4fr / 96 col gap / 96 row gap / align-items end. Hero composition.
grid--3-21.5fr / 1fr / 96 col gap / 60 row gap. Combo on grid. Used for asymmetric two-col content.
grid--1-21fr / 2fr / 80 gap. Combo. Used when the right column carries the main content.
grid--year1fr / 4fr / 60 row gap. Combo. Year label left, grouped list right.
section-divider100% width / 1px / mb 64 / --rule background. Horizontal section divider.