diff --git a/docs/design-tokens.md b/docs/design-tokens.md index 660231b..291cc76 100644 --- a/docs/design-tokens.md +++ b/docs/design-tokens.md @@ -122,6 +122,8 @@ Application rules: - Use panel border tokens instead of one-off `border-white/10` and `bg-black/20` combinations when the surface belongs to the notch-clipped chrome language. - Use the four-step surface ramp to create visible lift. Do not introduce intermediate dark greens for local component depth. - Use `--color-ops-accent-deep` for structural rails, hero tail tracks, section ticks, and today rails that should recede behind live readiness status. +- Use `--ops-rail-baseline` for quiet structural emerald lines that need to align across telemetry, section ticks, history momentum, and footer separation. +- Use `--ops-section-pad` for first-level section padding so the vertical rhythm stays controlled by the app shell gap and not by ad hoc section padding. ## Hover and elevation scale @@ -140,6 +142,7 @@ Application rules: - Use hover 1 for quiet rows and hover 2 for interactive cards or grid cells. - Animate transform, opacity, color, background, border, and shadow only. - New motion must remain covered by the reduced-motion override. +- Structural baselines do not animate. They remain steady in normal, reduced-motion, and forced-colors modes. ## Shared chrome utilities @@ -186,6 +189,7 @@ Application rules: - Use tone chip panels for import, restore, recovery, and fault guidance instead of repeating inline gradient stacks. - Use uniform calm `SignalCard` chrome for backup summary signals. Express caution with the left spine or an inline tone chip rather than recoloring the entire card amber when the state is an intended safety lock. - Accordion status chips stay in `.ops-export-accordion-status` so badge alignment remains stable across open and collapsed recovery panels. +- Attention telemetry should stay on neutral chip chrome. Express alert state with the label pip, the left register tick, detail text, and the shared rail baseline. Frame emphasis: @@ -203,6 +207,7 @@ Section shell emphasis: - `.ops-section-emphasis-standard` is the default shell weight for read-only mirrors such as history. - `.ops-section-emphasis-support` drops the emerald outer wash and uses structural framing for support or recovery surfaces. - Apply these through `SectionCard` only. They recalibrate shell hierarchy without changing notch geometry, focus chrome, or component signatures downstream. +- Primary emphasis uses structural lines, not glow. The section tick, hero rail, and top edge should read as one restrained instrument baseline. Spine emphasis: diff --git a/src/App.tsx b/src/App.tsx index ea63077..335c7fd 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -363,34 +363,37 @@ function App() { - - - + + + ); diff --git a/src/components/DomainCard.tsx b/src/components/DomainCard.tsx index f4bf1b0..be598f2 100644 --- a/src/components/DomainCard.tsx +++ b/src/components/DomainCard.tsx @@ -4,6 +4,7 @@ import { getSectorTintClassName } from '../lib/sectorVisuals'; import { getStatusContent } from '../lib/status'; import type { Sector, UiStatus } from '../types'; import { SectorGlyphMark } from './icons/SectorGlyphs'; +import { StatusBadge } from './StatusBadge'; interface DomainCardProps { sector: Sector; @@ -158,11 +159,11 @@ export function DomainCard({ spineClassName, ].join(' ')} > -
- +
+
- +
- - {sector.shortLabel} - -

- {sector.label} -

-

+

+
+ + {sector.shortLabel} + +

+ {sector.label} +

+
+ +
+

{sector.description}

diff --git a/src/components/FooterProvenance.tsx b/src/components/FooterProvenance.tsx index 56fa37e..413ce7b 100644 --- a/src/components/FooterProvenance.tsx +++ b/src/components/FooterProvenance.tsx @@ -5,13 +5,13 @@ const REPO_URL = 'https://github.com/bradsaucier/opsnormal'; export function FooterProvenance() { return (

Provenance

-
+
Build
diff --git a/src/components/SectionCard.tsx b/src/components/SectionCard.tsx index 94c2cfe..228893f 100644 --- a/src/components/SectionCard.tsx +++ b/src/components/SectionCard.tsx @@ -27,7 +27,7 @@ export function SectionCard({ {emphasis === 'primary' ? (