Xealx design system · v2
Style guide
Futuristic, but credible. Deep blue and black give depth, brushed silver gives titles a premium finish, and neon is used sparingly so it always means something: an action, a live signal, or the path data travels.
Logo
Proposed mark: two strokes crossing at one glowing node, the point where marketing, communication and automation connect. Replace with your official logo if you have one.
Color palette
Foundation
- Void black#03050BPage background
- Deep blue#070D1CSection bands
- Panel#0C1730Cards, glass
- Raised#142246Controls
Neon accents
- Neon cyan#22E4FFPrimary accent, links, focus
- Signal blue#3B82F6Gradients, user chat
- Synapse violet#8B5CF6Secondary accent
- Vital green#34D399Success states only
Metal & text
- White#F8FAFCHeadlines, body on dark
- Silver#C8D2DFBody text
- Silver dim#8E9BB0Secondary text
- Clinical paper#F3F6FBLight trust/FAQ band
Brushed silver
Gradient #FFFFFF → #93A1B8 → #E9EEF6 for primary titles.
Neon signal
Gradient cyan → blue → violet with soft glow, one phrase per screen.
Typography
- Display XLUnbounded 600 · 34–66px · titles onlyAI-driven growth for healthcare
- Display LGUnbounded 600 · 28–48px · section titlesAI-driven growth for healthcare
- Body LHanken Grotesk 400 · 18px · introsAI-driven growth for healthcare
- BodyHanken Grotesk 400 · 16px · 1.6 line heightAI-driven growth for healthcare
- LabelJetBrains Mono · 12px · eyebrows, dataAI-driven growth for healthcare
Unbounded is a wide, geometric face that reads as engineered and futuristic without looking like a game. It is used only for titles and numbers. Hanken Grotesk keeps long reading comfortable. JetBrains Mono labels data, the way instruments label readings.
Iconography
- AI Automation for Clinics
- AI Social Media Automation
- AI Chatbots for Clinics
- AI for Clinical Care
- Full-Spectrum Digital Marketing
- AI-Powered Analytics Dashboard
- • 48 × 48 grid, 1.5px stroke, rounded caps and joins.
- • One gradient stroke from white to the service hue.
- • Small filled nodes where lines meet: everything is connected.
- • Lines redraw on hover. Static when reduced motion is on.
- • Illustrations follow the same rules at larger sizes (see How it works).
- • Imagery: neural meshes, circuit traces, holographic rings. No stock doctor photos.
Components
Motion & layout
160 ms
Hover and press feedback
320 ms
Panels, tabs, accordions
700 ms
Section reveals, line drawing
Ease-out expo
Every transition starts fast and settles softly
Reduced motion
All animation stops; the 3D brain renders one still frame
Breakpoints
640 · 768 · 1024 · 1280px, mobile first, 16px minimum gutter