X-Centric Brand Kit
Authoritative color, gradient, and usage reference for the X-Centric IT Solutions brand. Compiled from a full review of x-centric.com (August 2026); the site is built on Framer and the values below were extracted from the live site's computed CSS, gradients, font files, and image assets.
Source of record: the assessor repo's X-Centric Design System directory.
This page is the site-local copy used to theme Docusaurus and any other
internal surface; if they disagree, the assessor-repo design system wins and
this page gets re-synced.
Core palette
| Name | Hex | Usage |
|---|---|---|
| Logo Violet | #4C12C5 | Logo artwork, favicon circle |
| Electric Violet (Primary) | #5C15FF | Primary UI accent: links, highlighted headline words, primary buttons, active states, metric callouts |
| Deep Violet | #24076E | Gradient start on CTAs, deep backgrounds |
| Midnight Navy | #000319 | Primary dark background (heroes, footer, alternating dark sections) |
| Deep Space | #080422 | Secondary dark background variant |
| Ink | #0F0F1A | Dark card/panel surfaces |
Violet tints and supporting purples
| Name | Hex | Usage |
|---|---|---|
| Lavender Tint | #C0B5FF | Gradient headline text endpoint |
| Periwinkle Tint | #BAAEFF | Gradient headline endpoint (variant) |
| Light Purple | #A58FFF | Accents, chips — links on dark in the docsite |
| Soft Violet | #9D84FF | Gradient partner of Electric Violet |
| Mid Purple | #9880FF | Icons, accents |
| Blue Violet | #794DFF | Glows, secondary accents |
| Iris | #7C6EF7 | Card accents |
| Indigo | #5A36E0 | Section accents |
| Royal Indigo | #4F1AD6 | Gradient divider lines |
Accent
| Name | Hex | Usage |
|---|---|---|
| Orchid | #CB6CE6 | Occasional warm-purple accent (sanctioned in-palette variety) |
Neutrals
| Name | Hex | Usage |
|---|---|---|
| White | #FFFFFF | Light section backgrounds, reversed text |
| Off White | #F7F7F8 | Body text on dark backgrounds (19.1:1 on Midnight Navy) |
| Cloud | #F8F8F8 | Light section background variant |
| Mist | #EEEFF0 | Borders, light dividers |
| Slate | #565A7A | Muted text on light |
| Gray | #6C737F | Secondary body text on light |
| Mid Gray | #797979 | Captions, metadata |
| Charcoal | #161618 / #434349 | Blog body text tones |
Docsite readability override: body text on dark uses #94a3b8 (owner
preference, 7.97:1 on Midnight Navy). It is a slate gray, not a brand token —
documented here so the exception is visible, not ad hoc. Electric Violet
itself is 2.93:1 on Midnight Navy: fine for accents and buttons (with white
text), never for body copy or small text on dark.
Complementary colors (use sparingly — one per composition)
The palette is analogous (violet through indigo). True contrast comes from complements of Electric Violet (hue ~267), in the yellow-green/gold range:
| Name | Hex | Relationship |
|---|---|---|
| Voltage Lime | #B8FF15 | Direct complement of Electric Violet |
| Citron | #C7FF4C | Softened complement, works on Midnight Navy |
| Amber Signal | #FFC94C | Split complement, warnings/highlights |
| Gold | #FFB515 | Split complement, pairs with dark navy |
| Teal Counter | #15FFB8 | Triadic-adjacent cool contrast, data viz |
Docsite status badges use Teal (live), Gold (auth), and the semantic
danger #E23B3B (down) — complement accents reserved for signal, not
decoration.
Gradients (verbatim from the live site)
| Name | CSS | Usage |
|---|---|---|
| CTA Gradient | linear-gradient(111deg, #24076E 0%, #5C16FF 100%) | Primary buttons |
| Violet Bloom | linear-gradient(145deg, #9D84FF 0%, #5C15FF 100%) | Icons, chips, decorative fills |
| Headline Shine A | linear-gradient(282deg, #C0B5FF -18%, #FFFFFF 97%) | Large display text on dark |
| Headline Shine B | linear-gradient(113deg, #FFFFFF 0%, #BAAEFF 100%) | Display text variant |
| Violet Glow | radial-gradient(circle, rgba(121,77,255,0.34) 0%, transparent 65%) | Ambient glow behind heroes |
| Divider Beam | linear-gradient(90deg, transparent 0%, #4F1AD6 50%, transparent 100%) | Hairlines on dark |
| Glass Card | linear-gradient(rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.02) 100%) | Glassmorphism card fills on dark |
Logo
| File | Use |
|---|---|
xcentric-wordmark-violet.png | Primary wordmark, light backgrounds |
xcentric-wordmark-white.png | Reversed, dark backgrounds |
xcentric-icon-light.png | Two-tone X icon, dark surfaces |
xcentric-icon-violet.png | Favicon: violet circle, white X |
Usage rules: white wordmark over dark hero sections; violet wordmark on white. The X is the hero glyph — the upper-right arm is black (two-tone) in the primary version; don't recolor the arms individually. Clear space: at least the height of the X glyph on all sides.
Typography
Fonts: Roboto (display/body), Roboto Mono (tag pills, code), Inter and DM Sans for embedded-widget UI. Hierarchy pattern: uppercase letterspaced eyebrow → two-line display headline with one violet/gradient phrase → short supporting paragraph → CTA pair.
Component patterns
- Buttons: primary = Electric Violet fill (or CTA Gradient), white text, 8px radius. Secondary = transparent with 1px border. CTAs travel in pairs.
- Cards: light = white, 1px Mist border, thin violet underline under the title. Dark = Glass Card fill, 1px rgba-white border, violet glow behind.
- Process steps: numbered squares 01–04; active step filled Electric Violet with white number.
- Section rhythm: alternating Midnight Navy and white sections; dark sections carry ambient violet glows.
- Footer: Midnight Navy, uppercase gray column headers, giant outlined gradient wordmark bleeding off the bottom.
Voice
Direct, confident, technically precise. Consultative, not salesy. Headlines pair a plain statement with a violet-highlighted payoff phrase. Proof-driven: metric callouts anchor claims. Methodology language: Align / Govern / Build / Prove (four numbered steps).
Machine-readable tokens
The assessor-repo design system ships tokens.css and design-tokens.json
(drop-in CSS custom properties). Path in the assessor repo:
X-Centric Design System/uploads/XIS_Branding_Kitr/.