chore(01-design-tokens-rams-foundation-01): commit design baseline — Rams docs, mockups, agent skills
- Root Rams design docs (DESIGN.md, IDEAS.md) and GSD install-fix notes (GSD_FIX.md, gsd-fix.sh) - Four Telemetry Rams mockup screens + telemetry_rams/DESIGN.md (canonical token frontmatter) - .agents/ project skills (design-taste-frontend) + skills-lock.json - .gitignore: node_modules/dist/env secrets/OS junk; .planning stays local-only; Zone.Identifier scrubbed (9 files deleted)
This commit is contained in:
@@ -0,0 +1,190 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head><meta charset="utf-8"/><meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/><meta content="mobile_stack" name="shell-type"/><link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet"/><link href="https://fonts.googleapis.com" rel="preconnect"/><link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/><link href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/><script src="https://cdn.tailwindcss.com"></script><script id="tailwind-config">tailwind.config={darkMode:"class",theme:{extend:{colors:{"chassis-subtle":"#CCC4B5","on-background":"#1e1b14","surface-variant":"#e9e2d5","on-primary":"#ffffff","inverse-primary":"#ffb77f","secondary":"#5f5e5e","pure-white":"#FFFFFF","surface-container":"#f5ede0","surface-container-lowest":"#ffffff","surface-container-highest":"#e9e2d5","on-tertiary-fixed":"#1f1c00","primary":"#914c00","error":"#ba1a1a","on-primary-fixed":"#2f1500","tertiary-fixed":"#f0e58a","on-secondary-fixed-variant":"#474746","surface-tint":"#914c00","on-tertiary-container":"#464000","surface":"#fff8f0","signal-orange":"#EB8008","surface-dark":"#121212","on-surface":"#1e1b14","primary-fixed":"#ffdcc3","inverse-surface":"#333028","olive-green":"#736B1E","inverse-on-surface":"#f7f0e3","on-error":"#ffffff","surface-container-low":"#faf3e6","secondary-container":"#e2dfde","error-container":"#ffdad6","surface-dim":"#e0d9cd","on-primary-container":"#522900","on-tertiary-fixed-variant":"#4e4800","background":"#fff8f0","outline-variant":"#dcc1af","tertiary":"#676013","on-secondary-container":"#636262","on-primary-fixed-variant":"#6e3900","tertiary-container":"#b7ad59","on-error-container":"#93000a","on-tertiary":"#ffffff","primary-fixed-dim":"#ffb77f","on-secondary":"#ffffff","tertiary-fixed-dim":"#d3c972","functional-red":"#ED3F1C","soft-beige":"#D9D2C6","surface-bright":"#fff8f0","secondary-fixed":"#e5e2e1","matte-black":"#1A1A1A","surface-container-high":"#efe7db","on-secondary-fixed":"#1c1b1b","on-surface-variant":"#564335","primary-container":"#eb8008","outline":"#897363","secondary-fixed-dim":"#c8c6c5"},borderRadius:{"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"},spacing:{"space-md":"1rem","space-2xl":"3rem","gutter-desktop":"1.5rem","gutter":"1rem","space-xs":"0.25rem","space-xl":"2rem","space-lg":"1.5rem","margin":"1rem","space-sm":"0.5rem","margin-desktop":"2rem"},fontFamily:{"label-sm":["Geist"],"telemetry-num":["Space Grotesk"],"display-lg-mobile":["Space Grotesk"],"label-md":["Geist"],"headline-md":["Space Grotesk"],"headline-sm":["Space Grotesk"],"label-lg":["Space Grotesk"],"headline-lg":["Space Grotesk"],"body-sm":["Geist"],"body-md":["Geist"],"headline-lg-mobile":["Space Grotesk"],"body-lg":["Geist"],"display-lg":["Space Grotesk"]},fontSize:{"label-sm":["10px",{lineHeight:"12px",letterSpacing:"0.08em",fontWeight:"700"}],"telemetry-num":["28px",{lineHeight:"32px",letterSpacing:"-0.03em",fontWeight:"700"}],"display-lg-mobile":["36px",{lineHeight:"40px",letterSpacing:"-0.03em",fontWeight:"700"}],"label-md":["12px",{lineHeight:"16px",letterSpacing:"0.04em",fontWeight:"600"}],"headline-md":["20px",{lineHeight:"26px",letterSpacing:"-0.02em",fontWeight:"600"}],"headline-sm":["16px",{lineHeight:"22px",letterSpacing:"-0.01em",fontWeight:"600"}],"label-lg":["14px",{lineHeight:"18px",letterSpacing:"0.06em",fontWeight:"700"}],"headline-lg":["32px",{lineHeight:"38px",letterSpacing:"-0.03em",fontWeight:"700"}],"body-sm":["12px",{lineHeight:"16px",letterSpacing:"0.01em",fontWeight:"400"}],"body-md":["14px",{lineHeight:"20px",letterSpacing:"0em",fontWeight:"400"}],"headline-lg-mobile":["24px",{lineHeight:"30px",letterSpacing:"-0.02em",fontWeight:"700"}],"body-lg":["16px",{lineHeight:"24px",letterSpacing:"-0.01em",fontWeight:"400"}],"display-lg":["48px",{lineHeight:"52px",letterSpacing:"-0.04em",fontWeight:"700"}]}}}}</script><style>@layer base{html,body{width:100%;margin:0;padding:0;}body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent;}.pb-safe{padding-bottom:env(safe-area-inset-bottom,0px);}.pt-safe{padding-top:env(safe-area-inset-top,0px);}}::-webkit-scrollbar{display:none;}</style><style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head><body class="bg-surface text-on-surface font-body-md text-body-md antialiased selection:bg-signal-orange selection:text-matte-black min-h-screen flex flex-col"><header class="fixed top-0 w-full z-50 pt-safe bg-surface/90 backdrop-blur-xl shadow-[0_1px_8px_rgba(0,0,0,0.04)]"><div class="h-16 px-margin flex items-center justify-between gap-space-sm"><div class="flex items-center gap-space-xs shrink-0"><button aria-label="Navigate Return" class="w-11 h-11 flex items-center justify-center text-matte-black active:bg-chassis-subtle transition-colors" onclick="history.back()" type="button"><span class="material-symbols-outlined text-[20px]">arrow_back</span></button><img alt="Braun/Rams Minimal Nav Logo" class="h-8 w-auto object-contain" src="https://lh3.googleusercontent.com/aida/AEtjO1Wc3WyaK3B8IueuO6EP2NnBH_BJl2o4Kz75ks1llzB6uL6xUtP18_j3jIP9nLehEfcC14hkqm5g5Q4yqIEMuVxSAyrWOSQUFx-5VnxI4zoORQ3mTwY6SpwuTuP2tItiSpcLnZS-f2uQ7lj-2lU1RzUvIxZwEULVNh-MByJ2ItXnd1890uYI8dMRkRaNvGOsRxvp1tUz9Ubg1eYqRKfEhngaWHtawijzCV2ggv9Ldr3iZ00PIgzGdwugcCg"/><div class="flex flex-col ml-1"><span class="font-headline-sm text-headline-sm tracking-tight font-bold text-matte-black uppercase truncate">Active Route Guidance</span><span class="font-label-sm text-label-sm uppercase tracking-widest text-on-surface-variant font-mono">SEC-STACK // EXEC</span></div></div><div class="flex items-center gap-space-xs shrink-0"><div class="w-8 h-8 rounded-full bg-primary flex items-center justify-center"><span class="material-symbols-outlined text-on-primary text-[18px]">person</span></div></div></div></header><main class="flex-1 flex flex-col relative w-full pt-16 bg-surface"><div class="flex flex-col w-full pb-safe">
|
||||
<!-- Turn-by-Turn Maneuver HUD (Matte Black Primary Chassis) -->
|
||||
<section class="w-full bg-matte-black text-soft-beige px-margin py-space-md">
|
||||
<div class="flex items-start justify-between gap-space-md">
|
||||
<!-- Turn Indicator Graphic + Instructions -->
|
||||
<div class="flex items-center gap-space-md min-w-0">
|
||||
<!-- Minimalist Machined Directional Glyphs -->
|
||||
<div class="w-14 h-14 bg-surface-dark flex items-center justify-center shrink-0">
|
||||
<svg class="w-10 h-10 text-signal-orange" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="4" viewbox="0 0 40 40">
|
||||
<path d="M10 32V18H28"></path>
|
||||
<path d="M20 10L28 18L20 26"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="flex flex-col min-w-0">
|
||||
<div class="flex items-center gap-space-xs text-signal-orange">
|
||||
<span class="font-label-sm text-label-sm uppercase tracking-widest font-mono">NEXT MANEUVER // T-01</span>
|
||||
<span class="inline-block w-1.5 h-1.5 bg-signal-orange"></span>
|
||||
</div>
|
||||
<span class="font-headline-lg-mobile text-headline-lg-mobile font-bold text-pure-white uppercase tracking-tight">250 M</span>
|
||||
<p class="font-label-md text-label-md uppercase tracking-wider text-soft-beige truncate">
|
||||
TURN RIGHT ONTO BISMARCKSTRASSE
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Lane Assignment Matrix -->
|
||||
<div class="flex flex-col items-end shrink-0 pt-1">
|
||||
<span class="font-label-sm text-label-sm text-chassis-subtle uppercase mb-1">LANES</span>
|
||||
<div class="flex gap-1 bg-surface-dark p-1">
|
||||
<span class="material-symbols-outlined text-chassis-subtle text-[18px]">straight</span>
|
||||
<span class="material-symbols-outlined text-signal-orange text-[18px]">turn_right</span>
|
||||
<span class="material-symbols-outlined text-signal-orange text-[18px]">turn_right</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Incident Telemetry Band -->
|
||||
<section class="w-full bg-soft-beige px-margin py-space-sm flex items-center justify-between">
|
||||
<div class="flex items-center gap-space-sm min-w-0">
|
||||
<span class="px-space-xs py-0.5 bg-functional-red text-pure-white font-label-sm text-label-sm uppercase tracking-wider font-bold shrink-0">
|
||||
INCIDENT
|
||||
</span>
|
||||
<p class="font-label-md text-label-md text-matte-black uppercase truncate">
|
||||
CONGESTION IN 1.4 KM — SLOWDOWN (+3 MIN)
|
||||
</p>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm font-mono text-matte-black shrink-0 font-bold ml-2">CH-08</span>
|
||||
</section>
|
||||
<!-- Minimalist Corridor Viewport (Braun Bauhaus Cartography Canvas) -->
|
||||
<section class="relative w-full h-[320px] bg-chassis-subtle overflow-hidden">
|
||||
<!-- Map Canvas with Static Location Anchor -->
|
||||
<div class="absolute inset-0 w-full h-full grayscale contrast-125 opacity-70 bg-cover bg-center" data-location="Bismarckstrasse, Berlin" style=""></div>
|
||||
<!-- Architectural Coordinate Grid Overlay -->
|
||||
<div class="absolute inset-0 bg-transparent flex flex-col justify-between pointer-events-none p-space-sm">
|
||||
<div class="flex justify-between items-center text-matte-black/60 font-mono font-label-sm text-label-sm">
|
||||
<span>GRID: 52.516° N / 13.308° E</span>
|
||||
<span>RADAR: CALIBRATED</span>
|
||||
</div>
|
||||
<!-- Minimalist Vector Trajectory & Tracking Puck -->
|
||||
<div class="relative w-full h-full flex items-center justify-center">
|
||||
<svg class="absolute inset-0 w-full h-full pointer-events-none" viewbox="0 0 360 280">
|
||||
<!-- Anticipated Corridor Path -->
|
||||
<line stroke="#1A1A1A" stroke-linecap="square" stroke-width="8" x1="80" x2="180" y1="260" y2="150"></line>
|
||||
<line stroke="#1A1A1A" stroke-linecap="square" stroke-width="8" x1="180" x2="310" y1="150" y2="150"></line>
|
||||
<!-- Signal Orange Calculated Trajectory Vector -->
|
||||
<path d="M 80 260 L 180 150 L 310 150" fill="none" stroke="#EB8008" stroke-linecap="square" stroke-width="4"></path>
|
||||
<!-- Waypoint Intersect Indicator -->
|
||||
<rect fill="#EB8008" height="12" width="12" x="174" y="144"></rect>
|
||||
</svg>
|
||||
<!-- Position Puck (Dieter Rams Instrument Style) -->
|
||||
<div class="absolute bottom-12 left-1/4 transform -translate-x-1/2 flex items-center justify-center">
|
||||
<div class="w-10 h-10 bg-matte-black rounded-full flex items-center justify-center shadow-md relative">
|
||||
<!-- Compass Heading Needle (Pointing North-West) -->
|
||||
<div class="w-1.5 h-5 bg-signal-orange transform -rotate-45 origin-bottom translate-y-[-4px]"></div>
|
||||
<div class="w-2 h-2 bg-pure-white rounded-full absolute"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between items-end">
|
||||
<!-- Compass Calibrator Readout -->
|
||||
<div class="bg-matte-black text-pure-white px-2 py-1 flex items-center gap-2">
|
||||
<span class="font-label-sm text-label-sm font-mono text-signal-orange">HDG</span>
|
||||
<span class="font-label-md text-label-md font-bold">318° NW</span>
|
||||
</div>
|
||||
<!-- Scale Bar -->
|
||||
<div class="bg-matte-black/80 text-pure-white px-2 py-1 flex items-center gap-2">
|
||||
<div class="w-8 h-1 bg-signal-orange"></div>
|
||||
<span class="font-label-sm text-label-sm font-mono">100 M</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Speedometer & Limit Integrated Module -->
|
||||
<section class="w-full bg-soft-beige px-margin py-space-sm flex items-center justify-between">
|
||||
<!-- Current Speed Readout -->
|
||||
<div class="flex items-baseline gap-space-xs">
|
||||
<span class="font-label-sm text-label-sm uppercase font-mono text-on-surface-variant">VELOCITY</span>
|
||||
<span class="font-telemetry-num text-telemetry-num font-bold text-matte-black tracking-tighter">54</span>
|
||||
<span class="font-label-md text-label-md uppercase font-bold text-matte-black">KM/H</span>
|
||||
</div>
|
||||
<!-- Speed Limit Medallion (Bauhaus Circular Signet) -->
|
||||
<div class="flex items-center gap-space-sm">
|
||||
<span class="font-label-sm text-label-sm uppercase tracking-wider text-on-surface-variant font-mono">REGULATORY</span>
|
||||
<div class="w-11 h-11 rounded-full bg-pure-white flex items-center justify-center shadow-sm">
|
||||
<div class="w-9 h-9 rounded-full bg-pure-white flex items-center justify-center text-functional-red">
|
||||
<span class="font-headline-sm text-headline-sm font-bold text-matte-black leading-none">60</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Braun Telemetry Gauge Deck (Triple Modular Compartment) -->
|
||||
<section class="w-full bg-surface-container-high p-space-sm grid grid-cols-3 gap-space-xs">
|
||||
<!-- Compartment 1: ETA -->
|
||||
<div class="bg-soft-beige p-space-sm flex flex-col justify-between">
|
||||
<span class="font-label-sm text-label-sm font-mono uppercase text-secondary">METRIC // ETA</span>
|
||||
<div class="mt-2">
|
||||
<span class="font-telemetry-num text-telemetry-num font-bold text-matte-black tracking-tight block">18:42</span>
|
||||
<span class="font-label-sm text-label-sm text-olive-green font-bold uppercase tracking-wider block">ON SCHEDULE</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Compartment 2: REMAINING DISTANCE -->
|
||||
<div class="bg-soft-beige p-space-sm flex flex-col justify-between">
|
||||
<span class="font-label-sm text-label-sm font-mono uppercase text-secondary">REMAINING</span>
|
||||
<div class="mt-2">
|
||||
<span class="font-telemetry-num text-telemetry-num font-bold text-matte-black tracking-tight block">7.8</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant font-bold uppercase tracking-wider block">KILOMETERS</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Compartment 3: TIME LEFT -->
|
||||
<div class="bg-soft-beige p-space-sm flex flex-col justify-between">
|
||||
<span class="font-label-sm text-label-sm font-mono uppercase text-secondary">TIME LEFT</span>
|
||||
<div class="mt-2">
|
||||
<span class="font-telemetry-num text-telemetry-num font-bold text-signal-orange tracking-tight block">14</span>
|
||||
<span class="font-label-sm text-label-sm text-on-surface-variant font-bold uppercase tracking-wider block">MINUTES</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Tactical Primary Control Dock -->
|
||||
<section class="w-full bg-surface px-margin py-space-md flex flex-col gap-space-sm">
|
||||
<!-- Tactile Reroute Action Trigger -->
|
||||
<button class="w-full h-14 bg-matte-black text-pure-white flex items-center justify-between px-space-md active:bg-signal-orange active:text-matte-black transition-colors duration-100" id="rerouteBtn" type="button">
|
||||
<div class="flex items-center gap-space-sm">
|
||||
<span class="material-symbols-outlined text-signal-orange text-[20px] group-active:text-matte-black">alt_route</span>
|
||||
<span class="font-label-lg text-label-lg tracking-wider uppercase font-bold">REROUTE VIA TELEGRAM BOT</span>
|
||||
</div>
|
||||
<span class="font-label-sm text-label-sm font-mono px-2 py-0.5 bg-surface-dark text-soft-beige">CMD-09</span>
|
||||
</button>
|
||||
<!-- Secondary Navigation Utility Row -->
|
||||
<div class="grid grid-cols-2 gap-space-xs">
|
||||
<button class="h-11 bg-soft-beige text-matte-black flex items-center justify-center gap-space-xs active:bg-chassis-subtle" id="hazardBtn" type="button">
|
||||
<span class="material-symbols-outlined text-functional-red text-[18px]">warning</span>
|
||||
<span class="font-label-md text-label-md uppercase font-bold">REPORT HAZARD</span>
|
||||
</button>
|
||||
<button class="h-11 bg-soft-beige text-matte-black flex items-center justify-center gap-space-xs active:bg-chassis-subtle" id="muteBtn" type="button">
|
||||
<span class="material-symbols-outlined text-secondary text-[18px]">volume_up</span>
|
||||
<span class="font-label-md text-label-md uppercase font-bold">AUDIO: 80%</span>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
<script>
|
||||
// Tactical microswitch click feedback implementation
|
||||
const rerouteBtn = document.getElementById('rerouteBtn');
|
||||
if (rerouteBtn) {
|
||||
rerouteBtn.addEventListener('click', () => {
|
||||
rerouteBtn.classList.add('bg-signal-orange', 'text-matte-black');
|
||||
setTimeout(() => {
|
||||
rerouteBtn.classList.remove('bg-signal-orange', 'text-matte-black');
|
||||
}, 150);
|
||||
});
|
||||
}
|
||||
|
||||
const muteBtn = document.getElementById('muteBtn');
|
||||
if (muteBtn) {
|
||||
let muted = false;
|
||||
muteBtn.addEventListener('click', () => {
|
||||
muted = !muted;
|
||||
muteBtn.innerHTML = muted
|
||||
? '<span class="material-symbols-outlined text-secondary text-[18px]">volume_off</span><span class="font-label-md text-label-md uppercase font-bold">AUDIO: MUTED</span>'
|
||||
: '<span class="material-symbols-outlined text-secondary text-[18px]">volume_up</span><span class="font-label-md text-label-md uppercase font-bold">AUDIO: 80%</span>';
|
||||
});
|
||||
}
|
||||
</script></main></body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 186 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 222 KiB |
File diff suppressed because one or more lines are too long
Binary file not shown.
|
After Width: | Height: | Size: 265 KiB |
@@ -0,0 +1,242 @@
|
||||
---
|
||||
name: Telemetry Rams
|
||||
colors:
|
||||
surface: '#fff8f0'
|
||||
surface-dim: '#e0d9cd'
|
||||
surface-bright: '#fff8f0'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#faf3e6'
|
||||
surface-container: '#f5ede0'
|
||||
surface-container-high: '#efe7db'
|
||||
surface-container-highest: '#e9e2d5'
|
||||
on-surface: '#1e1b14'
|
||||
on-surface-variant: '#564335'
|
||||
inverse-surface: '#333028'
|
||||
inverse-on-surface: '#f7f0e3'
|
||||
outline: '#897363'
|
||||
outline-variant: '#dcc1af'
|
||||
surface-tint: '#914c00'
|
||||
primary: '#914c00'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#eb8008'
|
||||
on-primary-container: '#522900'
|
||||
inverse-primary: '#ffb77f'
|
||||
secondary: '#5f5e5e'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#e2dfde'
|
||||
on-secondary-container: '#636262'
|
||||
tertiary: '#676013'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#b7ad59'
|
||||
on-tertiary-container: '#464000'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#ffdcc3'
|
||||
primary-fixed-dim: '#ffb77f'
|
||||
on-primary-fixed: '#2f1500'
|
||||
on-primary-fixed-variant: '#6e3900'
|
||||
secondary-fixed: '#e5e2e1'
|
||||
secondary-fixed-dim: '#c8c6c5'
|
||||
on-secondary-fixed: '#1c1b1b'
|
||||
on-secondary-fixed-variant: '#474746'
|
||||
tertiary-fixed: '#f0e58a'
|
||||
tertiary-fixed-dim: '#d3c972'
|
||||
on-tertiary-fixed: '#1f1c00'
|
||||
on-tertiary-fixed-variant: '#4e4800'
|
||||
background: '#fff8f0'
|
||||
on-background: '#1e1b14'
|
||||
surface-variant: '#e9e2d5'
|
||||
signal-orange: '#EB8008'
|
||||
matte-black: '#1A1A1A'
|
||||
soft-beige: '#D9D2C6'
|
||||
functional-red: '#ED3F1C'
|
||||
olive-green: '#736B1E'
|
||||
chassis-subtle: '#CCC4B5'
|
||||
surface-dark: '#121212'
|
||||
pure-white: '#FFFFFF'
|
||||
typography:
|
||||
display-lg:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 48px
|
||||
fontWeight: '700'
|
||||
lineHeight: 52px
|
||||
letterSpacing: -0.04em
|
||||
display-lg-mobile:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 36px
|
||||
fontWeight: '700'
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.03em
|
||||
headline-lg:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 32px
|
||||
fontWeight: '700'
|
||||
lineHeight: 38px
|
||||
letterSpacing: -0.03em
|
||||
headline-lg-mobile:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 24px
|
||||
fontWeight: '700'
|
||||
lineHeight: 30px
|
||||
letterSpacing: -0.02em
|
||||
headline-md:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 20px
|
||||
fontWeight: '600'
|
||||
lineHeight: 26px
|
||||
letterSpacing: -0.02em
|
||||
headline-sm:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 16px
|
||||
fontWeight: '600'
|
||||
lineHeight: 22px
|
||||
letterSpacing: -0.01em
|
||||
body-lg:
|
||||
fontFamily: Geist
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
letterSpacing: -0.01em
|
||||
body-md:
|
||||
fontFamily: Geist
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 20px
|
||||
letterSpacing: 0em
|
||||
body-sm:
|
||||
fontFamily: Geist
|
||||
fontSize: 12px
|
||||
fontWeight: '400'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.01em
|
||||
label-lg:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 14px
|
||||
fontWeight: '700'
|
||||
lineHeight: 18px
|
||||
letterSpacing: 0.06em
|
||||
label-md:
|
||||
fontFamily: Geist
|
||||
fontSize: 12px
|
||||
fontWeight: '600'
|
||||
lineHeight: 16px
|
||||
letterSpacing: 0.04em
|
||||
label-sm:
|
||||
fontFamily: Geist
|
||||
fontSize: 10px
|
||||
fontWeight: '700'
|
||||
lineHeight: 12px
|
||||
letterSpacing: 0.08em
|
||||
telemetry-num:
|
||||
fontFamily: Space Grotesk
|
||||
fontSize: 28px
|
||||
fontWeight: '700'
|
||||
lineHeight: 32px
|
||||
letterSpacing: -0.03em
|
||||
spacing:
|
||||
gutter: 1rem
|
||||
gutter-desktop: 1.5rem
|
||||
margin: 1rem
|
||||
margin-desktop: 2rem
|
||||
space-xs: 0.25rem
|
||||
space-sm: 0.5rem
|
||||
space-md: 1rem
|
||||
space-lg: 1.5rem
|
||||
space-xl: 2rem
|
||||
space-2xl: 3rem
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
This design system synthesizes avant-garde telematics with Dieter Rams' ten principles of good design—centered rigorously around the tenet of "Weniger, aber besser" (Less, but better). It bridges the functional precision of Braun audio and measuring hardware with the high-velocity demands of tactical urban navigation.
|
||||
|
||||
The aesthetic strips away gratuitous skeuomorphism, gamified gloss, and distracting animations in favor of an uncompromising, matte-finished Bauhaus instrument panel. Every interface surface behaves like machined anodized housing or etched composite casing: stark, orthogonal, and devoid of rounded ornament. Visual emphasis relies exclusively on geometric hierarchy, stark black-and-white tonal contrast, and intentional, high-visibility signal accents calibrated for instantaneous glanceability at speed.
|
||||
|
||||
The target user values austere functional clarity, mechanical reliability, and cognitive calm in chaotic environments. The emotional posture is calculated, objective, unhurried, and authoritative.
|
||||
|
||||
## Colors
|
||||
|
||||
The chromatic structure embodies physical calibration controls found on precision industrial equipment.
|
||||
|
||||
- **Primary (`#EB8008` / Signal Orange):** The primary kinetic indicator. Reserved for active navigation vectors, primary interactive triggers, current vehicle telemetry, and dynamic route recalculations. It commands immediate optical priority against neutral surfaces.
|
||||
- **Secondary (`#1A1A1A` / Matte Black):** The anchoring structure. Used for fundamental borders, primary typographic weights, technical readouts, and inverted industrial heads-up displays (HUDs).
|
||||
- **Tertiary (`#736B1E` / Olive Green):** Utilitarian confirmation. Applied to verified route segments, clear operational conditions, speed verification zones, and system telemetry equilibrium.
|
||||
- **Neutral (`#D9D2C6` / Soft Beige):** The foundational substrate. Evokes tactile unbleached matte instrument housings. It reduces retinal strain compared to harsh stark whites while preserving maximum contrast against pure black graphic marks.
|
||||
|
||||
### Functional Application Rules
|
||||
- **Functional Red (`#ED3F1C`):** Strict warning state. Used exclusively for hazards, critical telemetry alerts, road obstructions, and terminal errors.
|
||||
- **Grayscale Map Grounding:** Cartographic vectors and tile layers render in calibrated, low-saturation monochrome grays (`#D9D2C6` to `#1A1A1A`) so that route guidance (`#EB8008`) and hazard events (`#ED3F1C`) remain hyper-legible without visual competition.
|
||||
|
||||
## Typography
|
||||
|
||||
Typography functions as structural architecture rather than superficial styling.
|
||||
|
||||
- **Headline Font (`Space Grotesk`):** Chosen for its technical constructivist origins, rigid metric proportion, and deliberate mechanical joints. Headings and telemetry counters use tight tracking to emphasize solid form.
|
||||
- **Body & Functional Font (`Geist`):** Engineered for ultra-clean digital rendering, neutral density, and absolute legibility. It handles dense navigational directives, distance metrics, status feeds, and command-line structures with zero friction.
|
||||
- **Case System:** Labels, metrics, status states, and command triggers employ uppercase typesetting with expanded letter spacing (`0.04em` to `0.08em`) to mimic stamped DIN hardware labels and industrial control markings.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout is governed by an unyielding 8px geometric grid system derived from Dieter Rams' strict modular audio systems:
|
||||
- All dimensions, element paddings, margins, and layout offsets must evaluate to multiples of `4px` or `8px`.
|
||||
- Interfaces adopt a modular instrument panel structure. On handheld screens and chat-based panels, viewports partition into clear horizontal register bands:
|
||||
- **Top Register:** Navigation horizon, compass bearing, status telemetry.
|
||||
- **Center Register:** High-contrast graphic map tile or maneuver direction block.
|
||||
- **Lower Register:** Modular interaction dock, metric cards, action controls.
|
||||
|
||||
### Grid & Breakpoints
|
||||
- **Compact Viewport (< 640px):** Single-column structural grid with `margin: 1rem` (16px) and `gutter: 1rem` (16px). Cards and modules stack vertically with flush-edge precision.
|
||||
- **Medium Viewport (640px – 1024px):** 6-column fluid structure. Modular sidecar displays navigation data while maps claim equal structural weight.
|
||||
- **Expanded Desktop / In-Dashboard Display (> 1024px):** 12-column rigid grid with `margin-desktop: 2rem` (32px) and `gutter-desktop: 1.5rem` (24px). Control consoles pin to a fixed 380px instrument column, leaving the remaining surface area for continuous telemetry.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
True to the Dieter Rams philosophy, this design system rejects faux 3D dimensionality, dropped blurs, fuzzy shadows, and translucent frosted glass.
|
||||
|
||||
### Depth Mechanics
|
||||
- **Physical Planarity:** Hierarchy is expressed strictly through structural boundaries, edge weights, and matte value zoning. Surfaces are completely opaque.
|
||||
- **Machined Inset Lines:** Structural separation uses crisp `1px` or `2px` solid rules (`#1A1A1A` over `#D9D2C6` or `#CCC4B5`).
|
||||
- **Surface Nesting:** Secondary panels and telemetry modules sit flush inside the primary chassis, differentiated solely through background shifting (e.g., `#D9D2C6` transitioning into `#CCC4B5` or dark panel inversions using `#1A1A1A`).
|
||||
- **Tactile Active Depressions:** Interactive items do not rise into floating space. When pressed or activated, elements invert colors (e.g., `#D9D2C6` background with `#1A1A1A` text switches instantly to `#1A1A1A` background with `#EB8008` text) or display a solid offset line (1px hard shadow at 0-degree blur), simulating a mechanical microswitch settling into its housing.
|
||||
|
||||
## Shapes
|
||||
|
||||
The design system operates with **absolute zero roundedness** (`0px` corner radius).
|
||||
|
||||
Every card, button, modal box, notification banner, status badge, and graphic container terminates in strict, sharp 90-degree right angles. This geometry reinforces the physical metaphor of precision aluminum casings, high-tensile switchgear, and architectural schematics.
|
||||
|
||||
Dividers, lines, and focus brackets are drawn with unyielding straight paths. Glyphs, direction arrows, and iconography are constructed using uniform stroke weights (2px standard) on pure orthogonal and 45-degree angled baselines.
|
||||
|
||||
## Components
|
||||
|
||||
### Buttons & Trigger Controls
|
||||
- **Primary Action (e.g., "COMMENCE ROUTE", "CONFIRM HAZARD"):** Background `#EB8008`, label `#1A1A1A` in `label-lg` uppercase, border `2px solid #1A1A1A`, 0px radius. Hover/focus: background `#1A1A1A`, text `#EB8008`.
|
||||
- **Secondary Action (e.g., "ALTERNATIVES", "CALIBRATE"):** Background `#D9D2C6`, label `#1A1A1A`, border `2px solid #1A1A1A`. Hover/focus: background `#CCC4B5`.
|
||||
- **Command State / Bot Quick Buttons:** Monospaced-inspired Geist labels encased in a 1px solid `#1A1A1A` frame, padding `0.5rem 1rem`.
|
||||
|
||||
### Telemetry Cards & Module Panels
|
||||
- **Structure:** Crisp `1px solid #1A1A1A` perimeter border, `#D9D2C6` matte background, sharp corners.
|
||||
- **Header Plate:** Separated by a horizontal `1px solid #1A1A1A` divider. Contains category in `label-sm` uppercase and an alphanumeric reference badge (e.g., `SEC-04 // SPEED`).
|
||||
- **Content Block:** High-contrast data point in `telemetry-num` typography paired with adjacent directional indicator glyphs.
|
||||
|
||||
### Chips & Event Tags
|
||||
- **Configuration:** Monolithic rectangular blocks, no rounding.
|
||||
- **Traffic State:** Background `#EB8008`, text `#1A1A1A`, `label-sm`.
|
||||
- **Hazard / Incident:** Background `#ED3F1C`, text `#FFFFFF`, `label-sm`.
|
||||
- **Operational / Safe:** Background `#736B1E`, text `#FFFFFF`, `label-sm`.
|
||||
|
||||
### Input Fields & Search Bars
|
||||
- **Frame:** `#D9D2C6` background with continuous `2px solid #1A1A1A` perimeter, 0px radius.
|
||||
- **Typography:** `body-md` in `Geist`, dark matte text.
|
||||
- **Focus Indicator:** 3px thick border in `#EB8008`, zero glow, zero blur. Input caret is a non-blinking solid block rectangle.
|
||||
|
||||
### Checkboxes & Toggle Switches
|
||||
- **Checkboxes:** Exact 18x18px squares with a `2px solid #1A1A1A` border. Checked state renders a solid centered 8x8px square in `#EB8008` (no checkmark glyph; pure geometric state).
|
||||
- **Physical Two-Way Toggles:** Horizontal dual-box module (`[ OFF | ON ]`). Active side fills solidly with `#1A1A1A` and inverted text; inactive side displays muted background `#CCC4B5`.
|
||||
|
||||
### Navigation Heads-Up Display (Maneuver Strip)
|
||||
- **Chassis:** Inverted `#1A1A1A` container spanning full width across the upper viewport.
|
||||
- **Graphic Vector:** 32x32px sharp directional turn arrow in `#EB8008` with `3px` stroke width.
|
||||
- **Maneuver Typography:** `headline-md` in `#D9D2C6` describing street designation, accompanied by remaining distance set in `Space Grotesk` bold.
|
||||
Reference in New Issue
Block a user