Foundations

Everything the Cryonix components are made of. Change a token and the whole system follows, in both themes.

Colour

Black, white and one ember family. The semantic layer swaps per theme, and every text colour clears WCAG AA. Loss is rose, never ember.

Ember#d32800 · primary

Flame#f53f16 · accents

Amber#fc6d01 · glow

Peach#ffa08a · focus

bg--cx-bg

elevated--cx-elevated

text--cx-text

text-muted--cx-text-muted

gain--cx-gain

loss--cx-loss

warning--cx-warning

ember-text--cx-ember-text

Manrope for everything. Headings get weight from size, never bold. H1 and H2 fade to half-white. Numbers are tabular.

`Balance · 56 / 300`	$24,180.50
`H1 · 64 / 400 · −2.5`	Move money like light
`H2 · 52 / 400`	Every asset in one view
`H3 · 32 / 500`	Instant settlement
`Lead · 20`	A calm line that sets up the section.
`Body · 16`	Default paragraph text and nav links.
`Small · 14`	Card descriptions and meta.

4px base. The site's 24 (card padding), 30 (gutter) and 100 (section) sit on the scale. Container 1320px. Breakpoints 768 and 1200.

1·4

2·8

3·12

4·16

5·20

6·24

7·32

8·40

9·48

10·64

20px card corners, pill controls. Cards separate by wash and a corner-lit hairline. Shadows are only for things that float.

Card · 20px · corner-lit

Overlay · 16px · shadow-lg

Pill · 100px

Things decelerate into place and never bounce. Everything stops under reduced-motion.

`--cx-ease`	`cubic-bezier(.22, 1, .36, 1)`	Default ease-out
`--cx-dur-fast · dur · dur-slow`	`140 · 240 · 600ms`	Hover · state · reveal
`aurora`	`19s + 26s alternate`	Two clocks, so it never visibly loops
`beam · shine · marquee`	`5s · 7s · 40s linear`	Continuous, one per view