Foundations

Design Foundations

The core principles, spacing system, colour tokens, typography scale, and visual constants that underpin every decision across Roam’s digital products.

Principles

Design Principles

These principles guide every design and development decision at Roam. They apply to component design, page layout, and the overall product experience.

White space is intentional

Space is a design tool, not a gap to fill. Generous spacing communicates confidence and helps users focus. Resist the urge to fill every pixel.

Mobile first, always

Most Roam traffic comes from mobile devices. Start with the small screen and progressively enhance. If it doesn't work on mobile, it doesn't ship.

Brand as accent

Vibrant brand colours are powerful in small doses. Use them for icons, highlights, and decorative elements — not for CTAs or large surface fills. CTAs use black (zinc-950). The palette should feel energetic, not overwhelming.

Consistency over novelty

Use shadcn/ui defaults and Tailwind's built-in scale before inventing custom values. Consistency across the product is more valuable than a clever one-off.

Accessible by default

Every colour combination must meet WCAG AA contrast. Every interactive element must be keyboard-navigable. Accessibility is a baseline, not an enhancement.

Ship with confidence

The design system exists so that team members and agents can build UI quickly without second-guessing. Clear conventions mean fewer decisions and faster output.

Colour Tokens

Colour System

The full token reference. Brand colours for personality, neutrals for structure, and tints for subtle backgrounds. Always use Tailwind tokens — never raw hex in components.

Brand Colours

The core brand palette. Used as accents, not fills.

Note: The primary CTA colour is zinc-950 (black), not a brand colour. Brand colours are accents — use them for icons, highlights, and decorative elements, not buttons or interactive controls.

Brand Dark Blue

#13013F

brand-dark-purple-950

Full-colour sections, dark surfaces, gradients

Fuchsia

#F93771

pink-700

Accent, icons, highlights

Purple

#5A49BB

brand-purple-900

Gradients, secondary accents

Purple Active

#4A3B9E

brand-purple-800

Active/hover states

Fuchsia Hover

#D20643

pink-800

Fuchsia hover/active

Tints & Supporting

Lighter shades for hover states, tint backgrounds, and subtle accents.

Light Purple

#E3E0F4

Tint backgrounds

Light Fuchsia

#FEEBF1

Hover states, tint backgrounds

Fuchsia 300

#FCA8C1

Subtle accents

Pink 400

#F9457B

Mid-accent

Pink 500

#F95D8B

Decorative

Neutral Tokens

Semantic tokens that switch between light and dark mode automatically.

Token	Light	Dark
background	#FFFFFF	#09090B
foreground	#0A0A0A	#FAFAFA
muted	#F5F5F5	#27272A
muted-foreground	#737373	#A1A1AA
border	#E5E5E5	#27272A
ring	#A1A1A1	#52525B
card	#FFFFFF	#18181B
accent	#F5F5F5	#27272A

Brand Gradient

Use sparingly — hero sections and marquee moments only.

background: linear-gradient(254.33deg, #5A49BB 0%, #13013F 100%);

Spacing

Spacing & Layout

Follow Tailwind’s default spacing scale. Do not invent custom values. Generous whitespace is intentional — it communicates confidence and helps users focus.

Spacing Scale

0.5

0.125rem (2px)

0.25rem (4px)

1.5

0.375rem (6px)

0.5rem (8px)

0.75rem (12px)

1rem (16px)

1.25rem (20px)

1.5rem (24px)

2rem (32px)

2.5rem (40px)

3rem (48px)

4rem (64px)

5rem (80px)

6rem (96px)

8rem (128px)

Layout Conventions

Page container

max-w-7xl mx-auto px-6

Standard max-width for content pages

Narrow container

max-w-4xl mx-auto px-6

For text-heavy pages like blog, legal

Section padding

py-16 md:py-24

Vertical padding for full-width sections

Card padding

p-6 md:p-8

Internal padding for cards and panels

Component gap

gap-4 md:gap-6

Standard gap in grid and flex layouts

Section gap

space-y-16 md:space-y-24

Vertical spacing between major sections

Typography

Type System

Maison Neue is the brand typeface, self-hosted from styles/fonts/. Follow Tailwind’s default type scale — do not invent custom sizes.

Font Stack

'Maison Neue', Arial, Helvetica, Roboto, system-ui, sans-serif

Type Specimen

ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !@#$%&*()

Weight Scale

Freedom on your terms

Light (300)font-light

Freedom on your terms

Regular (400)font-normal

Freedom on your terms

Medium (500)font-medium

Freedom on your terms

Semibold (600)font-semibold

Freedom on your terms

Bold (700)font-bold

Freedom on your terms

Black (900)font-black

Type Scale

The quick brown fox

text-xs0.75rem / 12pxCaptions, fine print

The quick brown fox

text-sm0.875rem / 14pxHelper text, labels

The quick brown fox

text-base1rem / 16pxBody copy

The quick brown fox

text-lg1.125rem / 18pxLead paragraphs

The quick brown fox

text-xl1.25rem / 20pxCard titles

The quick brown fox

text-2xl1.5rem / 24pxSection subheadings

The quick brown fox

text-3xl1.875rem / 30pxSection headings

The quick brown fox

text-4xl2.25rem / 36pxPage headings

The quick brown fox

text-5xl3rem / 48pxHero display

Border Radius

Corner Radii

Follow shadcn defaults. Use rounded-md for inputs, rounded-lg for buttons, rounded-xl to rounded-2xl for cards. Avoid pill-style (rounded-full) except for avatars and badges.

none

rounded-none

0px

Sharp corners

rounded-sm

2px

Subtle rounding

rounded-md

6px

Default for inputs

rounded-lg

8px

Buttons, small cards

rounded-xl

12px

Cards, panels

2xl

rounded-2xl

16px

Large cards, sections

full

rounded-full

9999px

Pills, avatars only

Elevation

Shadows & Elevation

Tailwind’s default shadow scale. Use elevation sparingly — most elements rely on borders, not shadows.

shadow-sm

Subtle lift — inputs, small cards

shadow

Standard cards and containers

shadow-md

Raised cards, popovers

shadow-lg

Dropdowns, floating menus

shadow-xl

Modals, dialogs

shadow-2xl

Toasts, elevated overlays

Responsive

Breakpoints

Mobile-first breakpoints using Tailwind’s responsive prefixes. Write styles for the smallest screen first, then layer on enhancements with sm:, md:, lg:, xl:, and 2xl:.

Name	Prefix	Min Width	Target
Default	`(none)`	0px	Mobile phones — portrait
sm	`sm:`	640px	Large phones — landscape
md	`md:`	768px	Tablets
lg	`lg:`	1024px	Small laptops
xl	`xl:`	1280px	Desktops
2xl	`2xl:`	1536px	Large screens

Visual Reference

Relative widths of each breakpoint. Mobile-first means everything below a breakpoint inherits the base styles.

640px

768px

1024px

1280px

2xl

1536px

Mobile-First Pattern

<!-- Base: 1 column, sm: 2 columns, lg: 3 columns -->
<div class="grid grid-cols-1 gap-4
            sm:grid-cols-2 sm:gap-6
            lg:grid-cols-3">
  ...
</div>

<!-- Base: stack, md: side-by-side -->
<div class="flex flex-col gap-4
            md:flex-row md:items-center md:gap-8">
  ...
</div>

<!-- Base: small text, md: larger, lg: largest -->
<h1 class="text-2xl font-bold
           md:text-3xl
           lg:text-5xl">
  ...
</h1>

Mobile

Tablet

Desktop