TalkIDE uses a warm charcoal visual language delivered as CSS custom properties (--token) and
registered as Tailwind CSS 4 theme values via @theme. This means every token works both as
var(--bg-1) in custom CSS and as a Tailwind class (bg-bg-1, text-fg-2, etc.).
Color — Surfaces
Warm charcoal palette — NOT blue-black. Hue sits around 40–45° (warm brown).
| Token | Value | Usage |
|---|---|---|
--bg-0 | #0e0d0c | Deepest; preview frame backdrop |
--bg-1 | #15140f | Main canvas / page background |
--bg-2 | #1c1a14 | Panels, cards, message bubbles (team) |
--bg-3 | #25221a | Raised surfaces; user message bubbles |
--bg-4 | #2f2b21 | Hover state |
Color — Lines (borders / dividers)
| Token | Value | Usage |
|---|---|---|
--line-1 | rgba(255, 240, 200, 0.06) | Subtle dividers |
--line-2 | rgba(255, 240, 200, 0.10) | Default borders |
--line-3 | rgba(255, 240, 200, 0.16) | Emphasized borders; hover |
Color — Text
| Token | Value | Usage |
|---|---|---|
--fg-1 | #f5efe0 | Primary text |
--fg-2 | #c8c1ad | Secondary text |
--fg-3 | #8a836f | Muted / labels |
--fg-4 | #5c5747 | Dim / timestamps |
Color — Accents
All accents use perceptually-uniform oklch. Each accent has a -soft variant (same hue, alpha ~0.15)
for tinted backgrounds and a -line variant (alpha ~0.4) for tinted borders.
| Token | Value | Usage |
|---|---|---|
--amber | oklch(0.78 0.15 70) | Primary action; Mara / PM; brand |
--indigo | oklch(0.72 0.13 270) | Engineer agent; “building” status |
--green | oklch(0.78 0.13 150) | Live / success; QA agent |
--rose | oklch(0.72 0.15 25) | Concierge / SOS / alert |
Typography
Both fonts are loaded via Google Fonts.
Inter:wght@400;500;600;700
JetBrains Mono:wght@400;500
| Token | Family | Use |
|---|---|---|
--font-display | "Inter", system-ui, sans-serif | Headlines; semibold 600, letter-spacing -0.02em to -0.03em |
--font-ui | "Inter" | All regular UI copy; 14px / 1.5 line-height |
--font-mono | "JetBrains Mono" | Labels, timestamps, status pills, code; 11px uppercase, letter-spacing 0.06–0.08em |
Rules:
- Display text (hero headlines):
font-weight: 600,letter-spacing: -0.02em, tight line-height (~1.05) - UI copy: 14px, weight 400–500
- Mono labels: always uppercase, 11px, JetBrains Mono
- No emojis or icons inside headings — hierarchy via weight and tracking only
Radii
| Token | Value | Usage |
|---|---|---|
--r-sm | 6px | Small chips, pills |
--r-md | 10px | Buttons, inputs |
--r-lg | 14px | Cards |
--r-xl | 20px | Large containers |
Canvas Background
The main page canvas uses two large radial gradients to add warm and cool ambient depth:
background:
radial-gradient(1200px 700px at 80% -10%, rgba(255, 200, 130, 0.05), transparent 60%),
radial-gradient(900px 600px at -10% 110%, rgba(150, 130, 220, 0.05), transparent 55%),
var(--bg-1);
Shadows
| Context | Value |
|---|---|
| Card hover / preview frame elevation | 0 30px 80px rgba(0,0,0,0.4), 0 0 0 1px var(--line-2) |
| Concierge drawer (left edge) | -30px 0 60px rgba(0,0,0,0.4) |
| Live status dot glow | box-shadow: 0 0 6px <color> |
Icons
- Library: Lucide Vue Next
- ViewBox: 24×24
- Stroke:
1.5,currentColor - Fill: none
Replace the inline SVG icons from the design reference with their Lucide equivalents.
Most names align directly: Plus, Send, LifeBuoy, Sparkle, MessageSquare, Code, etc.
Animations
| Name | Definition | Used on |
|---|---|---|
fade-up | opacity 0 → 1 + translateY 8px → 0 over 0.3s ease | Incoming chat messages |
typing | Dots bounce -3px + opacity 0.4 → 1, 1.2s ease-in-out infinite, staggered 0 / 150 / 300ms | ”Mara is thinking…” indicator |
pulse-ring | Soft glow box-shadow on live status dots | Status dot when agent is live |
Hover transitions: 0.12–0.15s ease for border, background, and color changes on cards and icon buttons.
Shared Components
All shared components are Vue SFCs located in src/components/ (or equivalent shared path).
| Component | Description | Key props |
|---|---|---|
TLogo | TalkIDE wordmark / logomark | — |
TAvatar | Solid circle with member color + initial | member, size, ring |
TPill | Small pill badge with optional color tint | label, color, variant |
TStatusDot | 8px dot with optional glow for live status | status (live / working / idle) |
TTopBar | Sticky 56px header with blurred background | slot: left, slot: right |
TIconBtn | Icon-only ghost button | icon, label (a11y) |
TThemeToggle | Light/dark theme toggle button in the TopBar right slot | — |
ConciergePanel | Slide-in overlay for human engineer help | open, @close |
TAvatar
Avatar is a solid colored circle showing the member’s single uppercase initial. Font size is
0.42 × diameter. The ring prop adds a 2px outer ring matching the surrounding background
color plus a 1px inner ring in the member’s accent color — used in overlapping avatar stacks
(overlap: -8px to -10px).
ConciergePanel
Three-state slide-in panel (440px wide, full height, anchored right):
- home — engineer on shift, pricing tiers, past sessions
- request — “What’s going on?” textarea + urgency selector + cost estimate
- scheduled — confirmation with “Sam is on the way.” copy
Backdrop: rgba(8, 7, 5, 0.5) + backdrop-filter: blur(4px).
AI Team Roster
These five agents are product-defined constants. Avatar colors and roles are fixed.
| ID | Name | Role | Avatar color (oklch) | Department |
|---|---|---|---|---|
pm | Mara | Product Manager | 0.78 0.15 70 (amber) | Product |
designer | Iris | Designer | 0.75 0.13 320 (pink) | Design |
engineer | Theo | Engineer | 0.72 0.13 270 (indigo) | Engineering |
qa | Nia | QA | 0.78 0.13 150 (green) | Quality |
devops | Kai | DevOps | 0.78 0.12 200 (cyan) | Operations |
Mara is the primary conversational agent — all user input goes through her. Other agents are surfaced in the “On it” strip and activity feed as they perform sub-tasks.
Thanks for the feedback.