# Qubera Design System

**Earnings models, updated by AI.**

Qubera is an agentic AI assistant for equity research. It reads company press releases the moment they're published and automatically updates the correct input drivers across an analyst's Excel earnings models — within minutes, with the analyst in full control. This design system captures the brand so any new interface, slide, or mock looks unmistakably like Qubera.

The aesthetic is **institutional finance, modernised**: trading-floor navy, one warm gold accent, the IBM Plex superfamily, and a recurring "data → cell" visual language drawn from spreadsheets and press wires. It should read as precise, trustworthy, and operator-built — never hypey or consumer-flashy.

---

## Sources

This system was reverse-engineered from the Qubera marketing codebase (read-only, mounted locally):

- `qubera.ai/web/index.html` — the production marketing homepage; the entire design system was authored inline in its `<style>` block. Primary source of truth for tokens, motifs, and the hero "flow widget".
- `qubera.ai/web/thankyou.html` — the request-received page.
- `qubera.ai/web/assets/` — logos (`qubera-logo.png`, `qubera-mark-160.png`), favicons, and team photos (`ronti-pal.jpg`, `xavier-mandeng.jpg`). Copied into `assets/`.
- `qubera.ai/README.md` — company/product narrative and team bios.

The product is a single surface (the marketing website); there is no separate app codebase in scope. No Figma file was provided. No slide deck was provided, so no sample slides are included.

**Fonts:** IBM Plex Serif / Sans / Mono, loaded from Google Fonts (exactly as production does). No substitutions — if you later want self-hosted woff2 files, drop them in `assets/fonts/` and add `@font-face` rules to `tokens/fonts.css`.

---

## Content fundamentals

**Voice:** plain, exact, operator-to-operator. The copy sounds like it was written by someone who sat on a trading floor during earnings season — because it was. No buzzwords, no hedging, no exclamation marks.

- **Address the reader as "you"; the product is "Qubera" or "it".** "Qubera reads company press releases… updates **your** Excel workbooks." First person plural ("we") appears only for the company's stance: "We automate the typing — not how you work."
- **Short, declarative, often two-beat sentences.** The hero is literally two fragments: "Earnings out. Model updated in minutes." Headlines frequently pair a tension with a resolution: "The data is structured. The workflow isn't."
- **Control is the through-line.** Almost every section reassures the analyst they stay in command: "you review and approve every change", "human in the loop", "no workbook changes", "nothing is a black box".
- **Concrete over abstract.** Real metrics and artifacts: "$4.82B", "Diluted EPS $2.14", "Acme_Model_Q3.xlsx", "B14 Revenue ($B)", "07:00:04 ET". Specific numbers as proof, never vague claims.
- **Casing:** Sentence case for headlines and body. UPPERCASE only for mono eyebrows/labels (`AGENTIC AI FOR EARNINGS`, `HOW IT WORKS`) and data labels. Never Title Case headlines.
- **Em dashes** set off the clarifying aside — used liberally, as here. The `·` middot separates mono metadata ("Press Release · 07:00:04 ET · detecting…").
- **No emoji.** The single decorative glyph is a four-point sparkle "✦" (from the logo), used once on the "You approve every change" chip. Unicode ticks/arrows appear only as functional icons.

**Words we use:** detect, extract, map, review, update, driver, workbook, coverage, audit trail, source-linked, in full control, within minutes.
**Words we avoid:** revolutionary, seamless, magic, effortless, "set it and forget it", synergy, supercharge.

---

## Visual foundations

**Color.** A cool, institutional palette. **Navy `#1E4E78`** is the brand anchor and the only color that fills large areas (primary buttons, the dark sections' deepest tone). **Warm gold `#BF8B3A`** is the single accent, reserved for extraction highlights, eyebrows-on-dark, and small emphasis — never a button fill on light. **Spreadsheet-green `#2F8A63`** is semantic only: updated values, approved states, success, the live dot. Neutrals are faintly cool ("paper") rather than pure grey. Dark sections use deep **ink-navy `#0C2032`** with a faint gold radial glow in the top-right.

**Typography.** Three IBM Plex styles, each with a job:
- **Serif** (display & headings) — runs *light*: 400–500 weight, tracking `-0.015em`, line-height ~1.12. Headlines are never bold. The wordmark is serif 600.
- **Sans** (body & UI) — 400 body, 600 for emphasis and buttons, line-height 1.6.
- **Mono** (labels & data) — eyebrows, timestamps, metrics, cell references, code. Uppercased with `0.15em` tracking for eyebrows; tabular-nums for figures.

**Backgrounds & motifs.** No photography in the chrome. The signature texture is a **faint navy engineering grid** (34px) masked with a radial fade behind the hero. Recurring product motifs: the **gold "extraction" metric chip**, the **data → engine → cell rail** with a travelling navy pulse, **mini Excel grids** (mono, hairline cells, green flash on update), and **diff panels** with red/amber/green window dots and `+` gutters. Dark CTA/demo/security sections invert to ink-navy.

**Shape & elevation.** Cards: white, 1px `--line` hairline border, soft **cool navy-tinted shadow** (low opacity, large blur), radius **14px** (large panels 22px, the CTA block 28px). Buttons, eyebrows, and badges are **full pills** (999px). Inputs and icon tiles use 11px. Metric/diff chips use 7px.

**Borders & lines.** Hairlines everywhere (`--line #E2E8EF`), used to separate without weight — table cells, section tops, card edges, the rule before mono eyebrows.

**Motion.** Quick and eased (`cubic-bezier(.2,.7,.2,1)`, ~150–450ms). Scroll reveals rise 22px and fade in. Buttons lift `-1px` on hover; the primary darkens to `--navy-700`, arrows nudge `+3px`. The live dot pulses a 2.4s green ring. The flow widget animates a scanline, a travelling rail pulse, and a cell flash. No bounces, no infinite decorative loops on content. All motion is disabled under `prefers-reduced-motion`.

**Hover / press.** Hover = lift + slightly stronger border/shadow (cards), darker fill (primary button), background tint (ghost button). Links shift slate → navy. There is no heavy press-shrink; interactions stay subtle.

**Transparency & blur.** The sticky nav is `rgba(255,255,255,.82)` with `backdrop-filter: blur(12px)`. On dark sections, panels are `rgba(255,255,255,.04–.06)` with thin white borders; the CTA form glass uses `blur(6px)`. Focus rings are a 3px gold glow `rgba(191,139,58,.25)`.

**Imagery tone.** Team photos are slightly desaturated and lower-contrast (`saturate(.82)`), ringed in a soft circular gradient frame — cool and understated, not glossy.

**Layout.** Max width **1200px**, fluid gutter `clamp(20px,5vw,64px)`, section rhythm `clamp(72px,9vw,128px)`. Centered section headers cap at ~680px. Generous whitespace; nothing cramped.

---

## Iconography

- **Custom inline SVG line icons**, ~1.8px stroke, `none` fill, rounded joins, on a 24×24 grid — the house style. They sit in tinted tiles (paper-3, gold-tint, or navy fill) of 40–44px. The full set used across the site is collected in `ui_kits/marketing/icons.jsx` (`window.Icons`): clock, bolt, alert-triangle, grid/sheet, link, check, check-square, file, shield, shield-check, lock, search, eye, arrow, play. Reuse that set; match its weight if you add to it.
- **No icon font, no sprite, no third-party icon library** in the source. If you need an icon not present, draw it to match (1.8px stroke, rounded) or pull the closest **Lucide** glyph (same stroke conventions) — and note the substitution.
- **The mark** (`assets/qubera-mark-160.png` / `qubera-logo.png`) is a cycle-loop "Q" ring with a cursor arrow and a four-point sparkle inside — "models, updated, by a click". On dark backgrounds it is rendered white via `filter: brightness(0) invert(1)`. Pair it with the serif "Qubera" wordmark; don't recolor or restyle the mark itself.
- **Emoji:** none. The only non-icon glyph is the sparkle "✦".

---

## Index / manifest

**Root**
- `styles.css` — the single entry point consumers link; `@import`s only.
- `tokens/` — `fonts.css`, `colors.css`, `typography.css`, `spacing.css`, `effects.css`, `base.css`.
- `assets/` — `qubera-mark-160.png`, `qubera-logo.png`, `qubera-logo-360.png`, `favicon.png`, `og-image.png`, `ronti-pal.jpg`, `xavier-mandeng.jpg`.
- `SKILL.md` — portable skill front-matter for use in Claude Code.

**Components** (`components/…`, namespace `window.QuberaDesignSystem_<hash>`)
- `buttons/` — `Button` (primary · ghost · onDark · ghostDark, sizes, arrow, icon), `IconButton`.
- `forms/` — `Field`, `Input`, `Textarea`, `Select` (gold focus ring; `tone="dark"`).
- `display/` — `Eyebrow`, `Card`, `Badge`, `StepNumber`, `LiveDot`, `MetricTag`.

**Foundation cards** (Design System tab) — `guidelines/*.card.html`: Colors (navy, neutrals, gold, semantic, dark), Type (display, body, mono, scale), Spacing (scale, radius, shadows), Brand (logo, motifs, voice).

**UI kits**
- `ui_kits/marketing/` — interactive recreation of the full marketing homepage. Entry `index.html`. See its `README.md`.

**No slides** are included (no deck was provided as source).