ai-video-admin-frontend/DESIGN.md

version, name, description, colors, typography, rounded, spacing, components

version	name	description	colors	typography	rounded	spacing	components
alpha	ai-video-admin-design	A dark developer-console admin surface for managing AI video assistants. The base canvas is deep navy (`#080b13`) with cool off-white ink (`#e9eef7`); brand voltage comes from a cyan-to-blue gradient accent and soft radial glow blooms — not pastel orbs. Inter carries all UI type at 400–700 weights. CTAs use the shadcn primary blue pill; secondary actions are dark outlined panels on layered navy surfaces. The system reads as a focused ops dashboard, not a marketing site.	primary primary-active accent-cyan accent-blue accent-blue-strong ink body body-sub muted hairline hairline-soft hairline-strong hairline-node canvas canvas-sidebar canvas-panel surface-card surface-hover surface-node on-primary on-accent-dark on-dark gradient-cyan-start gradient-blue-end gradient-text-start gradient-text-end glow-blue glow-cyan stat-cyan stat-blue stat-violet stat-emerald semantic-error semantic-success #2563eb #1d4ed8 #22d3ee #60a5fa #3b82f6 #e9eef7 #9aa6bd #7f8aa3 #5d6880 #161d2c #1b2233 #2a3550 #273249 #080b13 #0a0e17 #0d121d #0f1521 #151e30 #111827 #ffffff #04121a #ffffff #22d3ee #3b82f6 #67e8f9 #60a5fa rgba(46, 161, 255, 0.18) rgba(34, 211, 238, 0.16) #22d3ee #60a5fa #a78bfa #34d399 #f87171 #34d399	display-xl display-lg title-md title-sm body-md body-strong body-sm caption caption-semibold button nav-link brand-label fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 36px 700 1.1 -0.72px fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 32px 700 1.15 -0.64px fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 20px 600 1.35 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 18px 600 1.4 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 15px 400 1.73 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 15px 600 1.73 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 14px 400 1.5 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 12px 400 1.4 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 12px 600 1.4 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 14px 500 1.0 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 14px 400 1.4 0 fontFamily fontSize fontWeight lineHeight letterSpacing 'Inter', sans-serif 14px 700 1.4 0	none sm md lg xl xxl xxxl pill full 0px 6px 8px 10px 12px 16px 24px 9999px 9999px	xxs xs sm base md lg xl xxl section 4px 8px 12px 16px 20px 24px 32px 48px 64px	app-shell sidebar topbar button-primary button-outline button-accent-cyan nav-item nav-item-active hero-band stat-card feature-card text-input badge-pill brand-icon avatar backgroundColor textColor typography {colors.canvas} {colors.ink} {typography.body-md} backgroundColor textColor borderColor width width-collapsed {colors.canvas-sidebar} {colors.body} {colors.hairline} 252px 76px backgroundColor textColor borderColor height {colors.canvas} {colors.ink} {colors.hairline} 81px backgroundColor textColor typography rounded padding height {colors.primary} {colors.on-primary} {typography.button} {rounded.xl} 10px 16px 40px backgroundColor textColor typography rounded borderColor padding height {colors.surface-card} {colors.body} {typography.button} {rounded.xl} {colors.hairline-soft} 10px 16px 40px backgroundColor textColor typography rounded padding height {colors.accent-cyan} {colors.on-accent-dark} {typography.button} {rounded.xl} 10px 16px 40px backgroundColor textColor typography rounded height transparent {colors.body} {typography.nav-link} {rounded.xl} 44px backgroundColor textColor rgba(59, 130, 246, 0.15) {colors.accent-blue} backgroundColor textColor typography rounded padding {colors.canvas-panel} {colors.ink} {typography.display-xl} {rounded.xxxl} 32px backgroundColor textColor typography rounded padding {colors.surface-card} {colors.ink} {typography.body-md} {rounded.xxl} 20px backgroundColor textColor typography rounded padding {colors.surface-card} {colors.ink} {typography.title-sm} {rounded.xxl} 24px backgroundColor textColor typography rounded padding borderColor {colors.canvas-panel} {colors.on-dark} {typography.body-md} {rounded.lg} 12px 16px {colors.hairline-soft} backgroundColor textColor typography rounded padding rgba(34, 211, 238, 0.10) #67e8f9 {typography.caption-semibold} {rounded.pill} 4px 12px backgroundColor textColor rounded size linear-gradient(135deg, {colors.gradient-cyan-start}, {colors.gradient-blue-end}) {colors.on-primary} {rounded.xxl} 44px backgroundColor textColor rounded size linear-gradient(135deg, {colors.gradient-cyan-start}, {colors.gradient-blue-end}) {colors.on-primary} {rounded.full} 32px

Overview

AI 视频助手管理台 reads as a focused dark ops dashboard for configuring and monitoring AI video assistants. The base canvas is deep navy {colors.canvas} (#080b13) holding cool off-white ink {colors.ink} (#e9eef7). Brand voltage is chromatic and directional: a cyan-to-blue gradient accent ({colors.gradient-cyan-start} → {colors.gradient-blue-end}) marks logos, avatars, and primary CTAs; soft radial blue/cyan glow blooms add depth behind hero panels — not pastel atmospheric orbs.

Type runs Inter at 400–700 across all surfaces. Headings are bold (700), labels semibold (600), body at 400. There is no display serif — the voice is utilitarian and developer-console.

CTAs split into three tiers: shadcn primary blue pill ({component.button-primary}), dark outlined panel ({component.button-outline}), and cyan solid for workflow-mode emphasis ({component.button-accent-cyan}). Layered navy surfaces (#0a0e17 → #0f1521 → #0d121d) create depth without heavy shadows.

Key Characteristics:

• Deep navy canvas, cool off-white ink. Blue/cyan gradient as brand accent.
• Layered surface stack: shell → sidebar → card → panel/input.
• Inter at 400–700 — no display serif, no weight-300 editorial voice.
• Radial glow blooms (blue/cyan) behind hero and workflow panels only.
• Rounded-xl (12px) for buttons and nav; rounded-2xl/3xl for cards and heroes.
• 81px header/sidebar-brand height; 32px page padding.

Colors

Brand & Accent

• Primary ({colors.primary} — #2563eb): shadcn primary blue — default CTA pill fill. Source: oklch(0.55 0.22 255).
• Primary Active ({colors.primary-active} — #1d4ed8): Press/hover darkening on primary.
• Accent Cyan ({colors.accent-cyan} — #22d3ee): Workflow-mode CTA, status dots, glow accents. Tailwind cyan-400.
• Accent Blue ({colors.accent-blue} — #60a5fa): Active nav text, labels, stat icons. Tailwind blue-400.
• Accent Blue Strong ({colors.accent-blue-strong} — #3b82f6): Gradient end-stop, active states. Tailwind blue-500.

Surface Stack (darkest → lightest)

• Canvas ({colors.canvas} — #080b13): App shell floor, topbar background.
• Canvas Sidebar ({colors.canvas-sidebar} — #0a0e17): Sidebar panel — one step lighter than shell.
• Canvas Panel ({colors.canvas-panel} — #0d121d): Recessed inputs, toggle rows, hero base under glow.
• Surface Card ({colors.surface-card} — #0f1521): Cards, outline buttons, dropdowns.
• Surface Hover ({colors.surface-hover} — #151e30): Hover state for outline buttons and interactive panels.
• Surface Node ({colors.surface-node} — #111827): Workflow step nodes.

Hairlines

• Hairline ({colors.hairline} — #161d2c): Sidebar/topbar dividers, structural borders.
• Hairline Soft ({colors.hairline-soft} — #1b2233): Default card, input, and button borders.
• Hairline Strong ({colors.hairline-strong} — #2a3550): Hover border accent on cards and buttons.
• Hairline Node ({colors.hairline-node} — #273249): Workflow node outlines.

Text

• Ink ({colors.ink} — #e9eef7): Headings, primary labels, input text.
• Body ({colors.body} — #9aa6bd): Nav links, descriptions, secondary copy.
• Body Sub ({colors.body-sub} — #7f8aa3): Sub-navigation items.
• Muted ({colors.muted} — #5d6880): Captions, placeholders, metadata.
• On Primary ({colors.on-primary} — #ffffff): Text on blue/cyan buttons and gradient icons.
• On Accent Dark ({colors.on-accent-dark} — #04121a): Text on solid cyan CTA buttons.

Gradient & Glow (signature)

• Gradient Cyan Start ({colors.gradient-cyan-start} — #22d3ee): Brand icon/avatar gradient start.
• Gradient Blue End ({colors.gradient-blue-end} — #3b82f6): Brand icon/avatar gradient end.
• Gradient Text Start ({colors.gradient-text-start} — #67e8f9): Brand wordmark gradient start (cyan-300).
• Gradient Text End ({colors.gradient-text-end} — #60a5fa): Brand wordmark gradient end (blue-400).
• Glow Blue ({colors.glow-blue} — rgba(46,161,255,0.18)): Hero panel radial bloom.
• Glow Cyan ({colors.glow-cyan} — rgba(34,211,238,0.16)): Workflow panel radial bloom.

These appear as radial-gradient backgrounds behind hero/workflow sections and as box-shadow halos on status dots. Never as flat card fills.

Stat Accents (dashboard metrics only)

• Stat Cyan ({colors.stat-cyan} — #22d3ee): Assistant count icon plate.
• Stat Blue ({colors.stat-blue} — #60a5fa): Session count icon plate.
• Stat Violet ({colors.stat-violet} — #a78bfa): Response time icon plate.
• Stat Emerald ({colors.stat-emerald} — #34d399): Resolution rate icon plate.

Each stat uses {color}/10 opacity background with matching text color.

Semantic

• Success ({colors.semantic-success} — #34d399): Trend badges, confirmation. Tailwind emerald-400.
• Error ({colors.semantic-error} — #f87171): Validation errors. shadcn destructive light mode.

shadcn CSS Variables (globals.css)

The project also defines semantic tokens in :root / .dark via oklch. Key mappings:

Token	Light	Dark
--background	white	near-black
--foreground	near-black	near-white
--primary	oklch(0.55 0.22 255)	oklch(0.6 0.22 255)
--card	white	oklch(0.205 0 0)
--border	light gray	white 10%
--destructive	red	lighter red

Page components currently use hardcoded hex values above; shadcn tokens apply to base UI primitives (Button, Select, Card defaults).

Typography

Font Family

Inter is the primary UI font (--font-sans). Geist Sans and Geist Mono are loaded as fallbacks/utilities. No display serif.

Hierarchy

Token	Size	Weight	Line Height	Use
{typography.display-xl}	36px	700	1.1	Page hero h1
{typography.display-lg}	32px	700	1.15	Section heads
{typography.title-md}	20px	600	1.35	Card titles
{typography.title-sm}	18px	600	1.4	Sub-section heads
{typography.body-md}	15px	400	1.73	Default body
{typography.body-strong}	15px	600	1.73	Emphasized body
{typography.body-sm}	14px	400	1.5	Compact body
{typography.caption}	12px	400	1.4	Metadata
{typography.caption-semibold}	12px	600	1.4	Badges, trend pills
{typography.button}	14px	500	1.0	Button labels
{typography.nav-link}	14px	400	1.4	Sidebar nav
{typography.brand-label}	14px	700	1.4	Sidebar brand name

Principles

• Bold headings. Page titles at 700 — this is an admin console, not editorial.
• Semibold for labels. Form labels and card titles at 600.
• Tight tracking on display. -0.72px on hero h1; body stays at 0 tracking.

Layout

Spacing System

• Base unit: 4px.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.xxl} 48px · {spacing.section} 64px.
• Page padding: 32px horizontal (px-8), 28px vertical (py-7).

Grid & Container

• Max content width: 1180px.
• Stat cards: 4-up grid at desktop.
• Sidebar: 252px expanded, 76px collapsed.

Whitespace Philosophy

Compact ops-dashboard pacing. Cards sit 16–24px apart inside the main scroll area. Hero band gets generous internal padding (32px) with a radial glow occupying the top-left quadrant.

Elevation & Depth

The system uses layered navy surfaces + hairline borders. Depth comes from surface color steps, not drop shadows.

Level	Treatment	Use
Shell	{colors.canvas} (#080b13)	App background
Sidebar	{colors.canvas-sidebar} (#0a0e17)	Navigation panel
Card	{colors.surface-card} (#0f1521)	Content cards, buttons
Recessed	{colors.canvas-panel} (#0d121d)	Inputs, toggle rows
Hairline border	1px {colors.hairline-soft}	Card/input outlines
Hover border	1px {colors.hairline-strong}	Interactive hover accent
Radial glow	{colors.glow-blue} or {colors.glow-cyan}	Hero/workflow atmospheric depth
Gradient shadow	shadow-cyan-500/30	Brand icon elevation

Decorative Depth

• Radial glow blooms sit behind hero and workflow panels — blue for prompt mode, cyan for workflow mode.
• Status dots use colored glow halos: box-shadow: 0 0 0 4px rgba(...,.16), 0 0 14px rgba(...,.35).

Shapes

Border Radius Scale

Token	Value	Use
{rounded.sm}	6px	Compact elements
{rounded.lg}	10px	shadcn base (--radius: 0.625rem)
{rounded.xl}	12px	Buttons, nav items, inputs
{rounded.xxl}	16px	Stat cards, brand icon
{rounded.xxxl}	24px	Hero bands, workflow panels
{rounded.pill}	9999px	Trend badges, status pills
{rounded.full}	9999px	Avatars

Components

App Shell

app-shell — Background {colors.canvas}, text {colors.ink}. Flex row: sidebar left, main column right (topbar + scrollable content).

Sidebar

sidebar — Background {colors.canvas-sidebar}, border-right {colors.hairline}, width 252px (76px collapsed). Brand block at top with {component.brand-icon} + gradient text label. Nav items at {component.nav-item} height 44px; active state uses {component.nav-item-active}.

Top Bar

topbar — Background {colors.canvas}, border-bottom {colors.hairline}, height 81px. Right-aligned: Help button, notification bell, user avatar dropdown — all {component.button-outline} style.

Buttons

button-primary — Blue pill. Background {colors.primary}, text {colors.on-primary}, rounded {rounded.xl}, height 40px.

button-outline — Dark panel with border. Background {colors.surface-card}, text {colors.body}, border {colors.hairline-soft}. Hover: background {colors.surface-hover}, text {colors.ink}, border {colors.hairline-strong}.

button-accent-cyan — Workflow-mode CTA. Background {colors.accent-cyan}, text {colors.on-accent-dark}, rounded {rounded.xl}.

Hero & Panels

hero-band — Background {colors.canvas-panel} with {colors.glow-blue} radial gradient overlay. Rounded {rounded.xxxl}, border {colors.hairline-soft}, padding 32px. Contains brand icon, blue accent label, bold h1, body copy, and two CTAs.

stat-card — 4-up metric grid. Background {colors.surface-card}, rounded {rounded.xxl}, padding 20px. Icon plate uses stat accent colors at 10% opacity background.

Forms

text-input — Background {colors.canvas-panel}, text white, placeholder {colors.muted}, border {colors.hairline-soft}, rounded {rounded.xl}.

badge-pill — Cyan-tinted pill for workflow status. Background cyan 10%, text cyan-300, rounded {rounded.pill}.

Brand Elements

brand-icon — 44×44px rounded {rounded.xxl} with linear-gradient(135deg, cyan-400, blue-500), white icon, shadow-cyan-500/30, inset ring-white/20.

avatar — 32×32px circle with same gradient, bold initial letter.

Do's and Don'ts

Do

• Use the layered navy surface stack for depth — don't flatten everything to one background.
• Use cyan-to-blue gradient for brand marks (logo, avatars) only.
• Use {colors.accent-blue} at 15% opacity for active nav backgrounds.
• Use {rounded.xl} for interactive controls; {rounded.xxl} / {rounded.xxxl} for containers.
• Use Inter at 700 for page titles, 600 for labels, 400 for body.

Don't

• Don't introduce warm/off-white editorial palettes — this is a dark admin console.
• Don't use pastel gradient orbs — glows are blue/cyan radial blooms only.
• Don't use a display serif — Inter only.
• Don't use pill-shaped CTAs for primary actions — rounded-xl (12px) is the button geometry.
• Don't use saturated stat colors as primary CTAs — reserve {colors.primary} and {colors.accent-cyan} for actions.

Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	< 640px	Stat cards 1-up; sidebar collapsed; user name hidden
Tablet	640–1024px	Stat cards 2-up
Desktop	1024–1280px	Stat cards 4-up; full sidebar
Wide	> 1280px	Content caps at 1180px

Touch Targets

• Nav items at 44px height.
• Primary buttons at 40px height (size="lg").

Collapsing Strategy

• Sidebar collapses to 76px icon-only via toggle button.
• Stat grid: 4-up → 2-up → 1-up.

Iteration Guide

1. Focus on a single component at a time.
2. CTAs default to {rounded.xl}. Cards use {rounded.xxl} or {rounded.xxxl}.
3. Variants live as separate entries.
4. Use {token.refs} everywhere — never inline hex in new code (migrate existing hardcoded values over time).
5. Hover states: surface step up + border accent to {colors.hairline-strong}.
6. Inter 700 for display, 600 for labels, 400/500 for body and buttons.
7. Glow blooms scoped to hero/workflow panels only.

Known Gaps

• Page components use hardcoded hex values; shadcn CSS variables exist but aren't fully wired to page-level surfaces yet.
• Light mode tokens exist in :root but the app renders dark-only (no .dark class toggle).
• Animation timings (glow pulse, sidebar collapse) out of scope.
• Form validation states beyond defaults not fully documented.