Foundations

Color

Sober, timeless tones where content and photography lead. Reach for the semantic tokens in product code — the raw scales exist to define them, not to be used directly.

Core palette

Distribution: 80 / 10 / 7 / 3

Porcelain Light

var(--porcelain)

Neutral base — 80% of every surface

Charcoal

var(--charcoal)

Dark sections, primary CTAs — 10%

Graphite

var(--graphite)

Body text — 7%

Nolab Blue

var(--nolab-blue)

Functional accent only — 3%

Nolab Blue is reserved for active states, secondary navigation, microinteractions and emphasis. Never a section background, a button fill, or a large surface. Primary CTAs are Charcoal.

Semantic tokens

Use these in product code

surface-page

var(--surface-page)

Page background

surface-card

var(--surface-card)

Cards and raised panels

surface-sunken

var(--surface-sunken)

Inset wells

surface-paper

var(--surface-paper)

Warm editorial sections

surface-inverse

var(--surface-inverse)

Dark sections, footer

surface-inverse-deep

var(--surface-inverse-deep)

Deepest dark band

action-primary

var(--action-primary)

Primary CTA fill — Charcoal

action-disabled

var(--action-disabled)

Disabled button fill

border-subtle

var(--border-subtle)

Hairline dividers

border-default

var(--border-default)

Input and card borders

border-strong

var(--border-strong)

Primary button outline

focus-ring

var(--focus-ring)

Keyboard focus

Text on its surface

Contrast pairs

Belong.

var(--text-strong)

Headlines

Belong.

var(--text-body)

Body copy

Belong.

var(--text-muted)

Captions, metadata

Belong.

var(--text-link)

Links and accents

Belong.

var(--text-inverse)

Copy on dark sections

Belong.

var(--text-on-dark)

Copy over photography

Neutral scale

White

var(--neutral-0)

Card surface

Neutral 100

var(--neutral-100)

Porcelain Light / page

Neutral 150

var(--neutral-150)

Sunken surface, hairlines

Neutral 200

var(--neutral-200)

Warm paper, editorial bands

Neutral 250

var(--neutral-250)

Fine UI lines

Neutral 300

var(--neutral-300)

Default border

Neutral 400

var(--neutral-400)

Muted text

Neutral 500

var(--neutral-500)

Graphite — body text

Neutral 600

var(--neutral-600)

Deep surface

Neutral 700

var(--neutral-700)

Charcoal — inverse surface

Neutral 900

var(--neutral-900)

Deepest ink, headlines

Nolab Blue scale

Accent only

Blue 100

var(--blue-100)

Hover accent

Blue 500

var(--blue-500)

The accent: links, focus, active

Blue 700

var(--blue-700)

Pressed accent

Blue Tint

var(--blue-tint)

Faint wash for info callouts

Verticals

Fractional · Rentas

Terracotta 100

var(--terracotta-100)

Nolab Fractional — light

Terracotta 500

var(--terracotta-500)

Nolab Fractional — base

Terracotta 700

var(--terracotta-700)

Nolab Fractional — deep

Forest 100

var(--forest-100)

Nolab Rentas — light

Forest 500

var(--forest-500)

Nolab Rentas — base

Forest 700

var(--forest-700)

Nolab Rentas — deep

Status and data

Harmonized to the palette

Success

var(--success-600)

Confirmed, available

Success Soft

var(--success-100)

Success surface

Warning

var(--warning-600)

Pending, attention

Warning Soft

var(--warning-100)

Warning surface

Danger

var(--danger-600)

Error, withdrawn

Danger Soft

var(--danger-100)

Danger surface

Data Positive

var(--dataviz-positive)

Charts — gain

Data Negative

var(--dataviz-negative)

Charts — loss