Design System — v1.0
Single source of truth
Every style, component and rule used across the site lives here. Build new pages by composing what already exists — do not introduce new colors, sizes or spacing values outside this page.
Foundations
Components
Patterns
01 — Foundations
Colors
Neutrals carry the interface. Brand colors are accents only — one accent per view. Feedback colors are reserved for system messaging and never used decoratively.
white-100
rgb(255,255,255)
Raised surfaces, cards, inputs
background 1
rgb(241,241,241)
Page background
black-100
rgb(16,16,16)
Primary text, primary button
black-50
rgba(0,0,0,0.5)
Secondary text, captions
black-25
rgba(0,0,0,0.25)
Placeholders, disabled labels
black-10
rgba(0,0,0,0.1)
Borders, dividers
brand/Electric Violet
rgb(130,45,255)
Primary accent, hover, links
brand/primary
rgb(255,0,215)
Editorial accent
brand/secondary
rgb(0,255,246)
Editorial accent
brand/tertiary
rgb(231,249,154)
Highlight surfaces
feedback/success
rgb(31,143,94)
Confirmation only
feedback/warning
rgb(199,123,0)
Caution only
feedback/error
rgb(212,45,45)
Errors, destructive only
02 — Foundations
Typography
Alpha Lyrae carries all headings in uppercase; Inter carries every interface and body string; Atkinson Hyperlegible Mono is used only for specs and code. Text styles are responsive — never override size inline.
Design/Heading 1
Venture designer
Page titles — one per page
Design/Heading 2
Section title
Section titles
Design/Heading 3
Subsection title
Blocks inside a section
Design/Heading 4
Card title
Card and list headings
Design/Heading 5
Small heading
Dense card headings
Design/Overline
Label / meta
Labels, eyebrows, tags
Design/Body-large
Lead paragraph copy
Intro paragraphs
Design/Body-medium
Default body copy for the interface.
Default body
Design/Body-small
Supporting copy and helper text.
Captions, helpers, specs
Design/Button
Button label
Interactive labels
Design/Caption
Caption and footnote text
Footnotes, disclaimers
Design/Code
0.75rem / 1.4em / Atkinson Hyperlegible Mono
Specs and code only
03 — Foundations
Spacing
One scale, no in-between values. 8 and 16 for dense UI, 24 and 32 for card and block padding, 88 for vertical rhythm between sections, 124 for desktop page gutters.
8px
Icon to label, inline pairs
16px
Items in a list, grid gaps
24px
Card padding
32px
Block gaps inside a section
48px
Group separation
88px
Between page sections
124px
Desktop page gutter
04 — Foundations
Grid & Layout
Content is centred in a 1440px max container. Desktop uses 124px gutters, tablet 32px, phone 24px. Card grids use flexible minimum-width columns so they reflow from four to two to one without new rules.
Container
1440px max · centred
Every section uses the same max width
Gutters
124 / 32 / 24
Desktop · tablet · phone
Section rhythm
88px vertical
Same top and bottom on all sections
Card grid
min 240–280px columns
Reflows 4 → 2 → 1
Media
16px radius · clip
Images never bleed past the container
Stacks
Gap only, never margins
Spacing always comes from the parent
05 — Foundations
Radius, Borders & Shadows
Three radii only: 8 for controls inside cards, 16 for cards and media, 99 for pills. Borders are always 1px. Elevation is used sparingly — flat surfaces plus a border are the default.
radius 0px
Full-bleed blocks, media strips
radius 8px
Inputs, chips inside cards
radius 16px
Cards, media, notices
radius 99px
Buttons, tags, avatars
border / hairline
Default separation between surfaces
border / strong
Ghost controls, emphasis
border / focus
Focus ring on inputs and controls
elevation / 0
Flat surface with a hairline border
elevation / 1
0 1 2 0 · 0 4 12 -4
elevation / 2
0 2 4 0 · 0 16 32 -8
06 — Foundations
Icons
Material is the only icon set. Icons are 18px inside controls and 20–24px standalone, always inheriting the text color of their context. Never mix in another set or use text glyphs as icons.
Arrow Circle Right
Arrow Back
Chevron Right
Expand More
Close
Menu
Search
Check Circle
Info
Report Gmailerrorred
Refresh
Favorite
07 — Components
Buttons
One button component, four variants. Primary is the only high-emphasis action per view. Every button is 44px tall with 24px horizontal padding, a pill radius and a pointer cursor; hover and pressed shift the fill to Electric Violet.
Variants
Primary → main action. Secondary → alternative on light surfaces. Ghost → tertiary or in-page navigation. Disabled → action unavailable, never hidden.
States
Hover and pressed are built into the component as gesture variants — never re-style a button instance by hand.
Usage rules
Icon sits after the label at 18px. Labels are sentence case, two to three words. Links are set through the component Link property, never on the label.
08 — Components
Forms
Fields are 44px tall with an 8px radius inside a 16px card. Labels are always visible, helper text sits under the field, and errors replace the helper color rather than adding new elements.
Input states
We reply within one business day.
We reply within one business day.
Enter a valid email address.
We reply within one business day.
Default · Focus · Error · Disabled. Focus is a violet 1px ring, error a red 1px ring plus red helper text.
Working form
A form always ends with one primary submit button as its last child. Required fields are marked in the field label, not with color alone.
09 — Components
Navigation
Navigation is a single shared component: a wordmark on the left, one primary action on the right, and a drawer below 810px. Links use the Design/Link style so the current page is always visible.
Link styles
Default violet, black on hover with an underline, black when the link points at the current page.
Bar pattern
Sticky, 88px tall on desktop, translucent surface with a hairline bottom border. One action only.
10 — Components
Cards
One card shell: 16px radius, 24px padding, hairline border, eyebrow + title + body. Accent and highlight variants carry emphasis; hover raises the card with elevation 1. Never invent a new card surface.
Variants
Default for most content. Accent for one featured item per section. Highlight for editorial callouts.
In a grid
Cards live in a flexible grid with a 16px gap and equal-height cells; columns reflow from three to one without changing the card.
11 — Components
Data Display
Numbers use the metric component with tabular figures. Tabular information uses spec rows — a label, a value in mono and an optional note — instead of ad-hoc tables.
Metrics
12M+
People reached
48
Projects shipped
14
Years designing
Default on light sections, inverted for a single emphasis block.
Spec rows
Container max width
1440px
Desktop gutter
124px
Section rhythm
88px
Card radius
16px
Control height
44px
Label left, value in mono right, hairline divider between rows. Use for specs, tokens and comparisons.
Tags
Product design
Brand
Live
Archived
Neutral by default. Accent for the active filter. Success and error only reflect real system state.
12 — Components
Feedback & States
Every interactive element has four states: rest, hover, pressed and disabled. System messaging uses the notice component. Loading and empty states are designed, never left blank.
Notices
Message sent
Thanks — I’ll get back to you shortly.
Draft page
This page is not published yet.
Something went wrong
Check the highlighted field and try again.
One line title, one line body, one icon. Never stack more than one notice at a time.
Loading
Loading
A single rotating indicator on the surface it belongs to. No skeleton screens, no progress bars.
Empty state
No projects match this filter yet.
Icon, one sentence, one action. Always offer a way forward.
State matrix
Rest
Token fill, hairline border
Hover
Electric Violet fill or strong border
Pressed
Same as hover at 85% opacity
Focus
1px Electric Violet ring, never removed
Disabled
black-10 fill, black-25 label, no pointer events
Loading
Rotating indicator, action blocked
Rest → hover shifts fill or border. Pressed dims to 85%. Disabled drops to the hairline fill and blocks pointer events. Focus is always a violet 1px ring.
13 — Patterns
Patterns
Recurring page structures assembled only from the parts above. Reuse these instead of designing new section shells.
Section shell
Order
Label → title → intro → content
Gaps
32px inside, 88px between sections
Intro width
720px maximum
Alignment
Left aligned on every breakpoint
Overline label, heading, one supporting paragraph capped at 720px, then content. 88px between sections, 32px inside.
Call to action block
Have something to build?
Full-width accent surface, one heading, one primary button. Only one per page.
Logo strip
Nike
Coca-Cola
Vivo
Havaianas
Unilever
Logos indicate a history of work and collaboration; they do not imply endorsement.
Grayscale logos in one row on a page-background surface, with a caption clarifying that logos do not imply endorsement.
14 — System rules
Responsive Behavior
Three breakpoints: desktop from 1440px, tablet from 810px, phone below 810px. Text styles scale automatically; layout follows the rules below.
Breakpoint rules
Desktop ≥ 1440
124px gutters · 3–4 column grids · nav bar with inline action
Tablet ≥ 810
32px gutters · 2 column grids · nav bar with inline action
Phone < 810
24px gutters · single column · nav collapses to a drawer
Typography
Heading sizes step down per breakpoint inside the text style
Grids
Switch to a vertical stack once a grid becomes one column
Touch targets
Controls stay 44px tall on every breakpoint
Never introduce a new breakpoint. Adapt with column counts, gutters and stacking only.
15 — Usage
Usage Examples
A complete section built only from system parts: section shell, tag, heading, card grid and one primary action. This is the expected starting point for any new page.
Selected work
Work that shipped
Three cards, one accent, one action. No new styles were needed to build this section.
16 — System rules
Accessibility
Contrast, target size and visible focus are part of the system, not an afterthought. If a change breaks one of these rules, the change is wrong.
Rules
Body contrast
black-100 on background 1 and white surfaces only
Secondary text
black-50 minimum — never black-25 for reading text
On accent
White text on Electric Violet, black text on tertiary lime
Target size
44px minimum height and 44px minimum tap area
Focus
Visible 1px Electric Violet ring, never disabled
Meaning
Never rely on color alone — pair with a label or icon
Semantics
Headings follow document order; nav, form and footer use real landmarks
Check every new combination against this list before shipping.
Design System — v1.0
One source of truth. Compose, don’t invent.