Figma Design System Reference

Foundation

Color Tokens

A restrained palette anchored in pure blacks and whites with selective warm accents for highlights and deep accents for emphasis. This minimalist foundation ensures clarity and allows creative work to take center stage.

Black

#000000

Primary text · Dark backgrounds · Dominant UI

White

#FFFFFF

Primary background · Light surfaces · Card bg

Warm Accent

#FFB3B3

Highlights · Featured content · Visual emphasis

Deep Accent

#972121

Interactive states · Status indicators · Hover

Text Secondary

#666666

Secondary text · Descriptions · Metadata

Divider

#E0E0E0

Subtle borders · Dividers · Component separation

Background Tertiary

#F5F5F5

Subtle backgrounds · Grouped content · Hover states

Subtle Border

#CCCCCC

Input borders · Grouped sections · Muted dividers

Placeholder

#999999

Placeholder text · Disabled states · Hints

Typography

Type Scale

Inter provides the visual foundation — clean, modern, and perfectly tuned for digital interfaces. Generous line heights and proportional scaling create breathing room and ensure legibility across all sizes.

Primary Inter UI · Headings · Body · Buttons

Monospace Courier New Code · Technical labels · Metadata

Display Build what matters 56px · 400 · 56px

H1 Section Heading Label 14px · 400 · 18.2px

H2 Subsection Title 16px · 400 · 22.4px

Body Lg The quick brown fox jumps over the lazy dog 18px · 330 · 25.2px

Button Call-to-action button 16px · 400 · 18.4px

Navigation Menu · Navigation link 16px · 400 · 23.2px

Small Metadata · timestamp · caption 14px · 400 · 20px

Code const token = '#972121'; 12px · 400 · 16px

Layout

Spacing & Shapes

4px base grid — every spacing token is a multiple of 4. Generous whitespace is a core design principle that creates visual rest, improves focus, and prevents clutter. Border radii range from sharp to fully rounded to match component context.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

24px lg

32px xl

40px 2xl

56px 3xl

Border Radius

None 0px

Minimal 4px

Standard 8px

Full 9999px

Shadows

Flat No shadow · base content

Raised (sm) Nav · subtle elevation

Lifted Dropdowns · hover states

Elevated Modals · floating panels

Border Widths

Thin / Subtle 1px

No Border 0px

Opacity

Full 100%

High 90%

Medium-High 70%

Medium 50%

Low 16%

Z-index / Layering

Base Content 1

Sticky/Fixed 10

Dropdown 20

Modal 40

Elevation

Depth & Surfaces

Subtle shadow treatment and strategic layering create depth without visual heaviness. The minimal shadow palette uses pure black at varying opacities to suggest elevation naturally, maintaining the clean, modern aesthetic.

Primary Background

Main surface — cards, containers, primary interface elements

L0 · #FFFFFF

Secondary Background

Hover states · Grouped content · Subtle surface variation

L1 · #F5F5F5

Tertiary Background

Dividers · Subtle borders · Minimal visual weight

L2 · #E0E0E0

Primary #FFFFFF

Secondary #F5F5F5

Tertiary #E0E0E0

Text #000000

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, sizing, and interaction states optimized for usability and clarity.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #000000 bg · #FFFFFF text · 8px radius · 12px 22px padding · 46px height. Secondary: transparent bg · #000000 border. Ghost: text-only link style. All states include appropriate hover effects and disabled opacity handling.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #CCCCCC border · 8px radius · 12px 16px padding · 44px height. Focus: #000000 border · 2px outline-offset. Placeholder: #999999. All inputs meet 44px minimum touch target size.

Card

Content container — elevated surface with subtle shadow

.card

Project name

A brief description of this project or content. It remains clean and minimal.

#FFFFFF bg · #E0E0E0 border · 8px radius · 24px padding · 0px 1px 0px 0px rgba(0,0,0,.16) shadow. Title: 16px/400/#000000. Body: 16px/400/#666666. CTA: primary button.

Badges

Status indicators — Default, Error, Info

.badge

Active Error Info

12px/600 · 4px 8px padding · 12px radius. Default/Info: #000000. Error: #972121. All badges include #FFFFFF text for maximum contrast.

Guidelines

Do's & Don'ts

Core principles for consistent application of the Figma design language — maintaining clarity, minimalism, and purposeful visual hierarchy across all surfaces.

Do — Embrace

Use pure black and white as the foundation — maintain contrast and clarity
Embrace whitespace — allow breathing room; whitespace is a design element
Apply borders sparingly — use whitespace and shadow for visual separation
Maintain consistent padding — use the 4px base unit scale religiously
Prioritize typography hierarchy — use established sizes and weights to guide attention
Reserve accent colors intentionally — use warm accent and deep accent for CTAs and highlights only
Ensure sufficient contrast — all text must meet WCAG AA standards (4.5:1 minimum)

Don't — Avoid

Don't introduce new colors outside the palette — restrict to black, white, and two accents
Don't override the font family — Inter and monospace fallbacks maintain brand consistency
Don't use heavy shadows — keep elevation subtle and refined with appropriate opacity
Don't crowd layouts — respect margin and padding minimums; avoid visual clutter
Don't mix border styles — stick to solid 1px borders; avoid dashed or dotted
Don't randomly apply radius values — use the established scale (0px, 4px, 8px, 9999px)
Don't disable hover states — always provide visual feedback on interactive elements

figma.com

Preview