Ampleworth design system

Colour

• Golden Yellow#f3a257
• Deep Slate Olive#253122
• Neutral Gray#b6bfc1

• backgroundvar(--color-background)
• surfacevar(--color-surface)
• mutedvar(--color-muted)
• foregroundvar(--color-foreground)
• muted foregroundvar(--color-muted-foreground)
• bordervar(--color-border)
• primaryvar(--color-primary)
• accentvar(--color-accent)
• inversevar(--color-inverse)

Type

• Newsreaderdisplay · 400 · SIL Open Font License 1.1
• Schibsted Groteskbody · 400, 500, 600 · SIL Open Font License 1.1, https://fonts.google.com/specimen/Schibsted+Grotesk/license

• Display115 / 57px · 400Every lead answered in under a minute.
• H260 / 40px · 400The playbook we use, given away.
• H319 / 18px · 600Letters, episodes and field notes.
• Lead23 / 20px · 400Ampleworth takes stakes in profitable, founder-led businesses and installs the operators, playbooks and AI that make them compound.
• Body19 / 16px · 400Three books, two courses and the tools our operators use every week.
• Small14 / 14px · 400Ampleworth takes stakes in profitable, founder-led businesses and installs the operators, playbooks and AI that make them compound.
• Eyebrow13 / 13px · 600No. 01 The firm

Components

Shape and motion

• sm · 6px
• md · 8px
• lg · 10px
• pill · 9999px
• shadow sm

• in-out · cubic-bezier(.65, 0, .35, 1)
• out · cubic-bezier(.22, 1, .36, 1)
• fast · 350ms
• base · 800ms
• slow · 1300ms