SLATE
Slate is a stylistic grammar for every Hollywood Tooling app. Native chassis. Instrument layer. Four lighting conditions, one geometry. Information set in Slate carries weight.
DESIGN PRINCIPLES
No grey text
Text is information; fading it throws it away. Solid inks only — hierarchy comes from weight and size, never from alpha.
ExampleThe rail's labels are 9px caps in solid ink, not body text at 40% white.
Gauges never lie
Every indicator reflects real state. A visible control acts now, dims with a reason, or doesn't exist. No spinners over dead work.
ExampleFixity reads verified 0 until verification has actually run — a bar without a count is a claim.
Brevity is required
Halve it, then halve it. Fragments are sentences. The control carries the verb; copy never repeats the button. No superlatives.
Example"The volume disconnected. Reconnect it and the import resumes on its own." became "Volume disconnected. Reconnect to resume."
Color enforces meaning
Color is allocated once: nominal · caution · fault · not run. Orange undoes. Red retries. No meaning, no color.
ExampleA confirmation runs green under any circumstance — success never wears tungsten.
One icon per concept
An icon names a concept — drawn once, on one grid, in one style. Zero emojis in chrome.
ExamplePrint is an enlarger. The breadcrumb arrow is drawn, never typed.
One grammar
Learn one Slate app, know them all. One type ramp, one spacing scale, one interaction grammar — undo over confirmation, focus always visible.
ExampleBase 13px · controls 28px · touch 44px · spacing 4·8·12·16·24·32·48 · focus ring 2px.
Web mirrors the Mac
Many apps live on macOS first. The web app mirrors its Mac sibling — one shell, one grammar — and can still push.
ExampleThe web toolbar, sidebar, and gauge rail map one-to-one to the Mac app's chrome.
THE SHELL
| Name | Kind | Size | Modified | Status |
|---|---|---|---|---|
| interview_cam-A_0412.mov | Video | 4.21 GB | Today, 14:02 | Ready |
| poster_key-art_v3.tif | Image | 812 MB | Today, 11:48 | Ready |
| score_mix_stem-04.wav | Audio | 96.4 MB | Yesterday | Needs review |
| contact_sheet_034.pdf | Document | 18.2 MB | Aug 22 | Ready |
| reel_rough-cut_v9.mov | Video | 9.87 GB | Aug 21 | Processing |
| caption_track_en.srt | Sidecar | 42 KB | Aug 19 | Failed |
Library128,406 records · 2.14 TB
Verifyqueue 312
WorkerNOMINAL
Synced14:07
SPECIMENS ARE EXHIBITS — CONTROLS DEMONSTRATE STATE, THEY OPERATE NO REAL LIBRARY.
CONTROLS
Buttons
A button performs its label. One primary per surface — the action the screen exists for.
disabled says why · destructive never default focus
Fields
A field captures one value and says what it's for. An invalid field names the fix.
Appears in the sidebar and on exports.
Volume not connected. Connect it or choose another.
Toggles & segments
A switch acts now; a checkbox sets a preference; radios pick one of a few. A segment picks one scope.
Watch folder for new records
Verify checksums on import
Darkroom mode
live: off disables both safelights — the dead controls dim with their reason
Slider
A slider picks a value from a visible range.
the track fills to the thumb (HIG) · thumb 16px · focus ring at 4px offset
Drop zone
A drop zone receives files and says what happens next.
Drop files to import
or choose a folder
or choose a folder
Stepper
A stepper nudges a number whose range is small and known.
12
prints per sheetToken field
Tokens are typed, matched, and removable. Existing tags complete; new ones are deliberate.
portrait
1998
harbor
INSTRUMENTS
Lamps
A lamp shows the state of one thing. Four states, allocated once.
NOMINALCAUTION
FAULTNOT RUN
no meaning, no lamp
Chips
A chip labels state inline, beside the thing it describes.
ReadyProcessingNeeds reviewFailed
semantic color is not the accent
Stage track
The stage track shows position in a lifecycle.
SHOT
DEVELOPED
SCANNED
PRINTED
position, never dates — signs can't lie
Confidence rating
A rating shows the model's confidence. A person rules.
amber under 0.75 — a recorded threshold
Gauge rail cell
A rail cell is one instrument reading — key, value, lamp.
Verifybaseline 128,406 · verified 0
WorkerNOMINAL
faults shown because they exist
Breadcrumb
A breadcrumb shows the path here.
the drawn arrow — never a text glyph
Progress
Progress shows real work with its count. A bar without a count is a claim.
4,712 / 12,408
11,415 / 12,408
no spinners over dead work
Identity & counts
An avatar says who. A badge counts what waits — a count is a caution: it wants a decision.
SHJGSHinitials only — no photos in chrome
312
FEEDBACK
Dialog
A dialog interrupts for the one decision that can't wait. Irreversible actions only — everything else gets undo.
Empty the trash?
Removes 34 records permanently. The one action with no undo.
Toasts
A toast wears its action: orange when undo is on offer, red when retry is. A plain confirmation runs green.
3 records deletedMoved to Trash.
Import stoppedVolume disconnected. Reconnect to resume.
orange = undo · red = retry · icon 22px, centered
Banner
A banner reports surface state, inline, with one action.
Empty state
An empty state teaches what belongs here and offers the first step.
No flagged recordsFlagged records appear here. Flag from any row menu.
TYPE & SPACE
Type ramp
display 20/600Press day
title 15/600Import settings
body 13/400Flagged records appear here.
label 11/600Collections
data 12 mono128,406 records · 2.14 TB
Spacing — one scale
4
8
12
16
24
32
48
sections 48 · after a heading 16 · card gap 12 · card pad 16 · row gap 8 · controls 28px · touch 44px · radius 6/10
TOKENS
| Token | Night | Day | Safe 902 | Safe red |
|---|---|---|---|---|
| --ground | #0d0d0f | #ffffff | #16120a | #100101 |
| --ink | #f5f5f7 | #1d1d1f | #ffd6a3 | #cc1a1a |
| --ink2 | #eef0f6 | #26262c | #f5b76e | #b30000 |
| --ink3 | #d7dae2 | #3f3f47 | #dd9a4f | #800000 |
| --accent | #DE6A41 | #B34D28 | #ff9e3d | #cc1a1a |
| --nominal | #38c793 | #1e8a5c | #ecb87f | #800000 |
| --caution | #e0a63a | #9a6b12 | #e0a63a | #b30000 |
| --fault | #e2484a | #c22f31 | #ff5a47 | #cc1a1a |
| --act-undo | #DE6A41 | #B34D28 | #ffb066 | #b30000 |
| --act-retry | #f25d5f | #c22f31 | #ff5a47 | #cc1a1a |
THE WORDMARK
Sign in
The wordmark stands alone on the door. Night, always.
SLATE
Sizes
Barnegat caps. The wordmark is the logo — there is no mark.
SLATE
SLATE
SLATE
SLATE
ICONS
COMPS — RULED THIS PASS
Icon style — round. Adopted.
round caps · round joins · corners ≥1.8 · optical 20/24
Icon style — sharp. For the record.
butt caps · miter joins · square corners — rejected: fights the chassis
Undo orange — A adopted
A = the house #DE6A41 · B amber — rejected, caution owns it · C coral — rejected, reads fault-adjacent
Retry red — A adopted
A #f25d5f adopted — fault, brightened for action · B fault itself — reserved for state · C — too soft
Action treatment — tinted. Adopted.
tinted adopted · filled — rejected, fights the primary · bare — rejected, too quiet to read as action
Glass — adopted, then made true
The ground is roll-sign black; the shell paints a lit wall and glass samples it. Two materials. Cards: a white film, blur, a lit top edge, a real shadow. Transients — dialogs, menus, toasts, tooltips — wear smoked glass and sit one shadow higher: the scrim keeps text legible over content a float can't predict. Banners stay in-flow. Tables and the rail stay opaque: telemetry doesn't float.
USE
<link rel="stylesheet" href="tokens.css"> <link rel="stylesheet" href="components.css"> <body class="slate"> night — the default <body class="slate day"> day <body class="slate safe902"> safe 902 — Ilford amber, >580nm <body class="slate safered"> safe red — the deep-red lamp icons: inline icons.svg once, then <svg class="icon"><use href="#i-search"/></svg>
SLATE V0.3 · HOLLYWOOD TOOLING · SET IN SLATE ITSELF · SPECIMENS ARE EXHIBITS