---
name: Imperium
description: AI operating systems for SMEs, Palantir-style — classical authority x modern technology
colors:
  racing-green: "#11462C"
  racing-hover: "#1B5637"
  racing-muted: "#46705C"
  mint: "#4CB782"
  mint-wash: "#D8EBDD"
  bali-jade: "#3FA085"
  deep-green: "#0A1F14"
  ink: "#15130E"
  ink-secondary: "#3A3833"
  bone: "#F4F1EA"
  paper: "#F7F6F1"
  paper-sage: "#EDF2E8"
  console-ground: "#0C1712"
  console-raised: "#111E17"
  console-card-1: "#0F1912"
  console-card-2: "#0A130E"
  console-card-3: "#07100A"
  console-card-4: "#060D08"
  ember: "#E23A28"
  ember-text: "#C22C1D"
typography:
  display:
    fontFamily: "Emilio Light, Georgia, serif"
    fontSize: "clamp(3rem, 6vw, 5.5rem)"
    fontWeight: 300
    lineHeight: 1.04
    letterSpacing: "-0.01em"
  headline:
    fontFamily: "Emilio Light, Georgia, serif"
    fontSize: "clamp(2.25rem, 4vw, 4.25rem)"
    fontWeight: 300
    lineHeight: 1.08
    letterSpacing: "-0.01em"
  title:
    fontFamily: "Emilio SemiBold, Georgia, serif"
    fontSize: "clamp(1.5rem, 2.4vw, 2rem)"
    fontWeight: 600
    lineHeight: 1.1
    letterSpacing: "normal"
  body:
    fontFamily: "Switzer, -apple-system, sans-serif"
    fontSize: "clamp(1rem, 1.15vw, 1.125rem)"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "0.005em"
  label:
    fontFamily: "Switzer Medium, -apple-system, sans-serif"
    fontSize: "0.8rem"
    fontWeight: 500
    lineHeight: 1.3
    letterSpacing: "0.22em"
rounded:
  input: "10px"
  card: "20px"
  pill: "999px"
spacing:
  "1": "8px"
  "2": "16px"
  "3": "24px"
  "4": "32px"
  "5": "40px"
  "6": "48px"
  "7": "64px"
  "8": "80px"
components:
  button-primary:
    backgroundColor: "{colors.racing-green}"
    textColor: "{colors.bone}"
    typography: "{typography.body}"
    rounded: "{rounded.pill}"
    padding: "14px 28px"
  button-primary-hover:
    backgroundColor: "{colors.racing-hover}"
    textColor: "{colors.bone}"
    rounded: "{rounded.pill}"
  input:
    backgroundColor: "{colors.bone}"
    textColor: "{colors.ink}"
    rounded: "{rounded.input}"
    padding: "12px 16px"
  tag:
    backgroundColor: "{colors.mint-wash}"
    textColor: "{colors.racing-green}"
    rounded: "{rounded.pill}"
    padding: "4px 12px"
---

# Design System: Imperium

<!-- Source of truth: this file is generated from the Imperium brand-v5 kit
     (BRAND-BOOK.md + tokens.json at https://brand.imperiumos.ai).
     Copy it to a project root as DESIGN.md so DESIGN.md-aware tools (Impeccable,
     Stitch, etc.) stay on brand. If it disagrees with BRAND-BOOK.md, the book wins:
     BRAND-BOOK -> tokens.json -> this file. Full tokens: imperium-tokens.css / tokens.json. -->

## Overview

**Creative North Star: "Classical Authority x Modern Technology"**

Imperium is an AI consultancy and software company that builds and runs AI operating
systems for SMEs — "the Palantir for SMEs". The brand lives at one intersection: old
paintings beside clean glass, a serif carved from tradition beside a precise modern sans,
heritage racing green beside a live dark console. Every surface carries a little of each,
never only one. The register is grown-up, timeless, quiet confidence — never hype, never
startup-gradient energy.

Density is generous: huge editorial type, wide whitespace, cinematic image-led sections
on marketing surfaces; dense-calm precision on consoles where numbers are the jewelry.

**Key Characteristics:**
- Greens only, anchored on one signature green
- One serif (Emilio) + one sans (Switzer), nothing else, no mono
- 20px corners on every card and panel
- Warm paper neutrals, never pure white
- Motion is choreographed and sparse: one committed move per section

## Colors

A single-hue system: greens plus a warm neutral spine plus one alert accent.

### Primary
- **Racing Green** (#11462C): THE signature. Backgrounds, CTAs, headings on light,
  marks, brand fields. When in doubt, use it. Hover state deepens to #1B5637.

### Secondary
- **Mint** (#4CB782): vivid supporting green — accents, console labels, chart peaks;
  the text-brand colour on dark consoles. Wash tint #D8EBDD for tags and soft fills.
- **Bali Jade** (#3FA085): jade accent for secondary data and tints. It is green,
  never blue.

### Tertiary
- **Ember** (#E23A28): the ONE accent. Saturated alert red for the single thing that
  needs attention — an alert, a negative number, a destructive action. As small TEXT on
  light grounds use Ember-600 (#C22C1D, 5.03:1); #E23A28 is for fills, badges with dark
  text, and display use ≥24px only.

### Neutral
- **Ink** (#15130E): the black. Body text on light (16.5:1 on Bone).
- **Ink Secondary** (#3A3833): secondary text on light.
- **Bone** (#F4F1EA): the default page ground (warm beige, never greenish). Panels and cards step lighter: Paper (#F7F6F1) and Raised (#FBF9F7).
- **Paper Sage** (#EDF2E8): an occasional tint for charts and soft fills only, never a page ground.
- **Paper** (#F7F6F1): near-white working surface.
- **Deep Green** (#0A1F14): darkest brand anchor for deep fields.
- **Console Ground** (#0C1712): dark dashboard surface; raised panels #111E17. Dark
  cards use the console-descendant gradient ramp 168deg #0F1912 → #0A130E → #07100A →
  #060D08 — near-black base, glow concentrated at the focal element, never an overall wash.

### Named Rules
**The Greens-Only Rule.** Greens, the neutral spine, and one Ember element. No warm
browns, no blue-teal, no purple, no neon, no gradients as decoration.
**The One Ember Rule.** At most one Ember element per view. Its rarity is the point.
**The No-Pure-White Rule.** #FFFFFF is never a fill. Use Paper or Bone.

## Typography

**Display Font:** Emilio (Light is primary; SemiBold is maximum emphasis)
**Body Font:** Switzer (Regular / Medium / Semibold)

**Character:** a serif carved from tradition beside a precise modern sans — the brand
intersection expressed in type. Fonts are self-hosted woff2 (kit `fonts/`), one
`@font-face` preset per weight.

### Hierarchy
- **Display** (Emilio Light 300, clamp(3rem, 6vw, 5.5rem), 1.04): hero headlines.
- **Headline** (Emilio Light 300, clamp(2.25rem, 4vw, 4.25rem), 1.08): section headings.
- **Title** (Emilio SemiBold 600, clamp(1.5rem, 2.4vw, 2rem), 1.1): card titles, emphasis.
- **Body** (Switzer Regular 400, clamp(1rem, 1.15vw, 1.125rem), 1.5): copy; 65–75ch max.
- **Label** (Switzer Medium 500, 0.8rem, 0.22em tracking, UPPERCASE): the "eyebrow" style.
- **Wordmark**: IMPERIUM in Emilio, tracked caps 0.14em — never redrawn, use kit `logos/`.

### Named Rules
**The Preset Rule.** Call the weight's own font-face preset; never synthetic
`font-weight` or faux bold.
**The Tabular Rule.** All numeric UI and documents set `font-variant-numeric: tabular-nums`.
**The No-Mono Rule.** One serif, one sans. No monospace face exists in this system.

## Layout

12-column grid, 24px gutter; content container 1440px (bleed 1720px); margins 60px
desktop / 40px tablet / 24px mobile. Breakpoints 640 / 1024 / 1440; the grid collapses
12 → 6 → 4 columns. Spacing runs an 8px scale; consecutive sections separate by 80px
on desktop, 48px under 1024px. Marketing pages are cinematic and image-led with generous
space; consoles are dense-calm with quiet chrome.

Navigation is one pattern: full-width fixed bar, 64px — quiet Switzer links left (13px,
muted ink, hover to full ink, never accent-coloured), the Emilio wordmark dead-centre,
"Log in" + one pill CTA right (Racing solid, bone text). Transparent over the hero;
Paper at 95% + backdrop blur after ~24px scroll; hides on scroll-down past ~160px,
returns on scroll-up. Never a floating pill nav, never a boxed nav container.

## Elevation & Depth

Mostly flat with tonal layering. Light theme: soft, low-alpha, warm-tinted shadows;
1px ink strokes at 10–22% opacity carry most edges. Console theme: deeper shadows and
an elevation ladder of surface steps (#0C1712 → #111E17 → #17281F) rather than glow;
no glass floods, no glow floods. Text over photography sits on glass: 8% bone fill,
24px blur, hairline bone border, R40.

## Shapes

**The R40 Rule.** Corner radius is 40px for cards, media, and panels at every size —
10px for inputs, chips, and small product buttons; pill for tags and CTAs. Nothing else
exists (sole exception: 12px app-window chrome inside software mockups). Big panels
stay at 40.

## Components

### Buttons
- **Shape:** pill (999px)
- **Primary:** Racing Green (#11462C) fill, Bone (#F4F1EA) text, 14px 28px padding
- **Hover / Focus:** fill deepens to #1B5637; every interactive element gets a visible
  `:focus-visible` ring — 2px in the surface accent (mint on dark, Racing Green on
  light), offset 3px. Never remove an outline without replacing it.
- **Secondary / Ghost:** transparent fill, Racing Green text, 1px ink hairline

### Inputs / Fields
- **Style:** Bone fill, Ink text, 10px radius, 1px ink hairline at low opacity
- **Focus:** the focus-visible ring above; **Error:** Ember, and it counts as the view's
  one Ember element

### Tags / Chips
- **Style:** pill, Mint wash (#D8EBDD) fill, Racing Green text; small labels may use
  the eyebrow style

### Cards / Containers
- **Corner Style:** 40px, always
- **Background:** Bone on light pages; console-card gradient ramp on dark
- **Internal Padding:** one padding unit (space-5, 40px) at full card size
- **Anatomy** (kit `card-anatomy.svg`): Emilio display top-left; CTA bottom-left with
  icon and text in the SAME colour (mint on dark, Racing Green on light, bare icon, no
  circle behind it); one light source, upper-left

### Icons
- **One source only:** Microsoft VS Code codicons — 16x16 filled paths,
  `fill="currentColor"` (mint on dark, Racing Green on light). Scale to 24/32 as whole
  multiples, never below 12px, never converted to strokes. 22 ready SVGs ship in kit
  `icons/`. Never hand-draw or AI-generate a UI glyph; third-party logos are not icons.

### Motion (applies to all components)
- Brand ease `cubic-bezier(0.22, 1, 0.36, 1)` is the default for everything; spring
  `cubic-bezier(0.3, 1.4, 0.5, 1)` at 150ms for playful UI lifts.
- Durations: 150ms UI feedback · 600–1200ms brand moments. Transforms and opacity only.
- Named patterns (tokens.json `motion.patterns`): hover lift `translateY(-5px)
  scale(1.03)`; entrance choreography staggers eyebrow → headline → sub → cards; number
  rolls ~1.2s with tabular-nums; gauges settle with ONE slight overshoot; ambient loops
  are background-only and never on text.
- **The One-Move Rule.** One committed move per section. Motion never delays reading.
- `prefers-reduced-motion: reduce` collapses everything to near-zero; loops stop.

## Do's and Don'ts

### Do:
- **Do** use CSS custom properties from imperium-tokens.css (or these frontmatter
  tokens); never hardcode a hex in component code.
- **Do** default the page ground to Bone (#F4F1EA) and panels to Paper (#F7F6F1) / Raised (#FBF9F7); body text is Ink (16.5:1 on Bone).
- **Do** use `data-theme="console"` for dark dashboards: Console Ground surfaces,
  Switzer only (no Emilio in console UI), Mint labels, Ember-bright (#FF4632) alerts.
- **Do** keep generated environments real-world: offices, classical facades, interiors,
  studio product light, natural light, or calm brand-solid grounds; one light source,
  upper-left.
- **Do** keep all text, numbers, and logos in code — never in generated pixels; logo
  files come verbatim from kit `logos/`.
- **Do** write UX copy short and serious: no em dashes, no emojis, no exclamation
  marks, no "delve/moreover/game-changer". The company is **Imperium** (never
  "Imperium Growth"); it serves SMEs, never "enterprise".

### Don't:
- **Don't** introduce a second radius, a second icon language, a third font, or any
  purple/blue gradient — these are the definition of off-brand.
- **Don't** use pure white #FFFFFF fills or warm browns (champagne/taupe/walnut are
  removed from the system).
- **Don't** place more than one Ember element per view, or use #E23A28 as small text
  on light grounds (use #C22C1D).
- **Don't** add sci-fi effects: laser lines, neon streaks, glowing particles, floating
  dust, aurora atmospheres — anything that reads "too AI".
- **Don't** animate layout properties, run ambient motion on text, or let a gauge
  oscillate twice.
- **Don't** regenerate, redraw, or AI-render the logo or any UI glyph; never revive the
  retired blue-teal squircle logo set.
