Surfaced from the last visit
Cabin filter was deferred last time. Prefers text updates.
- Work
- Collective Signal
Collective Signal
A palette is a set of decisions: what each colour means, how much of a screen it may take, and which meanings it must never carry.
The role
Ink carries structure, a little bright colour marks only what the product surfaced, and status colours keep their own meaning wherever they appear.
The application
The palette is applied to one light working screen, so each role is judged where people would actually meet it, not on a swatch sheet.
The state and contrast decisions
Each record state is checked for meaning without colour alone, and every text pairing is checked against its real background before it is used.
Token values, names and roles are exact from the brand sources. The record is synthetic, and the comparisons that are new demonstrations say so where they appear.
Token application study. Explore the brand’s colors, type, and interface states in a working preview.
1 Foundation and signal
Ink holds the interface together; a little Lucid points at the one field Rapport surfaced. Everything else stays quiet, so the signal means something.
Rapport Ink #32263FLucid
#C8E85A for what Rapport surfaced: about 75/25 when the pair appears together (PDF p.1). That ratio is for the pair, not for a working screen.Outline a token in the sample
SRSam RiveraService Advisor
- Home
- Repair Orders
- Follow-ups
Structured draft
Riley Chen
2021 compact SUV · 2:36 PM · 3m 34s
MPI Draft readyRO 10427
Brake measurements were reviewed; rotor condition needs confirmation before an estimate is sent.
Measured findings
Front brake pads measure 4 mm, rear pads 7 mm. Front rotors show heat spotting; thickness and runout need verification before a recommendation.
Customer decision
Wants the verified findings and an itemized estimate by text before deciding on added brake work.
- Copy
- More
Static sample Its buttons are pictured, not live.
Hover, focus or tap a token to outline where the workspace uses it.
Excess emphasis shows what happens when every emphasis uses Lucid. A new demonstration, labelled as one.
How much of each, by contract
- Neutrals 84%source range 80–88%
- Foundation 12%source range 9–15%
- Bright signal 4%source range up to about 4%
A working screen: mostly neutral, a foundation that holds structure, and a sliver of signal. Drawn to a normalized sample (84 / 12 / 4) inside the PDF’s ranges (p.4): a prescription for design, not a measurement of a built screen. One contract applies at a time.
2 Meaning survives color
The same record in six states. Each has its own words, icon and actions, so the status reads in greyscale too. Lucid never stands in for any of them.
Structured draft
Riley Chen
2021 compact SUV · 2:36 PM · 3m 34s
MPI Draft readyRO 10427
Brake measurements were reviewed; rotor condition needs confirmation before an estimate is sent.
Surfaced from the last visit
Cabin filter was deferred last time. Prefers text updates.
Measured findings
Front brake pads measure 4 mm, rear pads 7 mm. Front rotors show heat spotting; thickness and runout need verification before a recommendation.
Customer decision
Wants the verified findings and an itemized estimate by text before deciding on added brake work.
- Copy
- More
Static sample Its buttons are pictured, not live.
Draft ready
Nothing is wrong and nothing is finished. Neutrals carry it; no status colour is spent. Graphite on Ink Mist.
Three different questions
- SurfacedLucid: Rapport noticed something useful.
- CompletedSuccess: a person confirmed the work.
- Needs reviewWarning: someone has to look.
3 Readable under working conditions
Service-lane glare and projected demos are in the brief. Each pair below is a real use in the sample, checked from its exact values rather than copied from the PDF’s rounded figures.
Rotor note needs verification
Surfaced insight
6.16:1
Lucid Deep #556900 on White #FFFFFF. Role: Surfaced-insight label. The PDF lists 6.16:1.
- Normal text needs 4.5:1Pass
- Large text needs 3:1Pass
| Label and pair | Ratio | Normal text |
|---|---|---|
| CompletedSuccess on Success background | 4.73:1 | Pass |
| Needs reviewWarning on Warning background | 5.03:1 | Pass |
| Capture interruptedError on Error background | 5.66:1 | Pass |
| ProcessingInformation on Information background | 5.23:1 | Pass |
| LockedPrivate on Private background | 5.42:1 | Pass |
| Draft readyGraphite on Ink Mist | 5.34:1 | Pass |
Checked against WCAG 2.2 AA contrast (1.4.3). Each result covers one pair; none certifies the whole product. The method is under Sources and method.
4 One parent, several modules
Sales, Service, Phone and Messaging each get an accent, small and subordinate. The card’s structure, Ink text, Lucid insight and status colours stay the same in all four.
Service · MPI Completed
Riley Chen
2021 compact SUV · RO 10427
Brake measurements reviewed during the inspection.
Surfaced Cabin filter was deferred last time. Prefers text updates.
Accent fill is a 3 px edge and a 10 px marker: under 2% of the card at any width from 280 px, inside the PDF’s limit of 5% of a screen.
Service: MPI
In the preview: Stage chips and markers for check-in and inspection conversations.
What this work establishes
- A parent identity: Ink for structure, Lucid for surfaced intelligence.
- Semantic separation: status colours that stay independent of the brand.
- Module contexts: four accents under one parent, not four brands.
- Usage rules from the brand PDF, applied to an operational prototype.
Not measured
- Business lift or adoption from the palette.
- Preference research. The strategy is the author’s rationale, not a market study.
- Whole-product accessibility compliance.
A proposed check, not yet run
Show people at the desk the same record surfaced, needing review and completed, and ask them to point to each. If any two are confused, the signal is doing a status’s job.
Sources and method
Sources. Every token name, value and role comes from the brand PDF (pp.1–4) and the :root of the color-system preview; the application aliases keep the unbranded build’s variable names. Each value is defined once and set on the samples as a CSS variable.
The workspace. Layout, labels and state wording follow the preview’s structured-draft detail, status pills, processing view, private lock and capture recovery. The advisor, customer, vehicle and visit are synthetic. The preview itself puts Lucid on the avatar, the current tab and the assistant; highlighting one surfaced field applies the PDF’s rule for AI-added value and is new here.
New demonstrations. The excess-emphasis comparison, the Sales context and the night token pairs are not in the sources. Each is labelled where it appears.
Proportions. Each strip is drawn to a normalized sample inside the PDF’s ranges (p.4): a prescription for design, not a measurement of a built screen.
Contrast. WCAG 2.2 AA (1.4.3): normal text needs 4.5:1; large text, at least 24 px regular or 18.66 px bold, needs 3:1. Ratios use the standard sRGB relative-luminance formula on the exact hex values and are cut, not rounded, to two decimals, so a near miss never reads as a pass. Where the PDF prints a figure, it is shown beside the computed one.
Module accents. The chip uses a 9% tint of the accent and accent text, as the preview’s stage chips do; the fill is a 3 px edge and a 10 px marker.
All 30 source tokens and the application aliases
| Token | Variable | Value | Role (PDF) | Copy |
|---|---|---|---|---|
| Foundation | ||||
| Rapport Ink | --rapport-ink | #32263F | Primary foundation | |
| Deep Ink | --deep-ink | #1B1521 | Deep foundation | |
| Signal | ||||
| Rapport Lucid | --rapport-lucid | #C8E85A | Intelligence signal | |
| Lucid Deep | --lucid-deep | #556900 | Accessible signal (light) | |
| Lucid Mist | --lucid-mist | #F2F8D9 | Signal tint | |
| Neutrals | ||||
| Warm Canvas | --warm-canvas | #F7F6F3 | Light canvas | |
| White | --white | #FFFFFF | Surface | |
| Ink Mist | --ink-mist | #EEE9F2 | Foundation tint | |
| Carbon | --carbon | #201D24 | Primary text | |
| Graphite | --graphite | #625D68 | Secondary text | |
| Mineral | --mineral | #D7D3D8 | Border | |
| Night | ||||
| Night Canvas | --night-canvas | #17141B | Dark canvas | |
| Night Surface | --night-surface | #211C27 | Dark surface | |
| Soft White | --soft-white | #F7F4F9 | Dark text | |
| Semantic | ||||
| Success | --success | #187A55 | Confirmed completion or healthy state | |
| Success background | --success-bg | #E8F5EF | Behind success labels | |
| Warning | --warning | #9A5700 | Review, delay, or attention required | |
| Warning background | --warning-bg | #FFF1D8 | Behind warning labels | |
| Error | --error | #B42332 | Failure, recording loss, destructive action | |
| Error background | --error-bg | #FDEBEC | Behind error labels | |
| Information | --information | #2766A8 | Neutral operational information | |
| Information background | --information-bg | #EAF2FC | Behind information labels | |
| Private | --private | #625D68 | Restricted or inactive content | |
| Private background | --private-bg | #EEECEA | Behind private labels | |
| Modules | ||||
| Sales | --sales | #A74A64 | Module accent | |
| Service | --service | #237665 | Module accent | |
| Phone | --phone | #5B57A6 | Module accent | |
| Messaging | --messaging | #286B91 | Module accent | |
| AI / intelligence (light) | --ai-light | #556900 | Intelligence context on light UI | |
| AI / intelligence (dark) | --ai-dark | #C8E85A | Intelligence context on dark UI | |
| Alias | Points to |
|---|---|
--bg | var(--warm-canvas) |
--surface | var(--white) |
--soft | var(--ink-mist) |
--ink | var(--carbon) |
--muted | var(--graphite) |
--line | var(--mineral) |
--navy | var(--rapport-ink) |
--blue | var(--information) |
--blue-bg | var(--information-bg) |
--violet | var(--service) |
--violet-bg | color-mix(in srgb,var(--service) 10%,var(--white)) |
--teal | var(--success) |
--teal-bg | var(--success-bg) |
--amber | var(--warning) |
--amber-bg | var(--warning-bg) |
--red | var(--error) |
--red-bg | var(--error-bg) |
--slate | var(--private) |
--slate-bg | var(--private-bg) |