NR-NEXUS
Brand System
Live reference for every brand element.
Tokens
Color palette
The one purple family. Cards are fill-only. Backgrounds alternate light / alt / dark.
Card backgrounds (purple tints only; grey is retired)
Tokens
Typography
Aptos Display for headlines, Aptos for body, Aptos Mono for technical labels.
Headlines
Token highlight
Put purple IN the headline — colour select words like tokens moving through the model. Static fill by default; .tok-flow adds a sequential processing pulse that lights the active token and sweeps left→right. Keep to 2–4 tokens per headline.
Static — stepped token tints
Turn heterogeneous infrastructure into production inference capacity.
Animated — .tok-flow processing sweep (watch the tokens light up left→right)
One layer to route, scale, observe, and govern every token.
Brand Mark
Identity Chip
Three squares in a fixed colour sequence. Small, deliberate, never random. Inline before eyebrow labels, corner tag on cards, standalone as section accents.
Inline (before eyebrow)
Performance vs vLLM
Architecture
Deployment
Corner tag (on cards)
Standalone accent
Loading indicator (pulse)
Size variants
Dark context (section-dark)
Inline
Standalone
Pulse
Divider variant (horizontal rule replacement)
Unify Section ←
→ Architecture Section
Brand Mark
Shape Animations
A tight, deliberate set — every mode says something (converge, signal, process). Arbitrary geometric shuffles were removed.
Nexus — converge to center, glow, release
Governor · Orchestrator · Worker
Dark · 14px
Row — sequential pulse
Scale pulse 1→2→3
Diagonal — signal pulse
Scale+glow along line
Slide — sequential nudge
Nudge left 1→2→3, settle
Orbit — revolve around centre
Three squares revolve, 120° apart
Row — dark + larger
10px on dark
Diagonal — dark
10px on dark
Components
Buttons & Badges
One primary CTA per visible band. Outline for secondary. Purple scarcity = weight. 6px radius, never pill.
Dark Sections
Atmospheric gradient + dot-grid texture
Dark sections use a 3-layer atmospheric gradient with a subtle 36px dot-grid overlay. The Spark mark appears as a large background accent.
card on dark
Predictable performance
SLO-backed latency and throughput, enforced before and during production.
Brand Marks
Spark & Beam
The Spark is the X/dash mark. The Beam is the diagonal stripe texture. Never use both in the same viewport.
Spark on dark
Beam on light (NR-NEXUS bar)
Usage
Decorative Proposals
New ways to deploy the IdentityChip beyond the current allowed list. Review before adopting.
A. Loading / activity indicator
A row-pulse IdentityChip next to a "processing" label. Sequential scale pulse (1→2→3) signals live activity.
B. Section divider
A centered IdentityChip row replaces a plain rule between two sections — three brand squares, not an anonymous line.
Pricing
FAQ
C. Hover reveal on cards
Corner chip appears only on card hover (via CSS transition). Adds a discovery moment without permanent visual noise.
D. Estimator live-status dot replacement
The pulsing purple dot in the estimator chrome bar becomes a row-pulse IdentityChip, reinforcing brand while keeping the same "live" signal.
E. Background watermark (large, sparse, low-opacity)
A single large IdentityChip rendered at 2-4% opacity in a hero corner or behind a dark section. The chip reads as a subtle ghost of the brand.
F. Announcement bar companion
A row-pulse IdentityChip next to the announcement pill reinforces "this is live" with sequential scale animation.
Components
Card System
Fill-only purple tints on light surfaces (no border, no shadow). On dark: elevated background + hairline border. 8px corners, purple glow + lift on hover.
Feature card
Fill-only purple tint. No border, no shadow. 8px corners. Hover glows purple and lifts.
Highlight variant
Purple-ghost fill + purple icon block. The one accent card per row draws the eye.
Interactive card
Hover triggers purple glow + 2px lift. Arrow CTA advances. Corner chip tags the brand.
Learn moreMediaFrame — product screenshot container
Level 4 shadow (the only heavy shadow in the system). 16px radius. Chrome bar with status dot + mono label.
Section Dividers
Divider Concepts
Three animated bands. All: left→right endless marquee, max 3 rows, grey→color transition from left to right. Pick one.
Concept 1 · Steady stream
Three rows scroll left→right at a steady pace. A gradient wash fades colours from grey on the left to full purple on the right.
Concept 2 · Jitter → Smooth
Squares bounce vertically as they enter from the left (chaos), then the jitter fades — settling into smooth flow as colour emerges on the right.
Concept 3 · Pulse wave
A bright purple glow pulses through the squares in a travelling wave. Squares brighten and scale up as the wave passes, then settle.
Section Dividers
Scroll-Triggered Concepts
These animate once when they scroll into view. Use the Replay button to see the animation again.
Concept 4 · Colour wave
Three static rows of grey squares. On scroll into view, a colour wave sweeps from left to right, turning each square from grey to its IdentityChip colour.
Concept 5 · Chaos → Order
Squares start grey and chaotically rotated/scattered. On scroll, they settle into an orderly coloured grid — left to right, fast.
Concept 6 · Converge → Nexus
Phase 1: chaos → order + grey → colour travels from outer edges inward toward centre on both sides. Phase 2: steady-stream marquee converges toward the glowing purple NR‑NEXUS centre line.
Concept 8 · Chaos → Order + Stream
Concept 5's chaos → order + grey → colour settle animation combined with an endless steady-stream marquee scrolling right → left.
That's the system.
Every element here is governed by BRAND.md. Add nothing that isn't accounted for in the tokens.