§ 01

The laws

From the Liton Design System Package v1.0 and the UX SOP. Components below assume all of them.

L-01Flat, square, hairlined. No radius above 0, no shadows, no gradients. Surfaces separate by 1px lines and background steps, nothing else.

L-02Two typefaces, roles never swap. Inter Tight carries display and body. JetBrains Mono carries eyebrows, labels, chips, IDs, and any number that is the protagonist.

L-03Amber is earned. One primary CTA per section, at most one filled-amber KPI per board, one amber bar per chart. Amber is fill or ring on light grounds — as text it renders through --accent-text.

L-04One meaning per color. The four status colors mean completed / warning / failed / future everywhere — never selected, never hover, never theme.

L-05One italic word per headline, colored through the amber text token. Two italics = none.

L-06Every color flows through a token. Literals are legal only on committed navy surfaces (covers, chrome). This is what makes 18 renderings from one stylesheet possible.

L-07Numbers get doors. A count or KPI that cannot be clicked is a report, not an interface. Tiles, strips, and numbers are buttons.

L-08Motion is state made visible. Three moves only: 120ms hover, 0.2s state fill, 2s staleness ring. Reduced-motion collapses all of them.

§ 02

Color tokens

The live swatch column renders the current axis setting — flip theme or contrast and watch it move.

Token	Role	Light	Dark
--bg · --bg-2 · --bg-3	Surface steps	#FFFFFF · #F7F7F7 · #ECECEC	#0E1622 · #151F2D · #1C283A
--card	Card ground	#FFFFFF	#151F2D
--ink	Primary ink	#00274A	#E7EDF4
--ink-2	Secondary ink / body	#01426A	#C2CCD8
--ink-3	Labels · captions	#5F6672 (pkg #6E7783 = calm)	#8A97A8
--line · --line-2	Hairlines strong · subtle	#C8C8C8 · #E8E8E8	#2D3B4E · #243142
--accent	Amber — fill / ring, constant	#FBB715	#FBB715
--accent-text	Amber as type (DV-06)	#9A6700	#F2C766
--accent-tint	Featured panel · one per surface	#FFF1CF	#3A2D09
--ok / --ok-bg	Completed	#1F7A4D / #E8F3EC	#9BDDB5 / #173A29
--warn / --warn-bg	Warning	#A34A05 / #FFF1CF	#F5D07A / #4A3606
--bad / --bad-bg	Missing · failed	#8A1C1C / #FBEAEA	#F3A3A3 / #4A1C1C
--future / --future-bg	Scheduled · inert (dashed)	#5F6672 / #F7F7F7	#8A97A8 / #1C283A
--navy-fixed set	Committed navy surfaces	#00274A · mut #9FB1C4 · line #103A5E · ok #4FB27E — identical in every mode
--heat-1…4	Activity ramp — four stops, never red	#FFF1CF · #FBD76A · #FBB715 · #D99500	#3A2D09 · #8A6A10 · #FBB715 · #F2C766
--sel-bg	Hover / selected ground	#FFF8E6	#2A2410
--focus / --focus-w	Focus ring · width	#00274A · 2px	#FBB715 · 2px

What each contrast level changes

Level	Intent	Overrides	Guaranteed floor
Calm	Long reading sessions, print-adjacent review	Softer hairlines; labels return to the package’s original slate #6E7783	AA (4.5:1) for body on white/card; micro-labels on tinted surfaces may ride ≈4.2:1
Normal	The shipping default	— (base tokens, incl. the DV-06 AA nudges)	AA (4.5:1) everywhere, both themes — verified by computed ratios
High	Low vision, bright rooms, projector demos, long shifts	Darker/lighter inks and status colors, stronger hairlines, 3px focus ring, 1px border on every pill — and the type itself gets easier: body 14.5px at weight 500, headings and every mono label step to 600, fine print bumps ≈1px, tracking relaxes to 0	≈AAA (7:1) for body and labels; 3:1+ on all boundaries; least-strain type

§ 03

Type scale

Twelve tokens from Design System file 03. Tracking eases negative as size grows; mono opens wide at small sizes. Density never touches type.

--display-2 · 72/0.94/−.04em

Find by attribute.

--display-3 · 56/0.98/−.035em

3,247 SKUs. One catalog.

--h1 · 40/1.02/−.03em

Quote Q10482 · Harborview

--h2 · 28/1.05/−.025em

One queue. It can reach zero.

--h3 · 22/1.1/−.02em

Stage · legal next moves

--body-l · 17/1.65

The lede face. One short paragraph under a display headline.

--body-m · 14/1.65

Default body, web and email. Verbs first, numbers next, adjectives last.

--body-s · 12/1.6

Captions and footnotes. Minimum body size — never smaller.

--eyebrow · JBM 11/+.22em

Lead → Opportunity → Quote → Order

--label · JBM 10/+.14em

Manufacturer rep · ESD · Territory

--mono-l · JBM 14/1.5

LR4-30-90-WH-JA8 · $48,200 · 1,248 lm

§ 04

Density

Three settings, switched per user in My Admin. Density moves space and control padding only — type sizes, hairlines, and color never change.

Token	Governs	Compact	Standard	Comfortable
--d-cell-y / -x	Queue and feed row padding	8 / 12	13 / 16	18 / 20
--d-card	Card body padding	12	16	24
--d-gap	Grid gaps between cards	12	18	24
--d-ctl-y / -x	CTA padding	8 / 14	12 / 20	14 / 24
--d-act-y / -x	Action-chip padding	4 / 8	6 / 10	8 / 14
--d-table-y / -x	Table cell padding	8 / 12	12 / 14	16 / 18
--d-kpi	KPI tile padding	12	18	24
--d-strip-y / -x	Count-strip cell padding	10 / 12	14 / 16	18 / 20

All values sit on the 8pt scale (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128) — no half steps. Compact is for ISS working screens (Do, Lists); Comfortable is for Learn, Admin, and review surfaces; Standard everywhere else. On mobile, touch targets hold the 44×44 floor at every density.

§ 05

Components

Live — rendered from the stylesheet at the current axis setting. Class names match the mockup one-to-one.

CTAs .cta · three tiers, never four · one primary per section

Action chips .act-b · row work · verb-led (DV-03)

Chips & pills .chip filters · .pill status · .sla clocks

Completed Warning Failed Scheduled Open 3D OVERESD 2DTODAY

KPI tiles .kpi · one number, one label, one trend · every tile is a door

Count strip .strip · every number is a door

Queue row .qrow · the reason it is here + the clock, always

Q10482Quote

Follow-up date passed 3 days ago

$48,200Harborview Medical TowerBeacon Reps NEday 77 of 90

3D OVER

HF-0142Handoff

Manuel Muñiz needs the paint spec confirmed for SO-88623

Due tomorrowFrom Customer ServiceWaiting on you

DUE 1D

List table table.lt · first column is a business number · navy underline on the header

Quote	Project / job	Stage	Value	Past due
Q10482	Harborview Medical Tower	Follow-up	$48,200	3 d
Q10102	Mercer Street Lofts	Open	$112,000	34 d

Stage strip .stages

Open

Follow-up

Revised

Won

Key-value grid .kv

Value

$48,200

Agency

Beacon Reps NE · Dana Ortiz

Issued · expires

Jun 16 · day 77 of 90

Form field .fld · mono label above, navy focus stroke

Project / job name

Trail .tev · actor + timestamp + changed-from → changed-to

Stage FOLLOW-UP → WON · order SO-88901 linked

SEP 01 · 9:41A · M.SEVILLANO

Note · “GC pushing on price — holding at list.”

AUG 11 · 3:12P · M.SEVILLANO

Stage OPEN → FOLLOW-UP

JUL 22 · 9:41A · M.SEVILLANO

Bars & heat .brow sorted, one amber · .heat four stops

Beacon Reps NE

$6.2M

Corelight Partners

$4.8M

Meridian West

$3.9M

none · light · steady · heavy · peak · future

Callout .note · amber-tint · one per surface

Earned: the amber-tint panel appears at most once per surface, or it stops meaning anything.

§ 06

The menu

Top bar + surface nav — the one frame every module ships inside. Fixed order, learned once, held everywhere. Live below at the current axis setting.

Surface content renders here
narrow the window to see the mobile strip

Anatomy — every measurement

Part	Spec	Rules
.topbar	Sticky · height --d-topbar (48 / 56 / 64 by density) · 1px bottom hairline · 18px gaps · 20px side padding. Chrome tokens: white ground + navy ink in light; committed navy #00274A in dark, so the white logo merges seamlessly.	Present on every page of every module. Order is fixed: logo · divider · module label · search · compose · user.
.topbar .logo-l / .logo-d	Approved PNG lockups at 24px tall — the digital minimum. Navy-transparent on light chrome, white-on-navy on dark. Clear space = cap-height of the “L”.	PNG only, never SVG. Fallback: “LITON” in Inter Tight, all caps. Never recolor, stretch, or crowd.
.topbar .mod	Module label · mono 10.5px · +0.22em · uppercase · chrome-muted.	Names the module (“One · Sales CRM”) — the user always knows which sibling they are in.
.topbar .search	Flex · max 520px · 1px chrome border · 7×12px padding · 12.5px text · ⌘K hint chip · amber border on hover.	Universal search on every page — never only on Find. Opens the Command Bar; an unambiguous number lands on the Record.
.topbar .plus	34×34 · 1px border · hover fills amber with navy glyph.	The Compose affordance — always top-right, on every page (Create Quote · Log Interaction · Raise Handoff).
.topbar .me	User chip · mono 10px · uppercase · 1px border.	Name + role — role scoping is row-level security, not hidden UI.
.snav	212px column · 1px right hairline · pinned rail at the bottom.	The seven surfaces, fixed order #1–#7, all present always — a module with nothing for a slot ships the stub.
.snav .nv	Item: mono index 9.5px + Inter Tight 13.5px/500 label · padding --d-nav-y × 18px (6 / 9 / 12 by density) · hover = bg step · 120ms.	Labels carry scent (“Do”, “Find”), never schema. High contrast bolds them to 600.
.snav .nv.on	Active: 2px amber left border + bg step + full ink · carries aria-current="page".	The nav’s single earned amber. On mobile it becomes a 2px amber underline.
.snav .bdg	Badge: amber fill · navy 10px mono · weight 600.	Only on Do — the live queue count. A number here is a promise the Queue can cash.
.snav .rail · .pin	Pin rail: bottom-anchored · mono 10.5px rows · 5px dot. Stale pin: warn dot + the 2s ring pulse.	Per-user bookmarks, on every page; flagged at 30 days, never silently removed; the full set lives in My Admin.
@media ≤980px	The column becomes a horizontal scroll strip; groups and rail hide; active state moves to the amber underline; touch targets hold 44×44.	Pins stay reachable from My Admin (#7).

§ 07

Articles — the Learn page

Surface #6: “I don’t know how this works, or what happens next.” Retrieve · Prove. How-to articles, product rules, the report catalogue, and the stage-map pages all wear this form.

Help / Learn/How-to/Quoting

Create a quote.

Standard and existing items only — custom fixtures keep today’s path until the rules engine lands. Saving does the paperwork for you.

Updated · Aug 27Owner · M.SevillanoApplies to · CRM v1

Open the Composer from the Plus icon — top right, on every page — or press ⌘K and type “new quote”. It is a workspace, not a form: drafts survive interruption.

Add lines by part number. Each part links to its spec sheet; lead time is opt-in, live from the Item Record.
Check the rules the Composer surfaces — special minimum order and finish MOQ show per line, before you save.
Save. The quote logs itself, a follow-up task is created, and the 90-day expiry clock is stamped.

What fires on save

Three consequences, none typed: the quote lands in your Queue on its follow-up date, the Trail opens with the issue event, and day 75 arms the near-expiry reminder.

One callout per article. Use it for the single thing that prevents a support call — here: a quote marked Won must link a sales order first.

Raises a Handoff to the owner

Rule	Detail
MEASURE	One reading column, .article max 68ch, left-aligned. No second column of prose, ever.
TITLE	Verb-led, like every Liton line: “Create a quote.” · “Read the order chain.” Never “Quoting overview.” One italic amber word allowed, rarely spent.
HEAD	Breadcrumb → title → one lede → meta line. The meta is mandatory: Updated · Owner · Applies-to. An article nobody owns is a rumor.
BODY	14px/1.7 in secondary ink; h2s open with a hairline top rule; links underlined — color alone never carries a link. Every object mentioned links to its Record.
STEPS	Numbered with mono 01 02 03 markers (.steps), one action per step, hairline-separated.
CALLOUT	At most one amber-tint .note per article — the one thing that prevents a support call. Everything else is body.
RULES & TERMS	Product rules render as .term cards (mono term + plain-language line) — the “engineering rules nobody wrote down,” written down.
STAGE MAPS	The state-machine page embeds the real .stages strip + the legal-moves table — stages, preconditions, who may, what fires. Never a drawn diagram that can drift.
ADDRESS	Every article is a real page — /crm/help/{slug} — shareable, back-button safe, listed in the report catalogue with a one-line purpose.
FEEDBACK	“Flag as outdated →” on every article raises a Handoff to the owner — doc rot becomes a measurable state with a clock, like everything else.
DENSITY	The reading column keeps its own rhythm at every density — user density governs the chrome around it, never the prose.
VOICE	Quiet, technical, plain. Explain the system’s behavior, not the reader’s feelings. No marketing voice, no banned words, no exclamation points.

§ 08

Motion

Three moves, proposed as DV-01 — state made visible, never decoration. Reduced-motion collapses everything to instant.

Move	Spec	Used for	Live
HOVER	120ms ease	Hover and selection on chips, rows, tiles, nav
STATE FILL	0.2s width · then color flip	Stage advance, progress bars, verdict flips	Won
STALENESS RING	2s flat outline pulse	Stale pins (30-day rule), invalidated ESDs, breached SLAs	Not opened in 30 days

§ 09

Accessibility floor

The SOP’s floor is WCAG 2.1 AA. The Normal contrast level is the shipping default and meets it in both themes.

A-01Contrast: 4.5:1 body text, 3:1 large text and boundaries, at Normal. High targets ≈7:1. Calm relaxes hairlines only — never body text on white/card.

A-02Focus: every action keyboard-reachable, ring = var(--focus) at var(--focus-w) (3px in High). Try Tab on this page.

A-03Touch: 44×44 minimum on mobile at every density — compact shrinks padding, not targets.

A-04Never color alone: status carries a dot + a word; the flagged bar carries a text marker; trends carry arrows.

A-05State is programmatic: toggles carry aria-pressed, the active surface carries aria-current, counts and stage labels are live regions.

A-06Reduced motion is honored globally — all three moves collapse to instant.

A-07The DV-06 caveat: the package’s approved amber-2 #D99500 passes at no size on white. Amber-as-text therefore renders through --accent-text (#9A6700 light / #F2C766 dark) — pending Eman’s gate, this is the standing rule.

§ 10

Consume it

One stylesheet, three attributes. Density and contrast are per-user settings — surface them in My Admin (#7).

<!-- 1 · load the system (self-host approved for both faces) -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;1,500&family=JetBrains+Mono:wght@400;500;600&display=swap">
<link rel="stylesheet" href="liton-one-ui.css">

<!-- 2 · set the axes (all optional; unset = system / normal / standard) -->
<html data-theme="dark" data-contrast="high" data-density="compact">

/* 3 · per-user, from My Admin: */
document.documentElement.dataset.density = user.prefs.density;   // "compact" | "" | "comfortable"
document.documentElement.dataset.contrast = user.prefs.contrast; // "low" | "" | "high"
// theme: leave unset to follow the OS; stamp "light"/"dark" to override

/* 4 · build with the classes on this page:
   .topbar .snav (the menu) · .cta .act-b .chip .pill .sla .kpi
   .strip .qrow .lt .kv .stages .tev .brow .fstage .fld .note .heat
   · t-* type tokens
   New component needed? Route to design — don't invent. */

The stylesheet lives next to the mockup: …\LITON One CRM\Claude Code- Eman Laptop\liton-one-ui.css. It carries the full token matrix (2 themes × 3 contrasts × 3 densities = 18 renderings), every component above, and the motion vocabulary — values traceable to Design System Package v1.0 with deviations DV-01/02/06 marked in-file. Status colors and glyphless dot-pills are internal-only; nothing here ships customer-facing.

Nine colors. Two faces. Three axes. One language.