mirror of
https://github.com/nexu-io/open-design.git
synced 2026-10-27 09:51:12 +01:00
feat(design-systems): add hud, loom, trading-terminal with locale coverage (#1069)
* feat(design-systems): add hud, loom, trading-terminal with locale coverage - Add hud, loom, trading-terminal to DE_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK - Add loom and trading-terminal to FR_DESIGN_SYSTEM_SUMMARIES (FR locale) - Add loom and trading-terminal to RU_DESIGN_SYSTEM_SUMMARIES (RU locale) - Add DESIGN.md for hud, loom, trading-terminal design systems * fix: restructure to canonical 9-section schema, fix WCAG claims, fix locale ordering * fix: match canonical 9-section schema, correct WCAG guidance * fix(trading-terminal): add missing --space-* tokens to :root block * fix: align Loom spec — font labels (Inter not monospace), light-mode FR/RU summaries --------- Co-authored-by: Ayush Mahadik <ayushmahadik@gmail.com>
This commit is contained in:
NotLeaped84
co-authored by
Ayush Mahadik
Ayush Mahadik
parent
79957890d2
commit
343c1080e9
@@ -236,6 +236,7 @@ export const FR_DESIGN_SYSTEM_SUMMARIES: Record<string, string> = {
|
||||
kraken: 'Trading crypto. UI sombre avec accent violet, dashboards riches en données.',
|
||||
lamborghini: 'Marque supercar. Surfaces noir profond, accents or, typographie uppercase dramatique.',
|
||||
'linear-app': 'Project management. Ultraminimal, précis, accent violet.',
|
||||
loom: 'Messagerie vidéo asynchrone. Primary violet, accent framboise, UI claire et lumineuse, surfaces blanches pour la communication vidéo.',
|
||||
lovable: 'Builder full-stack IA. Gradients ludiques, esthétique dev amicale.',
|
||||
mastercard: 'Réseau global de paiement. Canvas papier chaud, formes pill orbitales, chaleur éditoriale.',
|
||||
meta: 'Tech retail store. Centré photographie, surfaces clair/dark binaires, CTA Meta Blue.',
|
||||
@@ -273,6 +274,7 @@ export const FR_DESIGN_SYSTEM_SUMMARIES: Record<string, string> = {
|
||||
theverge:
|
||||
'Média tech éditorial. Accents acid mint et ultraviolet, display Manuka, story tiles façon rave flyer.',
|
||||
'together-ai': 'Infrastructure IA open-source. Technique, design proche blueprint.',
|
||||
'trading-terminal': 'Interface de trading financier. Terminal data-dense style Bloomberg, UI dark-only.',
|
||||
uber: 'Plateforme de mobilité. Noir et blanc francs, type serrée, énergie urbaine.',
|
||||
vercel: 'Déploiement frontend. Précision noir et blanc, Geist Font.',
|
||||
vodafone: 'Marque télécom globale. Typographie display uppercase monumentale, bandes Vodafone Red.',
|
||||
@@ -422,6 +424,7 @@ export const FR_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
|
||||
'glassmorphism',
|
||||
'gradient',
|
||||
'huggingface',
|
||||
'hud',
|
||||
'levels',
|
||||
'lingo',
|
||||
'luxury',
|
||||
|
||||
@@ -236,6 +236,7 @@ export const RU_DESIGN_SYSTEM_SUMMARIES: Record<string, string> = {
|
||||
kraken: 'Криптотрейдинг. Темный UI с фиолетовым акцентом, насыщенные данными дашборды.',
|
||||
lamborghini: 'Бренд суперкаров. Абсолютно черные поверхности, золотые акценты, драматичная капительная типографика.',
|
||||
'linear-app': 'Управление проектами. Ультраминимализм, точность, фиолетовый акцент.',
|
||||
loom: 'Асинхронные видеосообщения. Фиолетовый primary, малиновый акцент, светлый UI с белыми поверхностями для видеосвязи.',
|
||||
lovable: 'AI-конструктор full-stack-продуктов. Игривые градиенты, дружелюбная эстетика для разработчиков.',
|
||||
mastercard: 'Глобальная платежная сеть. Теплое кремовое полотно, орбитальные pill-формы, редакционное тепло.',
|
||||
meta: 'Тех-ритейл. Опора на фотографию, бинарные светлые/темные поля, CTA в Meta Blue.',
|
||||
@@ -273,6 +274,7 @@ export const RU_DESIGN_SYSTEM_SUMMARIES: Record<string, string> = {
|
||||
theverge:
|
||||
'Тех-издание. Акценты acid mint и ultraviolet, display Manuka, карточки сюжетов в духе rave-flyer.',
|
||||
'together-ai': 'Open-source AI-инфраструктура. Технический язык, дизайн в духе blueprint.',
|
||||
'trading-terminal': 'Финансовый терминал. Data-dense интерфейс в стиле Bloomberg, только темный режим.',
|
||||
uber: 'Платформа мобильности. Сильный черно-белый контраст, узкая типографика, городская энергия.',
|
||||
vercel: 'Frontend-деплой. Черно-белая точность, шрифт Geist.',
|
||||
vodafone: 'Глобальный телеком-бренд. Монументальная display-типографика в верхнем регистре, красные chapter bands Vodafone.',
|
||||
@@ -422,6 +424,7 @@ export const RU_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
|
||||
'glassmorphism',
|
||||
'gradient',
|
||||
'huggingface',
|
||||
'hud',
|
||||
'levels',
|
||||
'lingo',
|
||||
'luxury',
|
||||
|
||||
@@ -471,8 +471,10 @@ const DE_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
|
||||
'glassmorphism',
|
||||
'gradient',
|
||||
'huggingface',
|
||||
'hud',
|
||||
'levels',
|
||||
'lingo',
|
||||
'loom',
|
||||
'luxury',
|
||||
'material',
|
||||
'minimal',
|
||||
@@ -500,6 +502,7 @@ const DE_DESIGN_SYSTEM_IDS_WITH_EN_FALLBACK = [
|
||||
'storytelling',
|
||||
'totality-festival',
|
||||
'tetris',
|
||||
'trading-terminal',
|
||||
'urdu',
|
||||
'vibrant',
|
||||
'vintage',
|
||||
|
||||
@@ -0,0 +1,173 @@
|
||||
# HUD Design System
|
||||
|
||||
> Category: Themed & Unique
|
||||
> Fighter jet / helicopter head-up display. Phosphor green on near-black, all-caps data overlays, angular geometry. Zero ambiguity at speed and altitude.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
A **combat pilot's glass cockpit** — everything readable in a split second, in any light condition, under any G-load. The HUD projects critical flight data directly into the pilot's line of sight so they never have to look down. Translucency and glow replace depth and shadow. Every element is functional or it doesn't exist.
|
||||
|
||||
| Element | Hex | Role |
|
||||
|---------|-----|------|
|
||||
| Background | `#0A0A0A` | Near-black, primary canvas |
|
||||
| Surface | `#111316` | Elevated panels, card backgrounds |
|
||||
| Border | `#1E2328` | Subtle panel separation |
|
||||
| Primary | `#00FF41` | Active readouts, all data values |
|
||||
| Secondary | `#7FFF00` | Standby/dimmed values, inactive fields |
|
||||
| Tertiary | `#5A9A5A` | Grid lines, tick marks, reference arcs |
|
||||
| Warning | `#FFB800` | Caution, system advisories |
|
||||
| Alert | `#FF3B3B` | Critical warnings, fault indicators |
|
||||
|
||||
*Readings must be unambiguous at 200 knots in Instrument Meteorological Conditions.*
|
||||
|
||||
### Use Cases
|
||||
|
||||
HUD is purpose-built for:
|
||||
- **Flight simulation UIs** — combat sims, civil aviation trainers, helicopter hoist operations
|
||||
- **Telemetry dashboards** — real-time velocity, altitude, heading overlays
|
||||
- **Command-and-control displays** — drone operator screens, ISR stations
|
||||
- **Any high-speed, zero-ambiguity data overlay**
|
||||
|
||||
### Prior Art
|
||||
|
||||
F-16 Fighting Falcon HUD, Apache AH-64 attack helicopter integrated display, F-35 helmet-mounted display system, Garmin G1000 flight deck. All share: phosphor green primary, decluttered minimalism, and information hierarchy driven by operational urgency.
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Surface Palette
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Background | `#0A0A0A` | Page canvas, primary depth |
|
||||
| Surface | `#111316` | Panels, cards, elevated areas |
|
||||
| Border | `#1E2328` | Panel dividers, subtle structure |
|
||||
|
||||
### Data Palette
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Primary | `#00FF41` | Speed, altitude, heading readouts |
|
||||
| Secondary | `#7FFF00` | Standby/dimmed values, inactive fields |
|
||||
| Tertiary | `#5A9A5A` | Grid lines, tick marks, reference arcs |
|
||||
| Warning | `#FFB800` | Caution, system advisories |
|
||||
| Alert | `#FF3B3B` | Critical warnings, fault indicators |
|
||||
|
||||
All data colors on `#0A0A0A` pass WCAG AA (minimum 4.5:1).
|
||||
|
||||
### Dark Mode
|
||||
|
||||
Dark mode is the native and only mode. A HUD is projected in low-light or high-glare cockpit conditions; there is no light mode by design.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-bg: #0A0A0A;
|
||||
--color-surface: #111316;
|
||||
--color-border: #1E2328;
|
||||
--data-primary: #00FF41;
|
||||
--data-secondary: #7FFF00;
|
||||
--data-tertiary: #5A9A5A;
|
||||
--data-warning: #FFB800;
|
||||
--data-alert: #FF3B3B;
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
| Role | Size | Weight | Line Height | Font |
|
||||
|------|------|--------|-------------|------|
|
||||
| Display | 32px | 700 | 1.0 | JetBrains Mono |
|
||||
| Heading | 12px | 700 | 1.0 | Inter, uppercase |
|
||||
| Body | 14px | 400 | 1.2 | JetBrains Mono |
|
||||
| Label | 10px | 600 | 1.0 | Inter, uppercase |
|
||||
| Micro | 8px | 700 | 1.0 | Inter, uppercase |
|
||||
|
||||
**Font labels for catalog extraction:**
|
||||
|
||||
```
|
||||
Display: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
|
||||
Body: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
|
||||
Heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Micro: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
|
||||
```
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Data Readout
|
||||
|
||||
Displays a single data value with label. Always uses `--data-primary` color.
|
||||
|
||||
```css
|
||||
.data-readout {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: var(--data-primary);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.data-readout-label {
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--data-tertiary);
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
```
|
||||
|
||||
### Status Indicator
|
||||
|
||||
Dot or bar that reflects system state. Colors map to operational states.
|
||||
|
||||
```css
|
||||
.status-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--data-primary); /* active */
|
||||
}
|
||||
.status-dot.standby { background: var(--data-secondary); }
|
||||
.status-dot.warning { background: var(--data-warning); }
|
||||
.status-dot.alert { background: var(--data-alert); }
|
||||
```
|
||||
|
||||
### Grid Lines
|
||||
|
||||
Reference marks for spatial orientation. Thin lines in `--data-tertiary`.
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
HUDs are overlay systems — they display over a visual field. The layout is absolute-positioned overlays on a transparent or dark background. Information density is high; whitespace is used to separate data clusters, not for aesthetics.
|
||||
|
||||
Key structural patterns:
|
||||
- Grid lines reference the center of the display (crosshair)
|
||||
- Data readouts cluster by update frequency (altitude updates slower than airspeed)
|
||||
- Warning states override all other information layers
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
HUD overlays use opacity and glow rather than elevation shadows. Panels are distinguished by border color and subtle surface shifts, not drop shadows. The HUD exists in a single visual plane.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
- Do not use tertiary `#5A9A5A` for body or readout text — only grid lines and reference marks
|
||||
- Do not animate elements that do not signal operational state
|
||||
- Do not provide a light mode — a HUD only exists in low-light or high-glare conditions
|
||||
- Do not use rounded corners greater than 50% (circle reticles only)
|
||||
- Do not use gradients — flat color fills only
|
||||
- Do not convey information by color alone — reinforce with position and label
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
HUD overlays are viewport-relative. On smaller viewports, data clusters compress proportionally. Critical readouts (speed, altitude, heading) remain visible at all sizes; secondary indicators hide or minimize. The layout uses a 12-column grid with absolute-positioned data panels anchored to screen edges.
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
When generating a HUD-style interface, prompt the model to:
|
||||
- Use JetBrains Mono for all data readouts; Inter (uppercase) for labels only
|
||||
- Set `--data-primary` to `#00FF41` for all active readouts
|
||||
- Apply 150ms ease-out for state transitions, 100ms linear for data value changes
|
||||
- Include a status indicator component with active/standby/warning/alert states
|
||||
- Ensure all text passes 4.5:1 contrast on `#0A0A0A`
|
||||
- Never add decorative animation or light mode variants
|
||||
@@ -0,0 +1,201 @@
|
||||
# Loom Design System
|
||||
|
||||
> Category: Themed & Unique
|
||||
> Loom async video. Purple primary, friendly surfaces, video-first layout. Clean and professional without being corporate.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
A friendly, fast video-first async communication tool. Loom's design feels like a well-made productivity app — approachable, clean, and professional without being corporate. Purple accent (#625DF5) signals creativity and video without being loud. Information density is moderate, with generous whitespace that lets content breathe.
|
||||
|
||||
- **Visual style:** clean, friendly, content-first
|
||||
- **Color stance:** bright surfaces with purple accent
|
||||
- **Design intent:** keep outputs recognizable to this style family while preserving usability and readability
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Surface Palette
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Background | `#FFFFFF` | Primary canvas |
|
||||
| Surface | `#F7F7F8` | Cards, sidebars, elevated panels |
|
||||
| Border | `#E4E4E7` | Dividers, input borders |
|
||||
|
||||
### Data Palette
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Primary | `#625DF5` | CTAs, active states, video progress |
|
||||
| Primary Hover | `#5048E5` | Button hover state |
|
||||
| Text | `#1F1F23` | All text |
|
||||
| Text Secondary | `#6B6D76` | Timestamps, metadata, captions |
|
||||
| Text Tertiary | `#9B9CA3` | Placeholders, disabled states |
|
||||
| Error | `#D64770` | Error states |
|
||||
| Recording | `#EF440C` | Active recording indicator |
|
||||
|
||||
### Light Mode
|
||||
|
||||
Default. A content-first tool used in bright office environments.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-bg: #FFFFFF;
|
||||
--color-surface: #F7F7F8;
|
||||
--color-border: #E4E4E7;
|
||||
--color-primary: #625DF5;
|
||||
--color-primary-hover: #5048E5;
|
||||
--color-text: #1F1F23;
|
||||
--color-text-secondary: #6B6D76;
|
||||
--color-text-tertiary: #9B9CA3;
|
||||
--color-error: #D64770;
|
||||
--color-recording: #EF440C;
|
||||
--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
|
||||
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
|
||||
--shadow-card: 0 1px 3px rgba(31, 31, 35, 0.08), 0 4px 12px rgba(31, 31, 35, 0.04);
|
||||
--shadow-card-hover: 0 4px 12px rgba(31, 31, 35, 0.12), 0 8px 24px rgba(31, 31, 35, 0.08);
|
||||
--shadow-overlay: 0 8px 32px rgba(31, 31, 35, 0.16), 0 2px 8px rgba(31, 31, 35, 0.08);
|
||||
--shadow-tooltip: 0 4px 12px rgba(31, 31, 35, 0.12);
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 6px;
|
||||
--radius-lg: 8px;
|
||||
--transition-base: 200ms ease-out;
|
||||
--transition-fast: 100ms ease-out;
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
| Role | Size | Weight | Line Height |
|
||||
|------|------|--------|-------------|
|
||||
| Display | 28px | 700 | 1.2 |
|
||||
| H1 | 22px | 600 | 1.3 |
|
||||
| H2 | 18px | 600 | 1.4 |
|
||||
| Body | 14px | 400 | 1.5 |
|
||||
| Body Small | 13px | 400 | 1.5 |
|
||||
| Caption | 12px | 400 | 1.4 |
|
||||
| Button | 14px | 500 | 1.2 |
|
||||
| Micro | 11px | 500 | 1.2 |
|
||||
|
||||
**Font labels for catalog extraction:**
|
||||
|
||||
```
|
||||
Display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
H1: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
H2: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Body Small: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Caption: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Button: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Micro: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
|
||||
```
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Video Thumbnail Card
|
||||
|
||||
```css
|
||||
.thumbnail-card {
|
||||
background: var(--color-bg);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-card);
|
||||
overflow: hidden;
|
||||
transition: transform var(--transition-base), box-shadow var(--transition-base);
|
||||
}
|
||||
|
||||
.thumbnail-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
|
||||
.thumbnail-card:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
```
|
||||
|
||||
### Recording Indicator
|
||||
|
||||
```css
|
||||
@keyframes recording-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
.recording-dot {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-recording);
|
||||
animation: recording-pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
```
|
||||
|
||||
### Input Field
|
||||
|
||||
```css
|
||||
.input-field {
|
||||
background: var(--color-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
line-height: 1.4;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.input-field:focus-visible {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(98, 93, 245, 0.15);
|
||||
}
|
||||
```
|
||||
|
||||
### Button Primary
|
||||
|
||||
```css
|
||||
.btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: #FFFFFF;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 10px 20px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
```
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
Video-first layout. The video thumbnail dominates; metadata and actions cluster below. Clean horizontal rhythm with consistent 16px gaps between elements. Cards use 8px radius for a friendly but professional feel.
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
Elevation is achieved through shadows only. `--shadow-card` for resting state, `--shadow-card-hover` for interactive lift, `--shadow-overlay` for modals and tooltips. No borders on cards — shadow conveys depth.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
- Do not use Tertiary `#9B9CA3` for body text — timestamps and metadata only
|
||||
- Do not use semantic colors directly as text — always pair with a sufficiently contrasting background
|
||||
- Do not mix button variants in a single CSS block — use separate selectors
|
||||
- Do not use `line-height: 1.0` on buttons — diacritics, emoji, and CJK glyphs clip; use `1.2` minimum
|
||||
- Do not use `#D64770` (Error) for small text under 18px on white — it is 4.2:1, below the 4.5:1 AA threshold for normal text (14px). Use `#D64770` only for large text (18px+) or pair with a darker background surface
|
||||
- Do not use white text on `#D64770` background for normal text — white on #D64770 is also 4.2:1 (fails AA). Use `#FDECEE` (light pink) background with dark red text instead
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
Video-first responsive layout. At narrower breakpoints, the video thumbnail stacks above metadata and actions. At ≥768px, a side-by-side layout (video left, actions right) activates. Touch targets minimum 44×44px at all breakpoints.
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
When generating a Loom-style interface, prompt the model to:
|
||||
- Use Inter for all UI text; ui-monospace for code snippets
|
||||
- Apply `--radius-lg` (8px) to cards, `--radius-md` (6px) to buttons, `--radius-sm` (4px) to inputs
|
||||
- Use 200ms ease-out for card hover transitions, 100ms for button press
|
||||
- Include a recording indicator dot with a 1.5s pulse animation
|
||||
- Primary color `#625DF5` for all CTAs and active states
|
||||
- Ensure secondary text (#6B6D76) passes 4.5:1 on white before use; tertiary text (#9B9CA3) is for timestamps/metadata only
|
||||
@@ -0,0 +1,178 @@
|
||||
# Trading Terminal Design System
|
||||
|
||||
> Category: Themed & Unique
|
||||
> Bloomberg-style financial trading terminal. Dark-only, data-dense, cyan/coral buy/sell signals. Everything readable at a glance from two meters away.
|
||||
|
||||
## 1. Visual Theme & Atmosphere
|
||||
|
||||
A professional-grade financial data terminal. Dense, information-rich layouts designed for traders who need to monitor multiple markets simultaneously. Dark surfaces reduce eye strain during long sessions. Cyan accent (#00D4AA) signals positive/buy, coral (#FF4757) signals negative/sell. Everything readable at a glance from two meters away.
|
||||
|
||||
- **Visual style:** dense, data-first, professional
|
||||
- **Color stance:** dark surfaces with high-contrast data colors
|
||||
- **Design intent:** keep outputs recognizable to this style family while preserving usability and readability
|
||||
|
||||
### Prior Art
|
||||
|
||||
Bloomberg Terminal, Refinitiv Eikon, FactSet, TradingView Pro. All share: dark-only surfaces, monospace data fonts, tabular layouts with no decorative spacing, and color-coded buy/sell signals.
|
||||
|
||||
## 2. Color Palette & Roles
|
||||
|
||||
### Surface Palette
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Background | `#0D0D0D` | Primary canvas |
|
||||
| Surface | `#141414` | Elevated panels, cards |
|
||||
| Surface Hover | `#1A1A1A` | Hover state for panels |
|
||||
| Border | `#2A2A2A` | Panel separation |
|
||||
|
||||
### Data Palette
|
||||
|
||||
| Token | Hex | Usage |
|
||||
|-------|-----|-------|
|
||||
| Primary | `#00D4AA` | Positive values, buy signals, success |
|
||||
| Gain | `#00D4AA` | Positive price movement |
|
||||
| Loss | `#FF4757` | Negative price movement |
|
||||
| Warning | `#FFB800` | Caution alerts, margin warnings |
|
||||
| Neutral | `#808086` | Unchanged, secondary data |
|
||||
| Text Primary | `#FFFFFF` | High-contrast primary text |
|
||||
| Text Secondary | `#AAAAAA` | Labels, metadata |
|
||||
| Text Tertiary | `#828282` | Timestamps, grid labels |
|
||||
|
||||
### Dark Mode
|
||||
|
||||
Default and only mode. Trading terminals operate in dim environments for focus.
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-bg: #0D0D0D;
|
||||
--color-surface: #141414;
|
||||
--color-surface-hover: #1A1A1A;
|
||||
--color-border: #2A2A2A;
|
||||
--color-primary: #00D4AA;
|
||||
--color-gain: #00D4AA;
|
||||
--color-loss: #FF4757;
|
||||
--color-warning: #FFB800;
|
||||
--color-text: #FFFFFF;
|
||||
--color-text-secondary: #AAAAAA;
|
||||
--color-text-tertiary: #828282;
|
||||
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
|
||||
--space-6: 24px; --space-8: 32px; --space-12: 48px;
|
||||
}
|
||||
```
|
||||
|
||||
## 3. Typography Rules
|
||||
|
||||
| Role | Size | Weight | Line Height | Font |
|
||||
|------|------|--------|-------------|------|
|
||||
| Display | 28px | 600 | 1.0 | JetBrains Mono |
|
||||
| Heading | 16px | 600 | 1.2 | Inter |
|
||||
| Body | 14px | 400 | 1.3 | JetBrains Mono |
|
||||
| Label | 12px | 500 | 1.0 | Inter, uppercase |
|
||||
| Micro | 10px | 400 | 1.0 | JetBrains Mono |
|
||||
|
||||
**Font labels for catalog extraction:**
|
||||
|
||||
```
|
||||
Display: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
|
||||
Heading: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Body: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
|
||||
Label: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif
|
||||
Micro: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
|
||||
Mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace
|
||||
```
|
||||
|
||||
## 4. Component Stylings
|
||||
|
||||
### Order Book Row
|
||||
|
||||
```css
|
||||
.order-book-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
padding: var(--space-1) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.order-book-size { color: var(--color-text-secondary); text-align: right; }
|
||||
.order-book-bid { color: var(--color-gain); text-align: right; }
|
||||
.order-book-ask { color: var(--color-loss); text-align: right; }
|
||||
```
|
||||
|
||||
### Price Card
|
||||
|
||||
```css
|
||||
.price-card {
|
||||
background: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
padding: var(--space-4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
.price-card-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-secondary);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
.price-card-value {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text);
|
||||
line-height: 1.0;
|
||||
}
|
||||
.price-card-change {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
}
|
||||
.price-card-change.positive { color: var(--color-gain); }
|
||||
.price-card-change.negative { color: var(--color-loss); }
|
||||
```
|
||||
|
||||
### Ticker Bar
|
||||
|
||||
Horizontal scrolling single-line ticker for market overview.
|
||||
|
||||
```css
|
||||
.ticker-bar {
|
||||
display: flex;
|
||||
gap: var(--space-6);
|
||||
overflow-x: auto;
|
||||
padding: var(--space-2) 0;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
```
|
||||
|
||||
## 5. Layout Principles
|
||||
|
||||
Grid-based dense layout. Multiple data columns visible simultaneously. Panels share borders, not gaps. No rounded corners — sharp edges communicate precision. The layout is tabular: rows of data, columns of similar data.
|
||||
|
||||
## 6. Depth & Elevation
|
||||
|
||||
Trading terminals use flat design with border-based separation — no shadows. Surface shifts (#141414 vs #0D0D0D) convey elevation. Thin borders (#2A2A2A) define panel boundaries without decorative elements.
|
||||
|
||||
## 7. Do's and Don'ts
|
||||
|
||||
- Do not use color alone to signal buy/sell — always pair with a directional icon or label
|
||||
- Do not animate data values decoratively — traders need instant, stable reads
|
||||
- Do not use rounded corners — sharp precision aesthetic only
|
||||
- Do not use light mode — trading terminals operate in dim environments
|
||||
- Do not show more than 5 price points in a column — cognitive overload reduces decision speed
|
||||
- Do not use gradients — flat fills only
|
||||
|
||||
## 8. Responsive Behavior
|
||||
|
||||
Terminal layouts target desktop-first (1280px+). On narrower viewports, columns collapse from rightmost to leftmost, prioritizing price and change data. Below 768px, single-column stack with horizontal scroll for overflow data. No breakpoints alter the dark-only constraint.
|
||||
|
||||
## 9. Agent Prompt Guide
|
||||
|
||||
When generating a trading terminal interface, prompt the model to:
|
||||
- Use JetBrains Mono for all numeric data; Inter for labels and headings
|
||||
- Always show gain/loss values in monospace with color coding (#00D4AA green, #FF4757 red)
|
||||
- No rounded corners on any element
|
||||
- Use 100ms transitions for price updates, 150ms for hover states
|
||||
- Never use light mode or bright backgrounds
|
||||
- Include a horizontal ticker bar with scrolling price updates
|
||||
- All data changes retain old value briefly before swapping to prevent flash blindness
|
||||
Reference in New Issue
Block a user