Design System
Documentation
Foundations & Components: colors, typography, dimensions, spacing, layout grid, and UI components.
Open in FigmaColors
The palette is organized into primitive colors (raw palette) and semantic tokens (contextualized usage). Always prefer semantic tokens in code.
1.1 Primitive palette
| Token | Hex | Usage |
|---|---|---|
| color/brand/100 | #FEE4E0 | Light backgrounds, subtle states |
| color/brand/300 | #FCAFA3 | Badges, chips, soft hover |
| color/brand/500 | #FA6048 | Main color — CTA, highlights |
| color/brand/700 | #D0503C | Hover/pressed state |
| color/brand/800 | #A64030 | Active/deep focus state |
Warm terracotta tone used to enrich the palette without competing with the main color.
Vivid mint accent for success indicators, badges and secondary accent elements.
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.
1.2 Semantic tokens
Always use these tokens in code rather than raw hex values.
|
color/text/neutral/bold/default
| Headings, primary text |
|
color/text/neutral/subtle/default
| Body text |
|
color/text/neutral/subtlest/default
| Placeholders, secondary |
|
…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 |
|
…neutral/subtlest/default
| Light borders, dividers |
|
…neutral/bold/default
| Bold borders |
|
…brand/bold/default
| Focus ring, selection |
Dimensions
Scale based on a 4 px grid. These tokens serve primarily as a foundation for typography (font sizes, line heights).
Complete scale
Spacing, radius & borders
3.1 Spacing
Spacing scale (padding, margin, gap) based on a 4 px grid.
3.2 Border radius
3.3 Border width
Layout
4.1 Breakpoints
4.2 Grids
Rule: design in 4 columns for mobile, then switch to 12 columns from breakpoint-md.
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
5.2 Body text
3 sizes × 4 weights. body/regular/medium is the default text style.
5.3 Labels
For buttons, form fields and field labels. Always prefer label styles over body for these use cases.
5.4 Captions
Helper text, captions, metadata, legal notices.
Button
The Button component is the primary action element. It comes in 3 styles, 5 states and 3 sizes. Always use the label/bold type style on button text.
6.1 Styles & states
Three visual styles address different levels of emphasis in the interface. Each style has 5 interactive states.
| Style | State | Background token | Border token | Text token |
|---|---|---|---|---|
| Primary | Default | color/background/brand/bold/default #FA6048 | color/border/brand/bold/default | color/text/inverse/bold/default — white |
| Primary | Hovered | color/background/brand/bold/hovered #D0503C | color/border/brand/bold/hovered | white |
| Primary | Pressed | color/background/brand/bold/pressed #A64030 | color/border/brand/bold/pressed | white |
| Primary | Disabled | color/background/brand/bold/disabled #A39C9B | color/border/brand/bold/disabled | color/text/inverse/bold/disabled — rgba(255,255,255,0.5) |
| Secondary | Default | color/background/neutral/subtlest/default #FFFFFF | color/border/neutral/subtle/default | color/text/neutral/bold/default — #272323 |
| Secondary | Hovered | color/background/neutral/subtle/hovered #D1CDCD | color/border/neutral/subtle/hovered | #272323 |
| Secondary | Pressed | color/background/neutral/subtle/pressed #BAB5B4 | color/border/neutral/subtle/pressed | #272323 |
| Ghost | Default | transparent | color/border/neutral/bold/default #272323 | color/text/neutral/bold/default — #272323 |
| Ghost | Hovered | color/background/neutral/subtlest/hovered #E8E6E6 | #272323 | #272323 |
| Ghost | Pressed | color/background/neutral/subtlest/pressed #D1CDCD | #272323 | #272323 |
| All | Focused | Same as Default + outer outline: color/icon/neutral/bold/default 2px, offset 4px, radius full | ||
6.2 Sizes
| Size | Font size | Line height | Padding (V / H) | Token |
|---|---|---|---|---|
| Large | 24 px | 32 px | 20 px / 32 px | text/label/bold/large |
| Medium | 20 px | 28 px | 16 px / 24 px | text/label/bold/medium |
| Small | 16 px | 24 px | 12 px / 24 px | text/label/bold/small |
All sizes share: border-radius border-radius/radius-full (999 px) · border-width border-width/border-default (2 px) · optional icon 24 × 24 px on left.
Use Primary for the single main action per view. Keep label short and action-oriented.
Don't use two Primary buttons side by side — it creates visual ambiguity. Use Secondary or Ghost for the secondary action.
Link
Inline text link with optional left icon. Used for navigation and contextual actions that do not require a full button. Comes in 3 sizes and 5 states matching the Button component.
7.1 Variants
| Property | Token | Value |
|---|---|---|
| Color (default) | color/text/neutral/bold/default | #272323 |
| Color (hovered) | color/text/brand/bold/hovered | #D0503C |
| Color (pressed) | color/text/brand/bold/pressed | #A64030 |
| Color (disabled) | color/text/neutral/subtle/disabled | #A39C9B |
| Font (large) | text/label/regular/large | Neulis Neue Medium 500, 24 px / 32 px |
| Font (medium) | text/label/regular/medium | Neulis Neue Medium 500, 20 px / 28 px |
| Font (small) | text/label/regular/small | Neulis Neue Medium 500, 16 px / 24 px |
| Icon (optional) | — | 24 × 24 px, positioned left, gap 8 px |
Tag
Small pill labels used to categorize content, indicate status, or display metadata. Available in 5 styles and 3 sizes.
8.1 Styles
| Style | Background | Border | Text |
|---|---|---|---|
| Default | color/background/brand/subtle/default #FCAFA3 | color/icon/brand/subtle/default | color/text/neutral/bold/default — #272323 |
| Bold | color/background/brand/bold/default #FA6048 | color/icon/brand/bold/default | color/text/inverse/bold/default — white |
| Inverted | color/background/neutral/subtle/default #E8E6E6 | color/border/neutral/subtle/default | color/text/neutral/bold/default — #272323 |
| Ghost | transparent | color/border/neutral/bold/default #272323 | color/text/neutral/bold/default — #272323 |
| Disabled | color/background/neutral/subtle/disabled #E8E6E6 | color/border/neutral/subtle/default | color/text/neutral/bold/disabled — #756B69 |
All tags: border-radius border-radius/radius-full (999 px) · border-width border-width/border-thin (1 px) · backdrop-filter blur(10 px) · font text/label/regular/{size} (Neulis Neue Medium 500).
Use Default for categories, Bold for high-emphasis labels like "New" or "Featured".
Don't use the Disabled style for interactive tags — it signals that the element is non-clickable.
Card
Content container used to present a project, case study, or article. Composed of an optional image area, a title, body text, and a primary CTA button.
9.1 Anatomy
| Element | Token / Spec |
|---|---|
| Container border | color/border/neutral/subtle/default 2 px · radius 30 px |
| Width | 500 px (fixed) |
| Image area | 218 px height · radius top-left + top-right 30 px |
| Content padding | top 40 px · sides 32 px · bottom 60 px |
| Gap (content block) | 23 px |
| Title | text/heading3/desktop — Extra Bold 32 px / 44 px |
| Description | text/body/regular/large — Regular 24 px / 32 px |
| CTA | Button Medium Primary |
| Background | color/background/neutral/subtlest/default — #FFFFFF |
Always pair the card with an image. The visual creates an immediate entry point and reinforces the brand identity.
Don't truncate the title — let it wrap naturally. Cards have a fixed width of 500 px designed to accommodate 2–3 lines of heading.
Input
Form field component with 5 functional styles and 7 interactive states. Uses a floating label pattern when the field is focused or filled.
10.1 Styles
10.2 States
| State | Border token | Value | Background |
|---|---|---|---|
| Default | color/border/neutral/subtle/default | #D1CDCD | white |
| Hovered | color/border/neutral/subtle/hovered | #BAB5B4 | white |
| Focused / Typing | color/border/neutral/bold/default | #272323 | white |
| Error / Empty | color/border/danger/bold/default | #D73325 | white |
| Disabled | color/border/neutral/subtle/disabled | #BAB5B4 | color/background/neutral/subtlest/disabled #E8E6E6 |
Structure: border-radius border-radius/radius-sm (4 px) · border-width border-width/border-thin (1 px) · padding 12 px × 16 px. Label uses floating pattern: full size (text/body/regular/small) when empty, shrinks to text/caption/small (10 px, grey/500) when focused or filled. Error text: text/caption/medium (12 px) in color/text/danger/bold/default.
Icons
Icon library with 22 icons available in 3 sizes (Large 24 px, Medium 20 px, Small 16 px). Icons are SVG-based components designed on a 24 × 24 px grid with consistent stroke weight.
12.1 Icon set
| Size | Dimensions | Usage |
|---|---|---|
| Large | 24 × 24 px | Buttons, topbar, primary UI elements |
| Medium | 20 × 20 px | Secondary actions, form fields (eye, chevron) |
| Small | 16 × 16 px | Inline text, badges, compact lists |
Click an icon to copy its name. Icons are exported from Figma as individual SVG components. To use: import the icon component matching the desired size (Large / Medium / Small) and apply color via color/icon/* tokens or inherit from the parent text color.
Always use the size that matches the surrounding context (Large in buttons, Medium in inputs). Apply a single semantic color token to the icon fill.
Don't scale icons by CSS transform — always use the correct size variant (Large / Medium / Small). Don't use raw hex values for icon color; use semantic tokens.
CSS Variables
Implementation example of all tokens as custom CSS variables.