The system behind Kaspar: colour, type, components and layout.
Principles
One typeface, Inter Display, in four text sizes.
Every text uses a text style and every colour a colour style.
Twelve columns with 20 px gutters. Labels sit in columns 1 to 4, content in 5 to 12.
Space separates sections. There are no divider lines, only the field underlines in the form.
Hover states switch instantly and nothing scales.
Colour
Background/Page
#FFFFFF
Background/Inverse
#111110
Text/Primary
#111110
Text/Secondary
#8B8B86
Text/Inverse
#F4F4F1
Text/Inverse Secondary
#8E8E89
Border/Field
#C6C6C1
Glass/Highlight
#FFFFFF
Typography
Apps, websites and design systems.
Statement. Inter Display 400, 32, 28 and 24 px with 36, 32 and 28 px line height. The h1 of every page.
Works
Menu Link. Inter Display 400, 44, 44 and 40 px. The phone menu.
Teras makes whisks, peelers and razors in one small factory in Tartu.
Text. Inter Display 400, 17, 16 and 16 px with 23, 22 and 22 px line height. Case study stories.
Teras Online Shop
Body. Inter Display 400, 13 px with 17 px line height. Navigation, lists and the footer.
E-commerce, 2026
Body Muted. 13 px in Text/Secondary. Labels and meta.
Teras Online Shop
Body Inverse. 13 px in Text/Inverse. Hovered rows and the phone menu.
Links
Nav Link. Header, footer and menu links, grey on the current page.
Inline Link. Underlined links inside copy.
Name Link. The name in the header, without a current state.
Inverse Link. Links on the dark phone menu.
Components
Work Row, Full variant. The Works index; inverts on hover.
Work Row, Short variant. The Selected list on Home.
Kiir Launch Site
Product launch
2026
FAQ Item. Opens on click; the questions on Services.
How much does a project cost?
Sound Toggle. Turns the xylophone notes on and off on Home.
Sound on
View Switch. Shows Works as a list or a grid. The current view is grey.
List
Grid
Submit Button. Default, Pending, Success and Error states for the contact form.
Xylophone and Cursor Preview are code components. The design-system skill lists their controls.
Layout
Desktop, 1200 px: 12 columns, 20 px gutters and 20 px margins.
Tablet, 810 px: 12 columns, labels above their content.
Phone, 390 px: 16 px margins and a single column.
Sections sit 120 px apart on desktop and tablet, 72 px on phone.
Motion
Work rows switch to the inverse colours instantly on hover.
The cursor preview fades in and follows the pointer over work rows.
The xylophone turns with the scroll wheel or a vertical drag and plays a note for each bar it touches.
Reduced motion is switched on for the whole site.
Content
Works collection: Title, Slug, Client, Category, Year, Summary, Services, Cover, Gallery (Image, Caption), Body, Featured, Order.
Order sets the position on Works and the Next project link on case studies.
The Selected list on Home shows the first four Featured works by Order.
Covers appear on Works, Services and in the cursor preview, so keep each one unique.
Remix project