Aurora

Best for

• Business types: creative and production studios, agencies, premium tech and AI products, nightlife and hospitality after dark, beauty and aesthetics clinics, music, events and festivals, luxury retail with a night personality.
• Audiences: people who judge quality by feel before reading a word; consumers choosing a premium option; clients hiring for taste.
• Less suited to: information-dense sites (government, healthcare portals, documentation), businesses whose customers browse in bright daylight on old phones, anyone who needs a light-mode website. For those, see Signal.

Personality and voice

Confident, quiet and short. Aurora lets the light do the talking, so copy is spare and declarative. It never shouts and never explains the obvious. Sentence case everywhere.

• Headlines pair a plain statement with a spectrum phrase: "Moving pictures for restless brands", "Late nights, slow pours", "Skin care that shows its working".
• Lead copy says who you are and what you make in one or two sentences. Specific nouns, no adjectives stacked three deep.
• Buttons: verbs that say what happens. Start a project, Book a table, Send a brief, See the work. The primary is always a white pill; the secondary is glass.
• Microcopy: "Packages & pricing", "Placeholder marks. Replace with your clients' logos, with their permission.", "Client and show name withheld.", "Typical timeline: 3–4 weeks".
• Avoid: exclamation marks, "unleash", "elevate", "cutting-edge", emoji, ALL-CAPS headlines.

Colour

Aurora's palette is black, white, glass and one three-stop spectrum. Everything else is white at an opacity.

Light and dark. The website is always dark (color-scheme: dark). The [data-theme="light"] "Pearl" block in tokens.css swaps to #fbfaff paper and near-black ink for invoices, proposals and email signatures, where the brand must survive a white page.

Contrast. White on black is 21:1. Body copy at 72% white on black is about 13:1; --faint (42%) is about 6:1, the minimum we use for text. The light field is brightest at the top of the screen and fades towards the bottom, so most copy sits on near-black. Where a card sits over the brightest light (the Iridescence show fills the whole screen), check body copy against what's behind it and switch that card to --glass-dark if it drops below 4.5:1. Never put body copy directly on the light field without a card or the hero's dark vignette. The spectrum gradient is decorative: never use it for small text or the only signal of meaning.

Typography

One family, used with discipline.

• Geist (Google Fonts) 400 / 500 / 600 / 700 for everything.
• Geist Mono (Google Fonts) 500 for case IDs and codes only (CF-07).

The signature move: one phrase per headline set in the spectrum gradient with background-clip: text. Give it inline padding (0 .06em .08em, with matching negative margin) so descenders and the last glyph are never clipped. Never more than one gradient phrase per headline, never in body copy.

Layout

• One column. Content sits in a centred 1024px column with clamp(24px, 4vw, 48px) gutters. The header spans the full width.
• Hero is centred, at least 70% of the viewport tall, with a badge, a two-line headline, a lead, a one-line service list and two pill buttons, all centred.
• Grids: 2-up for services and case files, 4-up for pricing and small tiles, a 2×2 + tall proof tile bento for featured work. Everything collapses to one column at 560px.
• Spacing scale (4px base): 4, 8, 12, 16, 24, 32, 48, 64, 96, 128. Sections are 96px apart (64px on phones). Section heads: title, a 96px spectrum hairline, then a short muted line.
• Rhythm: hero, then alternating card grids and quiet text sections; a centred quote and a dark glass CTA panel close the page. Long pages stay readable because the light field fades towards the bottom of the screen.

Shape

• Radii: pills 999px for every button and chip; cards 16px; large and featured cards 24px; small controls 10px.
• Borders: 1px white at 10% on cards, 20% on controls, 40% on hover.
• Shadows: none. Depth comes from blur and from the light behind.
• Glass: backdrop-filter: blur(12px) on every card; the mobile menu uses 24px blur over 80% black.
• Hazard stripes (135deg, amber at 7%) mark redacted, under-NDA work.

Motion language

Performance. The light renders at 75% resolution (it is soft, so this is invisible), caps device pixel ratio at 1.5, and pauses when the tab is hidden. No libraries: plain WebGL 1 with a CSS fallback wash when WebGL is missing.

Degrading. Motion is on by default, but for customer sites the default follows the visitor's prefers-reduced-motion. A Motion switch in the footer lets every visitor turn it on or off, and the choice is remembered. With motion off, the light field is drawn once and held still: the page keeps its colour and depth, it simply stops moving. Nothing is hidden waiting for an animation; content is visible without JavaScript.

Imagery and illustration

• The light field is the imagery. Most Aurora pages need no photography at all.
• When photos are needed (bar interiors, treatment rooms, film stills), use dark, low-key images with one light source, crop tight, and sit them in a 24px-radius card with a 10% white border. Never place a bright daylight photo on the page.
• Icons: 1.5px line icons, white at 70–90%. Logos in white, single colour.
• Client logos: single-colour white at ~40% in a strip between hairlines.

Signature components

• Light field + light chip. The fixed WebGL background and the footer chip ("↻ Aurora") that cycles shows.
• Spectrum headline. Bold white headline with one gradient phrase.
• Badge. Small glass pill above the hero headline with a violet-tinted border: "Independent since 2014 • Melbourne".
• Pill pair. White primary pill and glass secondary pill, side by side; quiet underlined text links below.
• Glass card with "Output:" label. Service card: tiny uppercase label, title, one line, dot list.
• Proof tile. Large card with a diagonal white wash, a violet glow in the corner, a kicker pill, a numbered list of steps and a link.
• Case file. Mono ID, outline status pill, title, summary, dot list and stack chips. The redacted variant adds hazard stripes, a white redaction bar and "Classified · NDA".
• Method. Four numbered circles on a spectrum line, for real sequences only.
• Disclosure. Glass accordion with question, sub-line and a chevron that flips on a spring.
• Halo. A soft spectrum glow under the closing CTA panel so the page ends lit.

Do and don't

Do

• Keep the page black and the content in one centred column.
• Use the spectrum once per headline, and on hairlines and featured borders.
• Put every block of body copy on glass or the hero vignette.
• Pick the light show that matches the business (Aurora for calm, Iridescence for warmth and texture, Beams for tech and drama, Blinds for bold and graphic) and limit the cycle with data-shows if some don't suit.

Don’t

• Add a light mode to the website, or a coloured page background.
• Use coloured buttons. Primary is always a white pill.
• Add drop shadows, gradients on cards, or a second accent colour.
• Run two light fields on one page, or put the light inside cards.
• Re-tune the spectrum so its middle stop is pale: the light field needs a saturated middle.

Accessibility

• Text contrast: body and captions ≥ 4.5:1 against whatever is behind them, including the light. Don't go below --faint for any text.
• Visible focus: 2px --lilac outline, 3px offset, on every interactive element; a skip link is the first focusable element.
• The light field is aria-hidden and pointer-events: none; it never carries information.
• Motion switch with role="switch"; reduced-motion respected by default; no flashing (no show changes faster than 0.45s, no strobe).
• Disclosures use real buttons with aria-expanded; the mobile menu uses aria-expanded, closes on Escape and is inert when closed.
• Tested to 360px wide with no horizontal scroll.

How to make it yours