peji/WebAVP
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
691f643edc96920e5a6652ccd53f78aebedb711a
WebAVP/design.md
T
peji 691f643edc Initial commit — Alta Video Player (WebAVP) 
Web-based surveillance video player for Alta/Ava Security camera exports
with multi-camera sync, timeline, digital zoom, motion analytics, and
cryptographic integrity verification.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-04 12:50:24 +00:00

323 lines
13 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# Design System — Alta Style
> This document defines the visual identity for all tools and interfaces built under
> the Alta brand. It covers colors, typography, component styling, and interaction
> patterns. It does NOT prescribe layouts, page structures, or application architecture —
> use whatever structure fits your application.
>
> Apply this to web apps, Electron apps, dashboards, internal tools, Chrome extensions,
> or any UI that should feel like part of the Alta product family.
>
> Colors are sourced from the Alta Video platform's global CSS variables
> (`--colorPrimary`, `--colorLink`, etc.) and computed element styles.
---
## 1. Color Palette
### 1.1 Backgrounds
| Token | Value | When to use |
|----------------------|------------------------------|------------------------------------------------|
| `--bg-app` | `#121826` | Page/body background — deep navy |
| `--bg-panel` | `#121826` | Headers, nav bars, top-level panels |
| `--bg-surface` | `#181F32` | Cards, containers, secondary sections |
| `--bg-surface-hover` | `rgba(0, 110, 215, 0.12)` | Hovered rows, list items, interactive elements |
| `--bg-surface-active`| `rgba(0, 110, 215, 0.20)` | Selected/pressed/active states |
| `--bg-input` | `rgba(0, 110, 215, 0.10)` | Text inputs, search bars, selects, dropdowns |
| `--bg-button` | `rgba(0, 110, 215, 0.20)` | Default button background |
| `--bg-button-hover` | `rgba(0, 110, 215, 0.32)` | Hovered button background |
> **Key principle:** Alta layers semi-transparent tints of the brand blue
> (`rgba(0, 110, 215, *)`) on the navy background. The secondary surface color
> `#181F32` provides a subtle lift for cards and sections without transparency.
### 1.2 Borders
| Token | Value | When to use |
|--------------------|-------------|----------------------------------------------------|
| `--border-default` | `#C2C7CC` | Standard borders on components in dark context |
| `--border-light` | `#EBEEF0` | Lighter borders, dividers within cards/panels |
| `--border-subtle` | `rgba(244, 244, 246, 0.12)` | Very subtle separators on dark backgrounds |
> Alta uses light-colored borders (`#C2C7CC`, `#EBEEF0`) even on the dark theme.
> These are typically used at low opacity or on specific components. For most
> dark-on-dark dividers, use `--border-subtle`.
### 1.3 Text
| Token | Value | When to use |
|--------------------|-------------|------------------------------------------|
| `--text-primary` | `#F4F4F6` | Headings, labels, body content |
| `--text-secondary` | `#656972` | Descriptions, metadata, timestamps |
| `--text-muted` | `#8D9399` | Placeholders, disabled text, hints |
| `--text-on-accent` | `#FFFFFF` | Text on accent or status backgrounds |
> Primary text is off-white (`#F4F4F6`), not pure white. Reserve `#FFFFFF` for
> text on accent-colored or status-colored backgrounds.
### 1.4 Accent & Brand
| Token | Value | When to use |
|--------------------------|------------------------------|---------------------------------------|
| `--accent-primary` | `#006ED7` | Brand blue — links, primary actions, active states (Alta `--colorPrimary` / `--colorLink`) |
| `--accent-primary-hover` | `#0080F0` | Hovered links and primary elements |
| `--accent-primary-muted` | `rgba(0, 110, 215, 0.20)` | Tinted backgrounds using brand blue |
### 1.5 Status
| Token | Value | When to use |
|--------------------|-----------|---------------------------------------------------|
| `--status-success` | `#20C62F` | Success, connected, healthy, complete |
| `--status-error` | `#DE1111` | Error, failed, disconnected, destructive actions |
| `--status-warning` | `#EAA301` | Warning, caution, pending, needs attention |
| `--status-info` | `#8D9399` | Informational, neutral, secondary indicators |
| `--status-purple` | `#8957E5` | Special category badges, analytics |
| `--status-motion` | `#A855F7` | Activity, progress, event indicators |
### 1.6 Overlays
| Token | Value | When to use |
|-------------------|----------------------------|--------------------------------------|
| `--overlay-dark` | `rgba(18, 24, 38, 0.60)` | Dimming layer behind modals/dialogs |
| `--overlay-panel` | `rgba(18, 24, 38, 0.85)` | Floating panels, dropdown backdrops |
---
## 2. Typography
**Font stack:** `'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif`
| Role | Size | Weight | Notes |
|--------------------|-------|--------|----------------------------------|
| Page / section title | 16px | 600 | |
| Body / labels | 14px | 400 | |
| Emphasized labels | 14px | 600 | Selected items, active states |
| Compact labels | 13px | 500 | Dense UI, toolbar text |
| Captions | 12px | 400 | Metadata, timestamps, subtitles |
| Badges | 10px | 600 | Inline status/category badges |
| Micro | 11px | 600 | Tiny indicators, status labels |
**Spacing:** letter-spacing `-0.01em` on titles, `0` on body.
**Line-height:** `1.3` titles, `1.4` body.
---
## 3. Component Styles
### 3.1 Buttons
| Variant | Background | Text | Hover |
|------------|---------------------------|---------------------|--------------------------------|
| Primary | `--accent-primary` | `#FFFFFF` | `--accent-primary-hover` |
| Secondary | `--bg-button` | `--text-primary` | `--bg-button-hover` |
| Ghost/Icon | `transparent` | `--text-secondary` | `--bg-button`, text brightens |
| Danger | `--status-error` | `#FFFFFF` | lighten ~10% |
- No visible borders on buttons — Alta buttons are borderless
- Border-radius: `6px`
- Padding: `8px 16px` (text) / `8px` (icon-only)
- Heights: `32px` small, `36px` default, `40px` large
- Font: 13px, weight 500
### 3.2 Inputs
- Height: `36px`
- Background: `--bg-input`
- Border: `1px solid var(--border-subtle)`, radius `6px`
- Placeholder: `--text-muted`
- Focus: border changes to `--accent-primary`, add `var(--shadow-focus)` ring
### 3.3 Badges
- Padding: `2px 6px`, radius `4px`
- Font: 10px, weight 600, `#FFFFFF` text
- Use `--status-purple` for special/category badges
- Use `--accent-primary` for general tags
### 3.4 Status Indicators
- Dot size: `8px` circle
- Colors: `--status-success`, `--status-error`, `--status-warning`
- Always pair with a text label or icon — never color alone
- Pulsing dots: `animation: pulse 1.5s ease-in-out infinite` (opacity 1 → 0.35)
### 3.5 Cards & Containers
- Background: `--bg-surface` (`#181F32`)
- Border: `1px solid var(--border-subtle)`
- Border-radius: `8px`
- Elevated variant adds: `var(--shadow-elevated)`
### 3.6 Tables & Lists
- Header row: `--text-muted`, 11px, weight 600, uppercase, `letter-spacing: 0.05em`
- Body rows: `--text-primary`, 13–14px
- Row hover: `--bg-surface-hover`
- Selected row: `--bg-surface-active`
- Row dividers: `rgba(244, 244, 246, 0.08)`
### 3.7 Tooltips & Popovers
- Background: `--bg-surface`
- Border: `1px solid var(--border-subtle)`
- Border-radius: `8px`, padding `8px 12px`
- Shadow: `var(--shadow-elevated)`
- Text: `--text-primary`, 13px
### 3.8 Navigation Items
- Default: icon/text in `--text-secondary`
- Hover: bg `--bg-surface-hover`, text brightens to `--text-primary`
- Active: bg `--accent-primary`, text/icon `#FFFFFF`, radius `8px`
### 3.9 Modals & Dialogs
- Backdrop: `--overlay-dark`
- Panel: `--bg-surface` background, `1px solid var(--border-subtle)`, radius `12px`
- Shadow: `var(--shadow-elevated)`
- Title: 16px weight 600, body: 14px weight 400
### 3.10 Tabs
- Inactive: `--text-secondary`, transparent background
- Active: `--text-primary`, bottom border `2px solid var(--accent-primary)`
- Hover: text brightens toward `--text-primary`
### 3.11 Progress & Bar Charts
- Track: `--bg-input`
- Fill: use status colors based on meaning (green good, yellow caution, red bad)
- Height: `8px`, radius `4px`
### 3.12 Toast / Notification
- Background: `--bg-surface`
- Border-left: `3px solid` using appropriate status color
- Border-radius: `8px`
- Shadow: `var(--shadow-elevated)`
- Auto-dismiss with fade-out
---
## 4. Iconography
- **Style:** Outline, 1.5px stroke weight
- **Library:** Lucide Icons (preferred) or Heroicons Outline
- **Sizes:** `20px` navigation, `16px` inline, `14px` compact/dense UI
- **Colors:** `--text-secondary` default → `--text-primary` on hover → `#FFFFFF` on accent backgrounds
- Don't mix filled and outline styles in the same interface
---
## 5. Animation & Transitions
| What | Duration | Easing |
|---------------------|----------|----------------------------|
| Hover states | 150ms | `ease-out` |
| Panel open/close | 250ms | `cubic-bezier(.4,0,.2,1)` |
| Fade in/out | 150ms | `ease` |
| Pulse indicators | 1500ms | `ease-in-out` (infinite) |
| Content transitions | 200ms | `ease-out` |
All motion is functional. No decorative animation.
---
## 6. Theme Rules
1. **Dark-only.** No light mode.
2. **Navy, not black.** The base is `#121826`. Never use `#000000` for backgrounds.
3. **Two surface levels.** `#121826` for the page, `#181F32` for elevated cards/sections.
4. **Vivid brand blue.** The accent is `#006ED7` — a strong, saturated blue. Not muted, not pastel.
5. **Off-white text.** Use `#F4F4F6`, not `#FFFFFF`. Pure white is only for accent backgrounds.
6. **Real status colors.** Green `#20C62F`, red `#DE1111`, orange `#EAA301` — these are vivid and intentional.
7. **Pair color with meaning.** Never use color alone for status — always include a label or icon.
8. **WCAG AA contrast.** All text must meet ≥ 4.5:1 ratio against its background.
---
## 7. CSS Variables
```css
:root {
/* Backgrounds */
--bg-app: #121826;
--bg-panel: #121826;
--bg-surface: #181F32;
--bg-surface-hover: rgba(0, 110, 215, 0.12);
--bg-surface-active: rgba(0, 110, 215, 0.20);
--bg-input: rgba(0, 110, 215, 0.10);
--bg-button: rgba(0, 110, 215, 0.20);
--bg-button-hover: rgba(0, 110, 215, 0.32);
/* Borders */
--border-default: #C2C7CC;
--border-light: #EBEEF0;
--border-subtle: rgba(244, 244, 246, 0.12);
/* Text */
--text-primary: #F4F4F6;
--text-secondary: #656972;
--text-muted: #8D9399;
--text-on-accent: #FFFFFF;
/* Accent */
--accent-primary: #006ED7;
--accent-primary-hover: #0080F0;
--accent-primary-muted: rgba(0, 110, 215, 0.20);
/* Status */
--status-success: #20C62F;
--status-error: #DE1111;
--status-warning: #EAA301;
--status-info: #8D9399;
--status-purple: #8957E5;
--status-motion: #A855F7;
/* Overlays */
--overlay-dark: rgba(18, 24, 38, 0.60);
--overlay-panel: rgba(18, 24, 38, 0.85);
/* Spacing */
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
/* Radii */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
/* Shadows */
--shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.4);
--shadow-focus: 0 0 0 3px rgba(0, 110, 215, 0.25);
/* Typography */
--font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
```
---
## 8. Applying This System
When starting any new UI:
1. Set `body { background: var(--bg-app); color: var(--text-primary); font-family: var(--font-family); }`
2. Use `--bg-surface` (`#181F32`) for any card or container — not a custom gray
3. Use `--accent-primary` (`#006ED7`) for links, active states, and primary actions
4. Use `--bg-button` / `--bg-button-hover` for secondary buttons
5. Apply hover/active states using the brand blue opacity scale
6. Pick status colors from the status tokens — `#20C62F` green, `#DE1111` red, `#EAA301` orange
7. Keep transitions ≤ 250ms and functional
8. Use Lucide outline icons at 1.5px stroke weight
This system works for dashboards, forms, data tables, settings pages, tools,
admin panels, extensions, or any other interface. The layout is yours —
the colors, type, and component feel are Alta.
Reference in New Issue View Git Blame Copy Permalink