← Home

SILVER SCREEN STYLE GUIDE · ONE ACCENT, SPENT CAREFULLY

Stopwatch

Silver Screen design system for evidence-backed time tracking. A cool metallic ground where the single magenta accent marks exactly what the user can act on.

"Silver carries the structure; magenta marks the action. If it is magenta, you can act on it."

Design tokens from YAML · CSS from the styleguide engine · UI in Hologram

Type, color, space, dividers, and glyphs that every component is built from.

01

Typography

Typefaces, sizes, weights, decorations, and text color usage.

Space Grotesk — Sans
var(--font-sans) 700
var(--font-size-3xl) / 1.15
Headings, UI labels, body
Design systems at seed scale.
IBM Plex Mono
var(--font-mono) 500
var(--font-size-sm) / 1.5
Code, tokens, metadata
--brand-blue: var(--blue); --space-3: calc(var(--unit) * 3);
Body
var(--font-sans) 400
var(--font-size-md) / 1.6
Body copy
YAML seeds expand into hundreds of tokens. Components consume CSS variables — not hard-coded values.

Full swatch set from theme YAML · style-guide · style-guide.color-palette.yaml · theme switch reloads this section with the active theme

Core brand colors from Bauhaus primary theory. These brighten automatically in dark mode for visibility.

Brand Red var(--brand-red)
Brand Red Light var(--brand-red-light)
Brand Red Mid var(--brand-red-mid)
Brand Blue var(--brand-blue)
Brand Blue Light var(--brand-blue-light)
Brand Blue Mid var(--brand-blue-mid)
Brand Yellow var(--brand-yellow)
Brand Yellow Light var(--brand-yellow-light)
Brand Yellow Mid var(--brand-yellow-mid)
Brand Red — Brand accent. CTAs, active states, logo mark, error reinforcement.
Brand Blue — Primary actions, links, focus rings, info states.
Brand Yellow — Highlights, selection, featured content, warnings.

Mode-aware surface and text colors — these flip automatically in dark mode.

Surface var(--surface)
Surface Alt var(--surface-alt)
Surface Inverse var(--surface-inverse)
Text var(--text)
Text Secondary var(--text-secondary)
Text Muted var(--text-muted)
Text Inverse var(--text-inverse)
Border var(--border)
Border Strong var(--border-strong)

Non-branded utility colors for data visualization, tags, categories, and decorative use. Brighten in dark mode. Light variants auto-tint against surface.

Rose var(--rose)
Rose Light var(--rose-light)
Orange var(--orange)
Orange Light var(--orange-light)
Amber var(--amber)
Amber Light var(--amber-light)
Lime var(--lime)
Lime Light var(--lime-light)
Emerald var(--emerald)
Emerald Light var(--emerald-light)
Teal var(--teal)
Teal Light var(--teal-light)
Cyan var(--cyan)
Cyan Light var(--cyan-light)
Sky var(--sky)
Sky Light var(--sky-light)
Indigo var(--indigo)
Indigo Light var(--indigo-light)
Violet var(--violet)
Violet Light var(--violet-light)
Purple var(--purple)
Purple Light var(--purple-light)
Fuchsia var(--fuchsia)
Fuchsia Light var(--fuchsia-light)
Pink var(--pink)
Pink Light var(--pink-light)

Neutral backgrounds, surfaces, borders, and text values. Foundation for all UI layers.

White var(--white)
Off-White var(--off-white)
Gray 50 var(--gray-50)
Gray 100 var(--gray-100)
Gray 200 var(--gray-200)
Gray 300 var(--gray-300)
Gray 400 var(--gray-400)
Gray 500 var(--gray-500)
Gray 600 var(--gray-600)
Gray 700 var(--gray-700)
Gray 800 var(--gray-800)
Gray 900 var(--gray-900)
Black var(--black)

Blue-tinted neutrals for surfaces and backgrounds. Used by the semantic surface layer — flips in dark mode.

Slate 50 var(--slate-50)
Slate 100 var(--slate-100)
Slate 200 var(--slate-200)
Slate 300 var(--slate-300)
Slate 400 var(--slate-400)
Slate 500 var(--slate-500)
Slate 600 var(--slate-600)
Slate 700 var(--slate-700)
Slate 800 var(--slate-800)
Slate 900 var(--slate-900)
Slate 950 var(--slate-950)

Functional state colors aliased into the palette — not fixed hex. Change the palette color, the semantic follows.

Success var(--success)
Success Tint var(--success-tint)
Warning var(--warning)
Warning Tint var(--warning-tint)
Error var(--error)
Error Tint var(--error-tint)
Info var(--info)
Info Tint var(--info-tint)
Success — → emerald. Confirmations, published states, positive actions.
Warning — → amber. Cautions, pending states, attention required.
Error — → rose. Failures, danger states, destructive actions.
Info — → brand-blue. Guidance, links, informational states.

Wireframes from style-guide.shell-layouts.yaml · theme style-guide. Click a shell to expand the live chrome preview.

HUI shells use design-system classes (.hui + control modifiers). Submenu selects a control family; each demo is interactive via Hologram actions.

Checkbox
Notifications
Dark mode default
Beta access

Btn

TimelyWeb.Hologram.Components.Btn

Themed button with variant and size props.

YAML source for theme style-guide. Edit and save as a named variant (style-guide.section.variant.yaml). Branding is view-only.

24 lines

Active file: style-guide.color-modes.user.yaml · 20 files in themes/theme-style-guide/