Design System / Light

White gallery wall.
Indigo focus.

Figma keeps interface chrome black and white so the work can carry the color. Electric Indigo remains the singular action signal.

Explore componentsDownload spec

Foundation

Color tokens

Core UI uses Ink, Paper and one Electric Indigo. Brand and pastel colors are displayed-work tokens, not UI accents.

Ink Black
#000000
Paper White
#ffffff
Soft Mist
#e2e2e2
Electric Indigo
#4d49fc
Figma Cyan
#00b6ff
Figma Green
#24cb71
Figma Orange
#ff7237
Lilac
#c4baff

Typography

Type scale

FigmaDisplay / 72 / 1.1 / 320
Make it real.Heading-lg / 56 / 1.1 / 320
Design with precision.Heading / 24 / 1.35 / 340
The canvas gives the work room to speak.Body / 18 / 1.4 / 400

Layout

Spacing & shape

Spacing

44px
88px
1616px
2424px
4848px
8080px

Radius

2px
icons
8px
tags
16px
cards
50px
buttons

Elevation

Shadow

One shadow only, reserved for the hero floating card.

shadow-xl
rgba(0, 0, 0, 0.1) 0px 24px 70px 0px

Components

Component library

Actions

Indigo is the one primary action; the ghost action stays black and white.

Brand mark

The logo is the only UI element where the four marker colors appear together.

Guidelines

Use with restraint

Do

  • Reserve Electric Indigo for one CTA per viewport.
  • Use weight 320 display type at 56–72px.
  • Apply shadow-xl only to the hero card.

Avoid

  • Do not color ordinary UI controls with logo hues.
  • Do not shadow gallery cards.
  • Do not replace the white canvas with decorative surfaces.
DESIGN.mdtokens.jsonvariables.csstheme.css