Design System
Documentation

Foundations: colors, typography, dimensions, spacing and layout grid.

Open in Figma
01

Colors

The palette is organized into primitive colors (raw palette) and semantic tokens (contextualized usage). Always prefer semantic tokens in code.

1.1 Primitive palette

Brand Main color
100
300
500 ★
700
800
TokenHexUsage
color/brand/100#FEE4E0Light backgrounds, subtle states
color/brand/300#FCAFA3Badges, chips, soft hover
color/brand/500#FA6048Main color — CTA, highlights
color/brand/700#D0503CHover/pressed state
color/brand/800#A64030Active/deep focus state
Accent — Clay Terracotta
100
300
500
700
800

Warm terracotta tone used to enrich the palette without competing with the main color.

Accent — Mint Glow Mint green
100
300
500 ★
700
800

Vivid mint accent for success indicators, badges and secondary accent elements.

Grey — Neutrals
50
100
200
300
400
500
600
700
800
900

Warm neutrals (slight brown-terracotta tint). Used for text, borders, backgrounds and dividers.

Semantic colors

Reserved for system feedback. Click a palette to copy the 500 token.

Error
100
300
500
700
900
Warning
100
300
500
700
900
Information
100
300
500
700
900
Success
100
300
500
700
900

1.2 Semantic tokens

Always use these tokens in code rather than raw hex values.

Text
color/text/neutral/bold/default
Headings, primary text
color/text/neutral/subtle/default
Body text
color/text/neutral/subtlest/default
Placeholders, secondary
Backgrounds
…neutral/subtlest/default
Page background
…neutral/subtle/default
Alternative backgrounds
…brand/bold/default
Primary buttons, CTA
…brand/bold/hovered
Primary button hover
…brand/subtle/default
Light brand backgrounds
…accent-mint/bold/default
Mint accent badges
…success/bold/default
Success state
Borders
…neutral/subtlest/default
Light borders, dividers
…neutral/bold/default
Bold borders
…brand/bold/default
Focus ring, selection
02

Dimensions

Scale based on a 4 px grid. These tokens serve primarily as a foundation for typography (font sizes, line heights).

Complete scale

Fine steps
dimension-1004 px
dimension-2008 px
dimension-25010 px
dimension-30012 px
dimension-40016 px
dimension-50020 px
dimension-60024 px
dimension-70028 px
dimension-80032 px
Large steps
dimension-100040 px
dimension-110044 px
dimension-120048 px
dimension-140056 px
dimension-160064 px
dimension-180072 px
dimension-200080 px
dimension-220088 px
dimension-2600104 px
dimension-3000120 px
03

Spacing, radius & borders

3.1 Spacing

Spacing scale (padding, margin, gap) based on a 4 px grid.

spacing-none
0
Reset
spacing-xs
4 px
Icons, badges
spacing-sm
8 px
Tight spacing
spacing-md
12 px
Internal standard
spacing-lg
16 px
Button padding
spacing-xl
20 px
—
spacing-2xl
24 px
Card padding
spacing-3xl
32 px
Component gap
spacing-4xl
40 px
Section
spacing-5xl
48 px
—
spacing-6xl
56 px
—
spacing-7xl
80 px
Large sections
120 px
spacing-8xl
120 px
Page margins, hero

3.2 Border radius

radius-none0 px
radius-xs4 px
radius-sm8 px
radius-md12 px
radius-lg16 px
radius-xl24 px
radius-full999 px

3.3 Border width

border-none
0 px — No border
border-thin
1 px — Dividers, inputs
border-default
2 px — Components, focus ring
border-thick
4 px — Accents, active selection
04

Layout

4.1 Breakpoints

breakpoint-xs 320 → 479 px Small mobiles
breakpoint-sm 480 → 768 px Large mobiles & portrait tablet
breakpoint-md 769 → 1279 px Small desktops & landscape tablet
breakpoint-lg 1280 px + Large desktops
/* Mobile first */ @media (min-width: 480px) { /* breakpoint-sm */ } @media (min-width: 769px) { /* breakpoint-md */ } @media (min-width: 1280px) { /* breakpoint-lg */ }

4.2 Grids

Mobile & portrait tablet — 4 columns, 16 px gutter
Desktop & landscape tablet — 12 columns, 24 px gutter

Rule: design in 4 columns for mobile, then switch to 12 columns from breakpoint-md.

05

Typography

Typeface: Neulis Neue (rendered here with DM Sans, same weight range). Available weights: Light 300, Regular 400, Medium 500, Semi Bold 600, Bold 700, Extra Bold 800.

5.1 Headings

Display
text/display/desktop 104px · lh 120px · Bold 700
Design System
text/display/mobile 80px · lh 88px · Bold 700
Design System
Heading 1
text/heading1/desktop 80px · lh 88px · Bold 700
Page title
text/heading1/mobile 64px · lh 72px · Bold 700
Page title
Heading 2
text/heading2/desktop 40px · lh 56px · Bold 700
Section subtitle
text/heading2/mobile 32px · lh 40px · Bold 700
Section subtitle
Heading 3
text/heading3/desktop 32px · lh 44px · Extra Bold 800
Component title
text/heading3/mobile 28px · lh 40px · Extra Bold 800
Component title

5.2 Body text

3 sizes × 4 weights. body/regular/medium is the default text style.

Large — 24 px
body/thin/large24px · lh 32px · Light 300
The design system ensures visual consistency.
body/regular/large24px · lh 32px · Regular 400
The design system ensures visual consistency.
body/semi/large24px · lh 32px · Semi Bold 600
The design system ensures visual consistency.
body/bold/large24px · lh 32px · Bold 700
The design system ensures visual consistency.
Medium — 20 px
body/thin/medium20px · lh 28px · Light 300
The design system ensures visual consistency.
body/regular/medium20px · lh 28px · Regular 400
The design system ensures visual consistency.
body/semi/medium20px · lh 28px · Semi Bold 600
The design system ensures visual consistency.
body/bold/medium20px · lh 28px · Bold 700
The design system ensures visual consistency.
Small — 16 px
body/thin/small16px · lh 24px · Light 300
The design system ensures visual consistency.
body/regular/small16px · lh 24px · Regular 400
The design system ensures visual consistency.
body/semi/small16px · lh 24px · Semi Bold 600
The design system ensures visual consistency.
body/bold/small16px · lh 24px · Bold 700
The design system ensures visual consistency.

5.3 Labels

For buttons, form fields and field labels. Always prefer label styles over body for these use cases.

label/regular/large24px · Medium 500
Field label
label/bold/large24px · Bold 700
Primary button
label/regular/medium20px · Medium 500
Field label
label/bold/medium20px · Bold 700
Primary button
label/regular/small16px · Medium 500
Field label
label/bold/small16px · Bold 700
Secondary button

5.4 Captions

Helper text, captions, metadata, legal notices.

caption/large16px · lh 20px · Regular 400
Helper text below a form field or image caption.
caption/medium12px · lh 16px · Regular 400
Timestamp · Metadata · Secondary info
caption/small10px · lh 16px · Regular 400
Legal notice · Copyright · Compact tertiary info
A

CSS Variables

Implementation example of all tokens as custom CSS variables.

/* ─── Design Tokens ─────────────────────── */ :root { /* Brand */ --color-brand-100: #FEE4E0; --color-brand-300: #FCAFA3; --color-brand-500: #FA6048; --color-brand-700: #D0503C; --color-brand-800: #A64030; /* Semantic tokens — Text */ --color-text-neutral-bold: #272323; --color-text-neutral-subtle: #3A3534; --color-text-neutral-subtlest: #756B69; /* Semantic tokens — Background */ --color-bg-neutral-subtlest: #FFFFFF; --color-bg-neutral-subtle: #E8E6E6; --color-bg-brand-bold: #FA6048; --color-bg-brand-bold-hovered: #D0503C; --color-bg-brand-subtle: #FCAFA3; /* Semantic tokens — Border */ --color-border-neutral-subtlest: #E8E6E6; --color-border-neutral-bold: #272323; --color-border-brand-bold: #FA6048; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --spacing-2xl: 24px; --spacing-3xl: 32px; --spacing-4xl: 40px; --spacing-5xl: 48px; --spacing-7xl: 80px; --spacing-8xl: 120px; /* Border radius */ --radius-none: 0; --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 999px; /* Border width */ --border-thin: 1px; --border-default: 2px; --border-thick: 4px; /* Typography */ --font-family-base: 'Neulis Neue', sans-serif; }
Token copied!