Kinobi Design Systemv2026.10.16
KinobiDesign system

Typography

Text styles as kds:text-* classes, from headers to buttons.

Font family

Every Kinobi text style uses Lato, for headers and body alike, and falls back to the system sans-serif.

Regular 400Italic 400Bold 700
header
body
StyleSampleSizeLine heightUsage
H1
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		48px3rem62.4px3.9rem130%Page titles and hero headlines
H2
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		32px2rem41.6px2.6rem130%Major section headings
H3
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		24px1.5rem32.4px2.025rem135%Section dividers and content regions
H4
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		20px1.25rem28px1.75rem140%Sub-section and component headings
H5
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		16px1rem22.4px1.4rem140%Card titles and panel headings
H6
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		14px0.875rem19.6px1.225rem140%Subheadings and filter group labels
H7
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		12px0.75rem16.8px1.05rem140%Widget titles and secondary nav headings
H8
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		11px0.6875rem15.4px0.9625rem140%Eyebrows, micro labels, and dense UI

Body

15 rows
StyleSampleSizeLine heightUsage
P1The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		20px1.25rem28px1.75rem140%Lead and intro paragraphs
P2The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		16px1rem22.4px1.4rem140%Primary body and reading text
P3The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		14px0.875rem19.6px1.225rem140%Supporting copy and microcopy
P4The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		12px0.75rem16.8px1.05rem140%Captions and helper text
P5The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		11px0.6875rem15.4px0.9625rem140%Fine print and supplementary labels
I1
  • Italic
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		20px1.25rem28px1.75rem140%Featured quotes and testimonials
I2
  • Italic
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		16px1rem22.4px1.4rem140%Inline emphasis within body text
I3
  • Italic
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		14px0.875rem19.6px1.225rem140%Editorial attributions and annotations
I4
  • Italic
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		12px0.75rem16.8px1.05rem140%Placeholder text and subtle status labels
I5
  • Italic
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		11px0.6875rem15.4px0.9625rem140%Inline citations at micro scale
B1
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		20px1.25rem28px1.75rem140%Emphasized lead text and pricing callouts
B2
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		16px1rem22.4px1.4rem140%Key term emphasis within body paragraphs
B3
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		14px0.875rem19.6px1.225rem140%Bold inline terms and step labels
B4
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		12px0.75rem16.8px1.05rem140%Badge labels and status indicators
B5
  • Bold 700
The quick brown fox jumps over the lazy dog
After jumping it skids and slides wildly		11px0.6875rem15.4px0.9625rem140%Bold labels in dense tables and compact UI

Specials

StyleSampleSizeLine heightUsage
ALL CAPS
  • Bold 700
  • All caps
  • Letter spacing 20%
Big discount16px1rem22.4px1.4rem140%Category labels, eyebrows, and status chips
Button / Default
  • Bold 700
  • All caps
  • Letter spacing 5%
Sign up14px0.875rem23.8px1.4875rem170%Standard desktop CTA buttons
Button / Mobile
  • Bold 700
  • All caps
  • Letter spacing 5%
Sign up12px0.75rem20.04px1.2525rem167%Touch-first mobile button labels
Button / Navbar
  • Bold 700
  • Capitalised
  • Letter spacing 2%
Sign up14px0.875rem21px1.3125rem150%Navbar action buttons and header CTAs

Colour

Semantic colours by family and role, and the 50–950 scale they are drawn from. Use them with bg, text, border, outline, fill, stroke, caret, accent and decoration.

Spacing

The spacing scale and the margin, padding and gap utilities built on it.