Components
Each component is described by its fill, radius, padding, type size and color, so it can be rebuilt without guessing.
01
Primary CTA. Filled with the aurora gradient (cyan → white → pink), 6px border-radius, 32px vertical and 22px horizontal padding, text in a dark color (#222222) at 14px Arial, uppercase. The gradient runs horizontally, creating a sunrise effect.
02
Nav item. Transparent background, no border, uppercase at 12px Matter weight 400 with 0.12em letter-spacing. White when active, silver #bbc7c6 when inactive, sitting inline with a tight 16px column gap.
03
Content container. #003734 background, 16px border-radius, 36px padding on all sides, no shadow and no border. Heading at 36px Matter 500 white, body at 16px Matter 400 silver.
04
Deep content panel. #011d1c background, 16px border-radius, 120px vertical padding — a sunken well, the deepest UI surface, used for footer-adjacent blocks and call-to-action panels.
05
Service listing. Transparent background, 16px radius, 48px vertical and 36px horizontal padding, holding a heading, a body description and a small square arrow icon button.
06
Inline link trigger. A 32×32 square at 6px radius with a semi-transparent dark teal fill of rgba(3, 81, 75, 0.5) and a white diagonal arrow, always positioned to the right of a card title.
07
Eyebrow or kicker. 12px or 20px Matter weight 500, uppercase, letter-spacing 0.08–0.12em, in silver #bbc7c6 or mist #edfffe, sitting above a section heading as a categorical label.
08
Page-level title. 61–96px Matter weight 500, line-height 1.0, letter-spacing -0.04em, white. Tight tracking compensates for the geometric letterforms at scale.
09
Metric display. A large number in lavender-phosphor #fde9ff with a label below in mist or silver at 13px, uppercase and tracked.
10
Site header. Full-width, transparent background, around 80px tall: wordmark and mark left, links centered, CTA right at 6px radius, items separated by 16–24px gaps.
Reference screen
Signature moments
Four treatments do most of the identifying work. Everything else is canvas, surface and tracked type.
01
A 3D particle sphere rendered in teal-cyan and white dots, rotating in the hero or a section transition. The particles pick up the canvas teal and the accent pink, creating a bioluminescent data orb effect.
02
The aurora gradient sweeps horizontally from cyan through white into pink behind dark text at 14px, uppercase, on a 6px radius. It is the brand's signature chromatic gesture and it appears once per section.
03
A large number in lavender-phosphor #fde9ff with a tracked uppercase label below it in mist. The pink-on-teal combination is the signature emphasis treatment: statistics glow against the dark canvas.
04
White circles and thin connector lines forming an abstract molecular diagram, used as a right-column balancing element. No fill complexity, no photography, no people.
Next
Set the canvas, stack the surfaces, track the labels, and spend the color once. The guidelines are the whole system in two lists.
