Guidelines. Auros

Seven things the system does, and seven it refuses. They are not preferences: each one protects the sparse, cinematic register that the surface stack and the single display face create.

Do

Use only the teal-green surface stack (#011d1c → #012624 → #003734) for background differentiation — never introduce gray, black, or blue surfaces
Reserve the aurora gradient exclusively for primary CTAs and signature accent moments — never as a background fill or decoration
Set all headings at Matter weight 500 — no bold, no light, no other weights at display sizes
Apply uppercase tracking (0.08–0.15em) to all section labels, kickers, and eyebrow text at 10–20px
Use lavender-phosphor pink (#fde9ff) only for large statistics and emphasis figures — never for body text or UI controls
Keep card radii at 16px and small element radii at 6px — these two values are the complete shape vocabulary
Use line-height 1.0 for all display text above 36px and line-height 1.4 for all body text — the contrast defines the typographic rhythm

Don't

Do not use drop shadows or box-shadows for elevation — differentiation comes from surface color shifts in the teal stack, not shadow
Do not introduce bold (600+) or light (300-) weights at display sizes — the medium-only strategy is core to the mechanical confidence
Do not use white (#ffffff) for body text — reserve pure white for headings and nav, use silver (#bbc7c6) or mist (#edfffe) for body
Do not apply the aurora gradient to text, borders, or backgrounds larger than a single button — it loses luminosity at scale
Do not use rounded corners above 16px — the system is sharp-rounded, not pill-shaped (buttons are 6px, cards are 16px)
Do not place light text on light-pink (#fde9ff) — the pink is a background for dark text, not a text color on dark surfaces
Do not use any color outside the Liquid teal scale, silver neutrals, and lavender-phosphor accent — the palette is rationed and deliberate

Elevation

Imagery

Imagery is minimal and atmospheric. A rotating particle sphere of teal-cyan and white dots picks up the canvas colour and the lavender-pink accent at its edges, and flat geometric molecular diagrams — white circles and thin connector lines — balance a column where a section needs weight. No photography, no lifestyle imagery, no people: the visual language is pure data-graphics and abstract forms.

Before you build

The questions the system answers first.

Which surfaces may a section use?

Only the teal-green surface stack: Liquid Deep, Liquid Abyss and Liquid Kelp. Gray, black and blue surfaces stay outside the system.

Where can the aurora gradient appear?

On primary CTAs and signature accent moments. Never as a background fill or decoration, never on text or borders, and never across anything larger than a single button — it loses luminosity at scale.

Which weights are allowed at display sizes?

Weight 500, and only weight 500. No bold, no light, no other weights at display sizes — the medium-only strategy is core to the mechanical confidence.

How is elevation handled without shadows?

Through surface colour shifts in the teal stack. Each level is a darker or lighter step in the same green hue, so objects float at different depths rather than being raised off paper.

Where may the pink be used?

Lavender phosphor is for large statistics and emphasis figures. It is never body text, never a UI control, and never a ground for light text — the pink is a background for dark text, not a text colour on dark surfaces.

What are the shape values?

Cards at 16px and small elements at 6px. Those two values are the complete shape vocabulary, and nothing rounds further than 16px.

Build on the abyss.

Take the surface stack, the two radii and the rules as written, and the interface holds its register without further supervision.

Read the guidelines