Figma Design System Preview

01 / Colors

Color swatches grouped by role.

Brand & Text

Primary#000000

On Primary#FFFFFF

Ink#000000

Inverse Ink#FFFFFF

Magenta Promo#FF3D8B

Success#1EA64A

Surfaces & Dividers

Canvas#FFFFFF

Inverse Canvas#000000

Surface Soft#F7F7F5

Hairline#E6E6E6

Hairline Soft#F1F1F1

Pastel Color Blocks

Block Lime#DCEEB1

Block Lilac#C5B0F4

Block Cream#F4ECD6

Block Pink#EFD4D4

Block Mint#C8E6CD

Block Coral#F3C9B6

Block Navy#1F1D3D

02 / Typography

Editorial scale with fine variable weights.

Display XL

Think bigger.

86 / 340 / 1.00

Display LG

Build together.

64 / 340 / 1.10

Headline

Story-block titles inside color blocks.

26 / 540 / 1.35

Subhead

Long-form intro paragraphs at near-headline scale.

26 / 340 / 1.35

Card Title

Pricing tier titles

24 / 700 / 1.45

Body LG

Lead body copy on hero and contact form labels.

20 / 330 / 1.40

Body

Default body copy used across the marketing canvas.

18 / 320 / 1.45

Body SM

Card body and footer link list compact copy.

16 / 330 / 1.45

Link

Inline link emphasis at weight 480.

20 / 480 / 1.40

Button

All pill buttons, primary and secondary.

20 / 480 / 1.40

Eyebrow

Section marker label

18 / 400 / 1.30

Caption

Footer column heads

12 / 400 / 1.00

03 / Buttons

Every variant as a real button.

04 / Cards

Light and dark operational surfaces.

Pricing Card

Professional

White surface with hairline border and no shadow. The monochrome chrome makes color blocks feel intentional.

EditorsUnlimited

ProjectsUnlimited

Dark Block

Ship products

Deep navy surface for story blocks. The only inverse color-block above the footer.

StatusActive

RegionGlobal

05 / Forms

Inputs with visible focus and error states.

06 / Spacing

Eight-pixel rhythm with generous section breaks.

hair

1px

xxs

4px

xs

8px

sm

12px

md

16px

lg

24px

xl

32px

xxl

48px

section

96px

07 / Radius

Pastel squares showing the corner scale.

2px xs

6px sm

8px md

24px lg

32px xl

50px pill

9999px full

08 / Elevation

Shadow-light elevation system.

0 Flat

No shadow, no border. Color blocks do the work.

1 Hairline

1px border on canvas. Pricing cards and inputs.

2 Soft

Subtle drop shadow for floating template tiles.

3 Modal

Stronger shadow with scrim behind lightboxes.