Overview
The Midnight Gold design system is the shared visual language across all Anar products. It draws from GCC architectural luxury and modern command-center aesthetics: deep near-black backgrounds, heritage gold accents, and precise typography. All products are dark-theme only.
Color Tokens
Backgrounds
| Token | Value | Usage |
|---|---|---|
--bg-base | #09090B | Page background |
--bg-surface | #111113 | Cards, panels |
--bg-elevated | #18181B | Elevated elements, modals |
--bg-hover | #1F1F23 | Hover states |
--bg-overlay | rgba(0,0,0,0.6) | Modal overlays |
Borders
| Token | Value | Usage |
|---|---|---|
--border | #27272A | Default border |
--border-hover | #3F3F46 | Hover border |
--border-accent | rgba(200,162,77,0.25) | Gold accent border |
--border-glass | rgba(255,255,255,0.06) | Glass-morphism border |
Text
| Token | Value | Usage |
|---|---|---|
--text-primary | #F4F4F5 | Headings, primary content |
--text-secondary | #A1A1AA | Body text, descriptions |
--text-muted | #71717A | Labels, captions |
--text-dim | #52525B | Disabled text, placeholders |
Gold (Primary Accent)
| Token | Value | Usage |
|---|---|---|
--gold | #C8A24D | Primary buttons, active states, links |
--gold-light | #E4C76B | Hover on gold elements |
--gold-dim | #9A7B3A | Pressed/active state |
--gold-muted | rgba(200,162,77,0.10) | Gold-tinted backgrounds |
--gold-glow | 0 0 24px rgba(200,162,77,0.15) | Glow effect on accent elements |
Semantic Colors
| Token | Value | Usage |
|---|---|---|
--emerald | #34D399 | Success states |
--blue | #60A5FA | Informational, interactive |
--danger | #F87171 | Error states, destructive actions |
--warning | #FBBF24 | Warning states |
--purple | #A78BFA | Secondary accent |
Each semantic color has a -muted variant at 10% opacity for backgrounds.
Chart Palette
Eight high-contrast colors for data visualization:
| Token | Value | Color |
|---|---|---|
--chart-1 | #C8A24D | Gold |
--chart-2 | #60A5FA | Blue |
--chart-3 | #34D399 | Emerald |
--chart-4 | #F87171 | Red |
--chart-5 | #A78BFA | Purple |
--chart-6 | #FBBF24 | Amber |
--chart-7 | #F472B6 | Pink |
--chart-8 | #38BDF8 | Cyan |
Typography
Font Families
| Token | Font | Usage |
|---|---|---|
--font-display | Bricolage Grotesque | Headings, page titles |
--font-body | Instrument Sans | Body text, UI labels |
--font-arabic | IBM Plex Sans Arabic | Arabic content |
--font-mono | JetBrains Mono | Code blocks, data |
All fonts are loaded from Google Fonts. Add to your HTML head:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">Type Scale
| Token | Size | Usage |
|---|---|---|
--text-xs | 0.75rem | Badges, footnotes |
--text-sm | 0.875rem | Captions, secondary labels |
--text-base | 1rem | Body text |
--text-lg | 1.125rem | Emphasized body |
--text-xl | 1.25rem | Section subtitles |
--text-2xl | 1.5rem | Card titles |
--text-3xl | 1.875rem | Section headings |
--text-4xl | 2.25rem | Page headings |
--text-5xl | 3rem | Hero text |
Line Heights
| Token | Value | Usage |
|---|---|---|
--leading-tight | 1.15 | Headings |
--leading-snug | 1.3 | Sub-headings |
--leading-normal | 1.55 | Body text |
Border Radius
| Token | Value | Usage |
|---|---|---|
--radius-sm | 6px | Buttons, inputs |
--radius-md | 8px | Cards |
--radius-lg | 12px | Large cards, panels |
--radius-xl | 16px | Modals |
--radius-2xl | 24px | Hero elements |
--radius-full | 9999px | Avatars, pills |
Shadows
| Token | Value | Usage |
|---|---|---|
--shadow-xs | 0 1px 2px rgba(0,0,0,0.4) | Subtle elevation |
--shadow-sm | 0 2px 4px rgba(0,0,0,0.3) | Buttons |
--shadow-md | 0 4px 12px rgba(0,0,0,0.25) | Cards |
--shadow-lg | 0 8px 24px rgba(0,0,0,0.3) | Dropdowns |
--shadow-xl | 0 16px 48px rgba(0,0,0,0.4) | Modals |
--shadow-gold | 0 0 24px rgba(200,162,77,0.12) | Gold-accented elements |
--shadow-gold-lg | 0 4px 32px rgba(200,162,77,0.18) | Featured gold elements |
Motion
Easing Functions
| Token | Value | Usage |
|---|---|---|
--ease-out | cubic-bezier(0.16, 1, 0.3, 1) | Default exit/reveal |
--ease-in-out | cubic-bezier(0.65, 0, 0.35, 1) | Bidirectional transitions |
--ease-spring | cubic-bezier(0.34, 1.56, 0.64, 1) | Interactive elements (bounce) |
Durations
| Token | Value | Usage |
|---|---|---|
--duration-fast | 120ms | Hover states, color changes |
--duration-base | 200ms | Default transitions |
--duration-slow | 350ms | Scale/opacity transitions |
--duration-enter | 500ms | Page entrance animations |
Animation Utilities
Apply staggered reveal animations to lists and grids:
<div class="animate-fade-up stagger-1">First item</div>
<div class="animate-fade-up stagger-2">Second item</div>
<div class="animate-fade-up stagger-3">Third item</div>Each stagger step adds 80ms delay. The card-hover utility adds lift and shadow on hover:
<div class="card-hover bg-surface border border-border rounded-lg p-6">
Hoverable card content
</div>Hydration Safety
Use CSS transitions instead of framer-motion whileHover/whileTap for hover effects. Framer Motion hover props cause React hydration mismatches in server-rendered pages.
Background Effects
Noise Texture
Add the noise class to your root element for the subtle film-grain overlay:
<body class="noise bg-base text-primary">Gold Spotlight
The --bg-spotlight token creates a cursor-following radial gold glow. Set --mouse-x and --mouse-y CSS custom properties from JavaScript:
document.addEventListener("mousemove", (e) => {
document.documentElement.style.setProperty("--mouse-x", `${e.clientX}px`);
document.documentElement.style.setProperty("--mouse-y", `${e.clientY}px`);
});Gold Border Gradient
Use the border-gradient-gold utility for a subtle gold gradient border:
<div class="border-gradient-gold bg-surface rounded-lg p-6">
Featured content
</div>Tailwind Preset
Import the shared Tailwind preset in your product's tailwind.config.js:
const anarPreset = require("@anar/shared-design/tailwind-preset");
module.exports = {
presets: [anarPreset],
content: ["./src/**/*.{ts,tsx}"],
};This adds all color tokens, font families, border radii, shadows, and animations to your Tailwind classes.
CSS Tokens
Import the CSS tokens file in your global stylesheet:
@import "@anar/shared-design/tokens.css";The token files are located at:
- CSS variables:
shared/design/tokens.css - Tailwind preset:
shared/design/tailwind-preset.js
Z-Index Scale
| Token | Value | Usage |
|---|---|---|
--z-base | 0 | Default stacking |
--z-dropdown | 100 | Dropdown menus |
--z-sticky | 200 | Sticky headers |
--z-modal | 300 | Modal dialogs |
--z-toast | 400 | Toast notifications |
--z-tooltip | 500 | Tooltips |