Style guide
Tokens, type, shape and the shared components every Logix surface builds on.
Colour
Spec §4.1 tokens, available as bg-*, text-*, border-*, fill-* and stroke-*.
Surfaces and text
- canvas#F4F3EFApp background
- card#FFFFFFCards
- ink#1A1A17Text
- ink-muted#6F6E69Meta text
- ink-subtle#9B9A94Decorative only
- line#ECEBE6Hairlines
- input#8D8C85Field borders, 3:1+
Brand
- forest#1B5E3BActive nav, primary
- forest-deep#174D31Feature cards
- gold#F5C419Apply, resolved
- gold-soft#FBEBB0Exception dots
- ask-gradient#F7CB45 → #7DB54BAsk Logix
Status and routes
- danger#E5484DLate, critical
- traffic#F04A23Congestion
- danger-tint#FDE8E3Exception badges
- danger-ink#BE3C26Text on danger-tint
- route-blue#2554E8Alternative route
- route-blue-soft#BFD0FAThis week
Temperature
- temp-ok#1F8A5BIn range
- temp-warn#E8A317Drift
- temp-bad#E5484DExcursion
- frost#E3EEFBFrozen chip
- frost-ink#2B5FA8Frozen text
- dry#F1ECE2Dry chip
- dry-ink#77674DDry text
Maps
- map-ground#F1F1EELand
- map-road#FFFFFFRoads, borders
- map-park#D9EBD6Parks
- map-water#CFE0F7Water
- map-served#E4EFE6Served states
Mobile
- pine#27493BDark cards
- lime#C9EE8EAccent cards, +
- lime-tint#EAF7D6Fresh chip
- lime-ink#2F6B2FText on lime-tint
- tangerine#FF8B4DNeeds you, pins
- lilac#E6A8ECAvatars, credits
- sky#C3D8F5Avatars, steps
- jet#111111Black pills, tab
Text pairs (WCAG AA, 4.5:1 or better)
- white on forest7.7:1
- white on forest-deep9.8:1
- danger-ink on danger-tint4.6:1
- lime-ink on lime-tint5.8:1
- frost-ink on frost5.4:1
- dry-ink on dry4.7:1
- ink on gold10.6:1
- lime on pine7.7:1
- ink-muted on card5.1:1
danger, traffic, temp-* and ink-subtle are for marks, lines and dots. Pair them with a text chip so status is never colour alone.
Type
Inter for UI text, Inter Tight for display and big numbers. Every metric is tabular.
- Console titleInter Tight · 40px
- Macon → Jacksonville
- KPIInter Tight · 52px
- $182K
- Mobile hero numberInter Tight · 48px
- 4,827
- Mobile headlineInter Tight · 34px
- Andre picks up 3:10–3:30 pm
- Card titleInter Tight · 20px
- Exception trends
- BodyInter · 15px
- Reefer RU-114 is drifting +2.5°F/hr near Tifton. Swapping at Waycross protects $86K of product.
- MetaInter · 13px
- Updated 12s ago · 1,069 loads this year
Shape
Radii from spec §4.3.
- Console buttons12px
- Cards24px
- Mobile cards28px
- Console frame32px
- Chips, pillsFull
Depth and utilities
Nearly flat cards, soft floating chips, a warm glow for Ask.
- shadow-cardCards: hairline plus a whisper
- shadow-floatFloating chips, tab bar
- shadow-glow-goldAsk Logix
Brand
A forest tile with an “L” whose foot becomes a route; a pine round mark for mobile.
Status chips
StatusBadge in every tone, with and without a dot; temperature-class and severity chips.
Long labels ellipsize inside a narrow parent.
KPI cards
- Loads in transit
- 24
- 16 East · 8 West
- On time (7 days)
- 94.2%
- Up 1.3 pts from last week
- Temp compliance (7 days)
- 99.1%
- Estimated prevention rate
- 53%
- Up from 41% last quarter
With align="foot" the label and sub-line share a baseline across the row, however the labels wrap.
- Loads in transit
- 24
- 16 East · 8 West
- Temperature compliance inside the safe band
- 99.1%
- 7 days
- On time
- 94.2%
- 7 days
- Prevented
- 53%
- This quarter
Load
DetailRow inside a SectionCard
Empty state
Empty card
EmptyCard replaces a whole list or page body; headingLevel puts its title in the page outline.
No lot matches “MCN-999999-Z”
Initials avatars
Seven tones, three sizes.
Local time
Formatted in the facility’s zone; identical on server and client.
Controls
shadcn/ui on Logix tokens: primary is forest, rings are forest, radius is 12px.