Design system

BITE Digital — visual language

Warm cream surfaces, assertive Banaras orange, generous radii, asymmetric grids, hatched empty states. Tokens live in src/styles/tokens.ts; CSS mirrors as--bd-* custom properties inglobals.css.

v0.1 · 9 May 2026
Color

Color

Brand orange used as a focal accent on warm cream surfaces.

Brand
Orange
#F26B1A
Orange hover
#FF8A3D
Orange pressed
#C45414
Orange soft
#FFE6D2
Orange wash
#FFF4EA
Surface
Cream
#F5F1EA
Surface
#FBFAF7
White
#FFFFFF
Ink
Ink
#0F0E0C
Text
#1A1A18
Muted
#6B6864
Faint
#A09C95
Border
Border
#ECEAE5
Border strong
#D9D5CC
Semantic
Success
#2A8E4A
Warning
#D99A1F
Danger
#C8362F
Neutral
#9AA1AE
Typography

Typography

Inter (sans). Tight tracking on display, loose on micro-labels.

Display / 36px
Compliance, made visible.
H1 / 28px
Today’s compliance
H2 / 22px
LinkedIn × CareerArc Testimonial
Subheading / 18px
Slipped past Tier 1 grace
Body / 14px
Director receives an in-app notification — the badge flashes in real time.
Caption / 13px
Auto-generated at 6:30 PM IST
Micro-label / 11px
ESCALATION
Buttons

Buttons

Chips & status pills

Chips & status pills

CARGOXNEWFilter ordersIn TransitLoadingPending LoadDeliveredAwaiting routeMaintenance
DonePendingSlippedN/A
Cards

Cards

Peterbilt 389

NEW
TRK-29599

Oceanic Logistics Yard

SH-39184 · Terminal 3 · Long Beach, CA
In Transit
Requested · 37 min ago
Highlighted

Pacific Cargo Distribution

SH-55028 · Terminal 2 · Seattle, WA
In Transit
Inputs

Inputs

🔍ShipmentCargoRoute
Slot grid (calendar / planner empty states)

Slot grid (calendar / planner empty states)

CAIU-1948
Available Slot
Available Slot
Available Slot
Reserved Slot
RFCU-2241
OOLU-2204
MSKU-348221
CMAU-992341
Pending Load
TCU-78124
FSCU-774920
Patterns

Patterns

Hatch · empty state
Dotted · subtle backdrop
Wash · marketing/hero
Spacing & radii

Spacing & radii

Radius
xs
6px
sm
8px
md
12px
lg
16px
xl
20px
pill
9999px
Spacing
space.0
0
space.1
4px
space.2
8px
space.3
12px
space.4
16px
space.5
20px
space.6
24px
space.8
32px
space.10
40px
space.12
48px
space.16
64px
Shadows

Shadows

shadow.sm
0 1px 2px rgba(15, 14, 12, 0.04), 0 1px 3px rgba(15, 14, 12, 0.03)
shadow.md
0 4px 8px rgba(15, 14, 12, 0.06), 0 2px 4px rgba(15, 14, 12, 0.04)
shadow.lg
0 12px 32px rgba(15, 14, 12, 0.12), 0 4px 8px rgba(15, 14, 12, 0.06)
shadow.xl
0 24px 64px rgba(15, 14, 12, 0.18), 0 8px 16px rgba(15, 14, 12, 0.08)
shadow.inset
inset 0 0 0 1px rgba(15, 14, 12, 0.04)