# Data Room Analyst — Design Tokens Cheat Sheet

Extracted verbatim from `/home/lakeman/projects/data-room-analyst/index.html` and `/home/lakeman/projects/data-room-analyst/styles.css`.

Daxos visual language: black background, white text, Source Code Pro headings, Roboto Mono body, electric-blue (#3b82f6) and violet (#8b5cf6) as the only chromatic accents on a near-monochrome shell. Sharp 4-6px rounded corners, 1px borders, no shadows except on focused buttons. Compact spacing.

---

## 1. Color Palette

### CSS variables — DARK theme (default, `:root` and `:root[data-theme="dark"]`)
```
--bg:                #000     /* page background */
--bg-soft:           #0a0a0a  /* header gradient end, chat container bg, cqf-state pill */
--fg:                #fff     /* main text */
--fg-dim:            #aaa     /* labels, secondary text */
--fg-dimmer:         #777     /* hint text, placeholders, footer */
--accent:            #fff     /* primary action accent (inverts in light) */
--card-bg:           #111     /* project cards, modals input bg, model selector */
--card-border:       #333     /* default 1px border everywhere */
--card-border-hover: #666     /* card hover border */
--button-bg:         transparent
--button-border:     #555
--button-hover-bg:   #fff     /* invert on hover */
--button-hover-fg:   #000
--input-bg:          #111
--input-border:      #444
--code-bg:           #1a1a1a
--code-border:       #2a2a2a
--user-msg-border:   #fff
--claude-msg-border: #555
--scrollbar-thumb:   #333
--scrollbar-thumb-hover: #555
--addctx-bg:         #0d0d10
--addctx-border:     #2a2a30
```

### CSS variables — LIGHT theme (`:root[data-theme="light"]`)
```
--bg:                #fff
--bg-soft:           #fafafa
--fg:                #000
--fg-dim:            #444
--fg-dimmer:         #777
--accent:            #000
--card-bg:           #f5f5f5
--card-border:       #ccc
--card-border-hover: #666
--button-border:     #999
--button-hover-bg:   #000
--button-hover-fg:   #fff
--input-bg:          #f5f5f5
--input-border:      #bbb
--code-bg:           #eee
--code-border:       #ddd
--user-msg-border:   #000
--claude-msg-border: #999
--scrollbar-thumb:   #bbb
--scrollbar-thumb-hover: #888
--addctx-bg:         #f3f3f6
--addctx-border:     #d8d8e0
```

### Hard-coded brand accent colors (NOT themed — same in dark + light)
```
#3b82f6  blue-500    — primary brand accent, focus rings, "Ask all" button base, links, user-msg gradient, active-project banner glow
#2563eb  blue-600    — primary-btn hover, "Ask all" base color
#1d4ed8  blue-700    — "Ask all" hover (dark), light-theme base
#1e40af / #1e3a8a    — "Ask all" pressed/active
#8b5cf6  violet-500  — Claude message bubble accent, sparkle avatar, MNDA type-tag, aa-status bar
#6366f1  indigo-500  — Claude avatar gradient end
#10b981  emerald-500 — tier-hero (top deals), "today" date, SAFE type-tag, model-flash animation green
#06b6d4  cyan-500    — tier-solid, msg-body strong text emphasis, memo type-tag
#f59e0b  amber-500   — tier-watchlist, review-log type-tag, "Sonnet ON" toggle
#f43f5e  rose-500    — tier-pass, error text, aa-card-error
#94a3b8  slate-400   — neutral category accent
#ec4899  pink-500    — deck type-tag
#14b8a6  teal-500    — briefing type-tag
```

---

## 2. Typography

### Font families
```
Headings (h1-h6, brand, names, monospace labels):
  'Source Code Pro', ui-monospace, monospace
  Weights loaded: 400, 500, 600, 700

Body, inputs, paragraphs, chat:
  'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace
  Weights loaded: 300, 400, 500, 600
```
Loaded via single Google Fonts URL:
`https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;500;600;700&family=Roboto+Mono:wght@300;400;500;600&display=swap`

### Base sizing
```
html / body:    14px, line-height 1.55, antialiased
```

### Headings + section labels
```
.brand h1            22px / weight 700 / letter-spacing 0.08em
section h2           14px / weight 500 / uppercase / letter-spacing 0.1em / color var(--fg-dim)
.brand .subtitle     12px / color var(--fg-dim) / letter-spacing 0.02em
.modal h2            18px / Source Code Pro
all h1-h6            font-weight 600, letter-spacing 0.02em
```

### Project card text
```
.pc-name             13px / weight 600 / Source Code Pro / letter-spacing 0.04em
.pc-rating           11px / weight 600 (pill)
.pc-desc li          11px / line-height 1.4 / color var(--fg-dim)
.pc-status           10px / uppercase / letter-spacing 0.06em / color var(--fg-dimmer)
.pc-meta             10px / color var(--fg-dimmer)
.pc-date             10px / Source Code Pro / letter-spacing 0.04em / dashed top border
```

### Buttons / chips
```
.q-btn               12px / letter-spacing 0.02em
.ask-btn             13px / weight 600
.action-btn          12px
.chat-action-btn     11px
.model-picker-label  10px / uppercase / letter-spacing 0.06em
.user-chip           11px / Source Code Pro
.primary-btn         12px / Source Code Pro
.ask-all-btn         15px / weight 600 / uppercase / letter-spacing 0.08em
.cqf-state           10px / letter-spacing 0.04em
```

### Chat body
```
.msg                 13px / line-height 1.55
.msg-body p          13px
.msg-body h1/h2/h3   15 / 14 / 13 px
.msg-body code       monospace, code-bg pill
```

---

## 3. Project Card Structure

HTML order inside `.project-card` (a `<button>` styled as card):
```
.pc-header
  .pc-name           (title, Source Code Pro 13px 600, breaks long names)
  .pc-rating         (right-aligned pill, 11px 600, tier-colored OR transparent w/ border)
.pc-status           (small uppercase tag, optional)
.pc-desc ul          (2-3 bullet list, 11px, • prefix via ::before)
.pc-meta             (10px line, often holds source count / files / left)
.pc-date             (10px, top dashed border, Source Code Pro)
```

### Card box
```
background:    var(--card-bg) = #111 dark, #f5f5f5 light
border:        1px solid var(--card-border) = #333
border-radius: 6px
padding:       12px 14px
gap:           8px (column flex)
text-align:    left
font-family:   inherit (becomes Roboto Mono)
color:         var(--fg)
display:       flex column
cursor:        pointer
transition:    border-color 0.15s, transform 0.15s, background 0.15s
```

### Hover state
```
border-color:  var(--card-border-hover) = #666
transform:     translateY(-2px)
```

### Active (selected) card
Two overlapping selectors fire. The later one (line 1789) wins:
```
border-color: var(--active-color, #3b82f6) !important    (JS sets --active-color per tier)
border-width: 2px !important
box-shadow:   0 0 0 1px var(--active-color), 0 0 12px -2px var(--active-color)
transform:    translateY(-1px)
```
Earlier rule (line 236) also flips content to inverted (`background: var(--accent); color: var(--bg)`) but is overridden by the tier highlight.

### Rating pill (`.pc-rating`)
```
font-size:     11px / weight 600
border:        1px solid var(--card-border) (default)
border-radius: 999px (full pill)
padding:       2px 8px
background:    transparent (default)
white-space:   nowrap
```

### Rating tier color scale (set on `.pc-rating` based on numeric score)
```
.tier-hero       background #10b981 (emerald)   — 8.5+ heroes (Apyx, CFC, Askari)
.tier-solid      background #06b6d4 (cyan)      — solid invest tier
.tier-watchlist  background #f59e0b (amber)     — watchlist
.tier-pass       background #f43f5e (rose)      — pass / weak
.tier-none       transparent + dashed border + var(--fg-dimmer) — unrated
.no-rating       same as tier-none, dashed border, dim text
```
All tiers white text on color. When inside `.project-card.active`, tier badge gets a 2px `var(--bg)` box-shadow ring for contrast.

---

## 4. Projects Grid + Actions

### Grid
```
display:               grid
grid-template-columns: repeat(4, 1fr)         /* desktop */
gap:                   12px
```
Responsive:
```
@media (max-width: 1024px) → repeat(2, 1fr)
@media (max-width: 640px)  → 1fr
```

### "Ask all projects" mega-button (`.ask-all-btn`)
This is THE visual hero on the home page above the grid. Solid blue, full-width, uppercase.
```
width:          100%
display:        flex / center / center / gap 12px
padding:        16px 24px
font:           Source Code Pro 15px 600 uppercase / letter-spacing 0.08em
background:     #2563eb (dark) / #1d4ed8 (light)
color:          #fff
border:         none
border-radius:  6px
box-shadow:     0 1px 0 rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.1)
hover:          background #1d4ed8 + box-shadow 0 2px 6px rgba(37,99,235,0.35)
active:         #1e40af + translateY(1px)

.ask-all-icon:  ⚡ 20px white
.ask-all-hint:  inline 11px regular roboto-mono in rgba(255,255,255,0.75), non-uppercase, normal letter-spacing
```

### Grid actions row (below cards)
```
.projects-grid-actions {
  display: flex
  justify-content: flex-end
  gap: 8px
  margin-top: 12px
}
> button { height: 32px, padding: 7px 12px, font-size: 12px, border-radius: 6px }
```
Contains `+ New Project` (primary-btn-compact, blue outline that fills on hover) and `+ More projects` (more-toggle, dashed border, fg-dim text, becomes solid on hover).

### `+ New Project` button (`.primary-btn-compact`)
```
font:           Source Code Pro 12px
padding:        7px 12px / height 32px
background:     var(--card-bg) (#111)
color:          var(--fg)
border:         1px solid #3b82f6
border-radius:  6px
hover:          background #3b82f6 + color #fff
```

### `+ More projects` toggle (`.more-toggle`)
```
padding:       9px 14px
font:          inherit 12px / color var(--fg-dim)
border:        1px dashed var(--button-border) (#555)
border-radius: 4px
hover:         color var(--fg), border-color var(--fg-dim), border-style solid
.more-toggle.open .more-toggle-arrow { transform: rotate(180deg) }
```

---

## 5. Header Pattern

```
<header.site-header>
  <div.brand>
    <h1>DATA ROOM ANALYST</h1>
    <p.subtitle>ask claude about every project in /home/lakeman</p>
  </div>
  <div.header-actions>
    <div.model-picker-wrap>          MODEL <select.model-selector>
    <div.user-chip>                  name + ✎ edit button
    <button.theme-toggle>            ☾ / ☀
    <button.theme-toggle#logoutBtn>  🔒
  </div.header-actions>
</header>
```

### Header container (`.site-header`)
```
display:       flex / align-items flex-start / justify-content space-between
gap:           16px
padding:       28px 0 20px
border-bottom: 1px solid var(--card-border)
margin-bottom: 24px
background:    linear-gradient(90deg, var(--bg) 0%, var(--bg-soft) 100%)
```

### `.brand h1` — the wordmark
```
font-size:      22px
letter-spacing: 0.08em
font-weight:    700
font-family:    Source Code Pro (inherited from h1 rule)
text content:   UPPERCASE in HTML (not CSS) — "DATA ROOM ANALYST"
```

### Model selector (`.model-selector`)
```
font:          Roboto Mono 12px
padding:       6px 10px
background:    var(--card-bg)
border:        1px solid var(--card-border) / border-radius 6px
min-width:     180px
hover:         border-color var(--fg)
focus:         border-color #3b82f6 (no outline)

label sibling (.model-picker-label):
  10px / uppercase / letter-spacing 0.06em / color var(--fg-dim)
```
Options use ` · ` middot separators: `Haiku 4.5 · fastest`, `Opus 4.8 · most capable · default`.

### Theme toggle + lock button (`.theme-toggle`)
```
width / height: 38px square
border-radius:  4px
border:         1px solid var(--button-border)
background:     transparent
font-size:      16px (emoji icon)
display:        grid place-items center
hover:          invert — background var(--button-hover-bg), color var(--button-hover-fg), border-color var(--button-hover-bg)
```
Icons: ☾ (moon, dark mode active), ☀ (sun, light mode active), 🔒 lock.

### User chip (`.user-chip`)
```
display:       inline-flex / gap 4px
padding:       5px 10px
background:    var(--card-bg)
border:        1px solid var(--card-border) / border-radius 6px
font:          Source Code Pro 11px
.user-chip-edit: transparent button, ✎ pencil, color fg-dim → fg on hover
```

---

## 6. Accent / State Colors

### Active project glow (top of page)
```
.active-project-accent {
  position: fixed; top:0; left:0; right:0; height: 3px; z-index: 50;
  background: linear-gradient(90deg, transparent, var(--active-color, #3b82f6), transparent)
  animation: 1s accentSlide
}
```
`--active-color` set by JS based on tier (emerald, cyan, amber, rose, or blue).

### Active project sticky banner (`.active-project-banner`)
```
position:      sticky / top 0 / z-index 30
background:    var(--card-bg)
border-bottom: 1px solid var(--card-border)
border-left:   4px solid var(--active-color, #3b82f6)
padding:       6px 12px
font:          Source Code Pro 11px
gap:           10px

.apb-label:  uppercase / letter-spacing 0.06em / 8px / fg-dim
.apb-name:   weight 600 / fg
.apb-rating, .apb-files: 10px / fg-dim
```

### Selected bar (`.selected-bar`)
Backdrop-blurred sticky meta strip.
```
background:       var(--card-bg)
border:           1px solid var(--card-border)
border-left:      3px solid var(--accent)
border-radius:    4px
padding:          12px 16px
position:         sticky / top 0 / z-index 10
backdrop-filter:  blur(8px)
```

### Chat message bubbles

**Claude (assistant) — left side, violet:**
```
.msg.claude {
  align-self:    flex-start
  background:    linear-gradient(135deg, rgba(139,92,246,0.10), rgba(99,102,241,0.05))
  border-left:   3px solid #8b5cf6
  padding:       12px 16px 12px 38px
  border-radius: 12px
  max-width:     88%
}
.msg.claude::before {   /* ✨ sparkle avatar */
  content: "✨"
  position: absolute / left 10px / top 10px
  width / height: 22px / border-radius 50%
  background: linear-gradient(135deg, #8b5cf6, #6366f1)
  color: #fff / font-size 12px
  box-shadow: 0 0 0 1px rgba(139,92,246,0.35)
}
```

**User (Mark) — right side, blue:**
```
.msg.user {
  align-self:    flex-end / margin-left auto
  background:    linear-gradient(135deg, rgba(59,130,246,0.18), rgba(99,102,241,0.10))
  border-left:   3px solid #3b82f6
  text-align:    right
  padding-right: 38px
}
.msg.user::before {  /* "M" avatar */
  content: "M"
  position: absolute / right 10px / top 10px
  width / height: 22px / border-radius 50%
  background: linear-gradient(135deg, #3b82f6, #2563eb)
  color: #fff / Source Code Pro 11px weight 700
}
```

**Streaming cursor:** `▊` violet (#8b5cf6) after Claude `.msg-body`, blinks via `cursorBlink` keyframe.

### Chat container (`.chat`)
```
max-height:    60vh (50vh on mobile)
border:        1px solid var(--card-border)
border-radius: 6px
padding:       16px (12px mobile)
background:    var(--bg-soft) = #0a0a0a
display:       flex column / gap 14px
empty state:   "No messages yet. Pick a project and ask a question." 12px italic fg-dimmer
```

### Ask button (`.ask-btn`)
Inverted accent — fills with `var(--accent)` (white in dark, black in light), inverted text.
```
background:    var(--accent)
color:         var(--bg)
border:        1px solid var(--accent)
font:          inherit 13px weight 600
padding:       10px 20px
border-radius: 4px
hover:         opacity 0.85
```

### Quick question buttons (`.q-btn`)
Categorized chips with 3px left border accent.
```
padding:       8px 14px / font 12px / border-radius 4px
border:        1px solid var(--button-border)
background:    transparent / color var(--fg)
hover:         inverted (white bg / black text)

.q-btn.cat-neutral     border-left 3px solid #94a3b8 (slate)
.q-btn.cat-research    border-left 3px solid #3b82f6 (blue)
.q-btn.cat-financial   border-left 3px solid #10b981 (emerald)
.q-btn.cat-governance  border-left 3px solid #f59e0b (amber)

Hover tints background to 10% of category color, NOT inverted, keeps fg text.
.q-btn.asking          pulsing blue box-shadow ring (1.2s loop)
```

### Modals
```
.modal-overlay { fixed inset 0 / background rgba(0,0,0,0.65) / backdrop-filter blur(4px) }
.modal-content {
  background:    var(--bg)
  border:        1px solid var(--card-border)
  border-radius: 12px
  padding:       28px
  max-width:     520px (narrow: 380px, wide: 900px)
  max-height:    85vh / overflow-y auto
}
.modal-close { absolute top 8px right 12px, ✕, 22px, transparent }
```

### Primary button (`.primary-btn`) — modal CTA, blue
```
background:    #3b82f6
color:         #fff
border:        1px solid #3b82f6
font:          Source Code Pro 12px
padding:       10px 16px / border-radius 6px
hover:         #2563eb
```

### Type tags (source/file types — colored pill labels)
All same shape: `padding 2px 6px / border-radius 3px / 10px / Source Code Pro / lowercase / letter-spacing 0.04em / margin-right 4px`. Color formula: `background rgba(C, 0.15) / color #C / border-color rgba(C, 0.3)`.
```
.transcript   blue   #3b82f6
.safe         green  #10b981
.mnda         violet #8b5cf6
.review-log   amber  #f59e0b
.memo         cyan   #06b6d4
.deck         pink   #ec4899
.briefing     teal   #14b8a6
.rating-entry grey   var(--fg-dim) on card-border
.neutral      grey
```

### Misc state colors
```
.pc-date.today                #10b981 (green text)
.dd-stat-cost                  weight 600 fg (top border separator)
.history-entry-own             left-border #3b82f6 / background rgba(59,130,246,0.05)
.np-error                      #f43f5e
.model-flash green keyframe    #4caf50 mid-flash
focus rings (inputs/textareas) border-color #3b82f6
```

### Global transition + radii conventions
```
transitions:   all 0.15s ease (the single global timing)
border-radius: 4px (small buttons/inputs), 6px (cards, primaries, model selector), 12px (msgs, modals), 999px (rating pills)
borders:       always 1px solid (2px only on active card)
```

### Body shell
```
body { padding: 0 24px 32px / min-height 100vh / flex column }
main { flex 1 / display flex column / gap 28px }
@media (max-width: 640px) body { padding: 0 14px 24px }
```

### Footer (`.site-footer`)
```
margin-top:    32px
padding-top:   16px
border-top:    1px solid var(--card-border)
font-size:     11px
color:         var(--fg-dimmer)
text-align:    center
letter-spacing: 0.05em
content:       "Daxos Capital · internal"
```

---

## Quick reference — the 15 most load-bearing tokens

1. `--bg #000` / `--fg #fff` — black-on-white-on-black is the whole shell
2. `--card-bg #111` + `--card-border #333` — every container, card, input, modal
3. Headings = `Source Code Pro 600 letter-spacing 0.02em`; body = `Roboto Mono 14px line-height 1.55`
4. Brand h1: `Source Code Pro 22px 700 letter-spacing 0.08em`, content in ALL CAPS in HTML
5. Section h2: `14px 500 uppercase letter-spacing 0.1em color var(--fg-dim)` — quiet category labels
6. Project card: `--card-bg / 1px --card-border / 6px radius / 12px 14px padding / flex column gap 8px / hover translateY -2px`
7. Projects grid: `grid-template-columns repeat(4, 1fr) / gap 12px` → 2col @ 1024 → 1col @ 640
8. Rating pill: `border-radius 999px / 2px 8px / 11px 600 / 4 tier colors: hero #10b981, solid #06b6d4, watchlist #f59e0b, pass #f43f5e`
9. Active card: `border 2px solid var(--active-color) + box-shadow ring + glow` (color set by JS per tier)
10. "Ask all" mega button: `#2563eb solid blue / Source Code Pro 15px 600 uppercase / 16px 24px / radius 6px / full-width`
11. Accent palette is bipolar: brand-blue `#3b82f6` (user, focus, links, primary) + violet `#8b5cf6` (Claude, AI surfaces)
12. Chat bubbles: Claude = violet gradient + sparkle avatar (left, 88% max-width); User = blue gradient + "M" avatar (right). Both 12px radius, 13px text, animated fade-in
13. Buttons family: `.action-btn` (transparent outline), `.primary-btn` (solid blue), `.ask-btn` (inverted white/black), `.q-btn` (4-category left-border), all 4-6px radius / 12-13px text
14. Theme toggle: 38px square, hover inverts colors fully (white→black or black→white)
15. Global transition is universally `all 0.15s ease`; everything is monospace; spacing reads as 4 / 8 / 12 / 14 / 16 / 24 / 28 / 32 — no Tailwind weirdness, no 5/10/15 steps