Warm parchment. One prismatic horizon.

A restrained light system where the interface recedes and the hero carries the entire chromatic moment.

Describe the app you want to build

Colors

Warm neutrals do the work; Indigo appears only for inline links and keyboard focus.

Parchment#fcfbf8
Warm Sand#f7f4ed
Linen Border#eceae4
Stone#d4d3d0
Dim Gray#5f5f5d
Charcoal#1c1c1c
Ink#030303
Indigo Accent#3451b2
Hero GradientFull-width hero only

Type

Camera Plain Variable handles every scale at a compact −0.025em tracking, with ligatures disabled.

DisplayBuild with clarity.60 / 1 / 480
Heading lgQuiet confidence.48 / 1.1 / 480
HeadingOne strong idea.36 / 1.1 / 480
SubheadingSupporting copy remains direct and calm.18 / 1.38 / 400
BodyThe default reading voice for product and documentation.16 / 1.5 / 400
CaptionLabels, descriptions and compact metadata.14 / 1.5 / 400

Camera Plain Variable · fallback: Inter Variable, DM Sans · weights: 400, 480, 600

Spacing & shape

A compact 4px-derived scale leaves generous space only between the major ideas.

4
8
16
24
40
56
80
160
Input
8px
Image
12px
Container
16px
Card
24px
Pill
9999px

Elevation

Inset edges define ordinary containment. The chat prompt is the single elevated object.

Subtle
0.5px inset
Subtle 2
Prompt elevation
Subtle 3
0.5px inset

Components

Pills state action; warm cards support content without visual noise.

Pill actions

Secondary uses a linen rule; primary is near-black at 88% opacity. No colored CTA backgrounds.

Warm surface card

Warm Sand · 24px radius · 24px / 20px padding · no border or shadow.

Use the system quietly.

Do

  • Keep the hero gradient full-width and isolated.
  • Use Linen for every divider and visible border.
  • Keep headings at 480 and body copy at 400.
  • Use soft card and pill radii consistently.

Avoid

  • Cool grays, colored CTAs, and gradient text.
  • Additional type families.
  • Drop shadows outside the chat prompt.
  • Sharp corners on interactive controls.