One focal object
Every hero carries a single luminous object — the particle ring — on an otherwise empty canvas. No stacked imagery, no collage, no stock photography.
Brand guidelines
One system.
Forty-plus products.
These are the rules every Xceln property follows — the parent site, each division and every endorsed product. Anything new should be buildable from this page alone.
01 — Logo
The mark and the wordmark
™White — dark surfaces™Ink — light surfacesTwo approved variants only. The header switches automatically based on the surface it sits on, so the wordmark never loses contrast. The sparkle detail on the X is part of the mark and is never removed.
Do
- Place the wordmark on solid dark backgrounds, never on busy video frames.
- Keep clear space equal to the height of the X mark on every side.
- Use the X mark alone for favicons, avatars and app icons under 32px.
- Scale the logo 20px mobile / 24px tablet / 32px desktop in site chrome, width auto.
Don't
- Do not recolor, gradient-fill or add a drop shadow to the mark.
- Do not stretch, rotate, outline or re-letter the wordmark.
- Do not place the logo over the bright core of the particle ring.
- Do not pair the mark with a second logo without a divider rule.
Endorsement. Products are named “Xceln Learn”, “Xceln Health” and so on — the parent name always leads, set in the same weight as the product word. Divisions follow the same rule.
02 — Color
Dark canvas, one violet
Every value is a semantic token in src/styles.css. Components reference the token, never a raw hex or a Tailwind palette color.
--background
oklch(0.08 0.005 280)
Page canvas. Near-black with a violet cast. Never pure #000.
--foreground
oklch(0.98 0 0)
Primary text. Full-strength only for headlines and key labels.
--muted-foreground
oklch(0.65 0.02 280)
Body copy, captions, supporting paragraphs.
--accent
oklch(0.55 0.24 300)
Violet accent. Eyebrows, hover states, single-word emphasis.
--primary
oklch(0.45 0.22 300)
Primary buttons and their glow shadow.
--border
oklch(0.25 0.01 280)
Hairlines. In practice used at white/5 to white/10 opacity.
Surfaces are built from white at low opacity — bg-white/5 for cards, border-white/10 for edges — so one background token carries the whole system. Violet is an accent, never a fill: if more than roughly a tenth of a screen is purple, it is being overused.
03 — Typography
Light weights, tight tracking
Neue Haas Grotesk for everything, JetBrains Mono for tokens and code. No second display face, no serif, no italics outside quotations.
Display
Neue Haas Grotesk, 300 weight, tracking-tight, leading-tight
Next-Level Learning
Section heading
300 weight, 2xl–5xl, max 2 lines
One standard of craft.
Eyebrow
11px, uppercase, tracking-[0.25em], accent color
01 — Ecosystem
Body
14–16px, relaxed leading, muted foreground
Independent products, one shared model stack.
Headlines never exceed two lines and never use bold. Emphasis comes from size and whitespace, not weight. Sentence case everywhere except eyebrows, which are uppercase with wide tracking and prefixed by a two-digit index.
04 — Hero & video
One object, ambient motion
Off-center composition
On desktop the object sits left, type sits right. On mobile the object centers and type drops beneath it. Never center both on the same axis.
Motion is ambient
Rotation, breathing and mouse parallax only. No cuts, no zoom, no camera moves. Motion should be noticeable after two seconds, never before.
Readability first
A radial vignette always sits between the visual and the type. If a headline needs a text shadow to be legible, the vignette is wrong, not the type.
No third-party branding
Background footage must be generated or owned. Never ship a clip carrying another product's name, watermark or UI in any frame.
Silent and looping
Video is muted, autoplaying, inline and seamlessly looping, with a static first frame as the poster so nothing flashes on load.
Prefer the coded particle ring over a video file. It scales to any viewport, stays sharp on retina displays, costs a fraction of the bytes and can never carry someone else's branding in a frame. Reach for video only when a shot genuinely cannot be rendered live.