Every colour, type size and component in one place. Edit the styles and the whole site follows. In Framer’s Agent, use the /design-system skill and new sections are built from these parts.
Colours
Color styles · Base
White
#FFFFFF · Background
Surface
#EEF1FF · Cards, ghost type
Blue
#1F3DFF · Accent, text
Blue Deep
#1226B8 · Hover
Ink
#070B2E · Footer shade
Muted
Blue 55% · Labels
Line
Blue 28% · Rules
Typography
Humane · Inter · DM Mono · Instrument Serif
Heading 1 · 160 / 112 / 80
Bold ideas
Heading 2 · 112 / 88 / 68
Bold ideas
Heading 3 · 64 / 52 / 44
Bold ideas
Row · 44 / 44 / 32
Bold ideas
Statement · 56 / 40 / 28
Brand, web and motion for teams who want to be remembered.
Voice · 32 / 25.6 / 21.6
Design studio based in Amsterdam
Large · 24 / 20
Brand, web and motion for teams who want to be remembered.
Medium · 18
Brand, web and motion for teams who want to be remembered.
Body · 16
Brand, web and motion for teams who want to be remembered.
Small · 14
Brand, web and motion for teams who want to be remembered.
Label · DM Mono 11
Amsterdam · Available Q4 2026
Interface
Buttons · links
Components
Code components · edit in the right panel
Ondine
WorkCard: hover for the liquid caption. Bound to the Projects CMS on Home and Work.
ServiceRow
The blue fill enters from the edge the cursor comes in by.
Name, description and a year or meta label.
The same row with smaller text, used on Licenses.
FuText · Scroll-lit: each word lights up as you scroll, used for statements.
FuText · Lines: rises line by line, used for quotes and headings.
Spacing
Gutters · sections · gaps
32 px on desktop, 24 px on tablet, 16 px on phone. Every section uses the same side padding.
96 px above and below on desktop, 72 px on tablet, 56 px on phone.
20 px between columns (12 px on phone). Project cards sit 8 px apart.
Content stops at 1760 px wide, so very large screens keep the layout.