FRAYT Design System

Tailwind-style 50–950 ramps layered under shadcn-compatible semantic tokens, all in oklch.

The color system has two layers. Both live in app/globals.css and both are exposed to Tailwind v4 utilities.

Ramps (bg-shipper-500, text-danger-700) — raw 50–950 scales for the six system colors. Constant across light and dark mode. Reach for these when you need a specific tint: a subtle wash, a hover tone, a pressed state.
Semantic tokens (bg-primary, text-destructive, bg-driver, bg-info) — meaning-first names that map to specific ramp steps. They shift between light and dark mode automatically so shadcn-style components stay legible in either theme.

Prefer semantic tokens for UI you want to stay theme-aware. Reach for the ramp directly only when the semantic layer doesn't express the tint you need.

How It Works

@theme {
  /* Layer 1: the ramp */
  --color-shipper-500: oklch(0.745 0.171 55); /* brand #FF9500 */
  --color-shipper-400: oklch(0.79  0.16  55);
  --color-shipper-50:  oklch(0.97  0.02  55);
}

:root {
  /* Layer 2: semantic token points into the ramp */
  --primary:            var(--color-shipper-500);
  --primary-foreground: var(--color-shipper-50);
}

.dark {
  --primary:            var(--color-shipper-400); /* lighter in dark mode */
  --primary-foreground: var(--color-shipper-950);
}

Use them via Tailwind utilities: bg-primary, text-primary-foreground, bg-shipper-100, border-info-300, etc.

Color Ramps

Seven ramps cover the system. Each is 11 steps (50, 100, 200, …, 900, 950). The highlighted step is the one the light-mode semantic token points at.

The neutral ramp is the foundation that every grayscale semantic token sits on top of — --background, --foreground, --border, --muted, --accent, and the whole --sidebar-* family all reference steps of this ramp. Reach for bg-neutral-100 when you need a custom-tinted surface that's guaranteed to match the theme's --muted.

Neutral

Grayscale foundation for surfaces, borders, dividers, and body text. All grayscale semantic tokens reference steps of this ramp.

bg-neutral-50 … bg-neutral-950

Shipper Orange

Primary brand color — operator/shipper surfaces. Brand hex #FF9500 lives at step 500.

bg-shipper-50 … bg-shipper-950

Driver Blue

Driver-context surfaces only — never mix with shipper contexts. Brand hex #0066FF lives at step 500.

bg-driver-50 … bg-driver-950

Success

Confirmations, success states.

bg-success-50 … bg-success-950

Warning

Non-blocking warnings and cautions.

bg-warning-50 … bg-warning-950

Danger

Errors, destructive actions. --destructive aliases this.

bg-danger-50 … bg-danger-950

Info

Informational states, tooltips, and help/reference content. Cyan/teal to stay distinct from driver blue.

bg-info-50 … bg-info-950

Semantic Tokens

Core

Background

--background

Foreground

--foreground

Primary

--primary

Primary Foreground

--primary-foreground

Secondary

--secondary

Secondary Foreground

--secondary-foreground

Surfaces

Card

--card

Card Foreground

--card-foreground

Popover

--popover

Popover Foreground

--popover-foreground

Muted

--muted

Muted Foreground

--muted-foreground

Interactive

Accent

--accent

Accent Foreground

--accent-foreground

Destructive

--destructive

Success

--success

Success Foreground

--success-foreground

Warning

--warning

Warning Foreground

--warning-foreground

Danger

--danger

Danger Foreground

--danger-foreground

Driver

--driver

Driver Foreground

--driver-foreground

Info

--info

Info Foreground

--info-foreground

Border

--border

Input

--input

Ring

--ring

Chart

Chart 1

--chart-1

Chart 2

--chart-2

Chart 3

--chart-3

Chart 4

--chart-4

Chart 5

--chart-5

Sidebar

--sidebar

Sidebar Foreground

--sidebar-foreground

Sidebar Primary

--sidebar-primary

Sidebar Accent

--sidebar-accent

Sidebar Border

--sidebar-border

Usage Guidelines

Prefer semantic tokens (bg-primary, text-muted-foreground, bg-driver) for UI that needs to stay theme-aware. Drop down to a ramp step (bg-shipper-100, text-danger-700) only when you need a specific tint that the semantic layer doesn't expose.

Pairing Rules

Every background token has a corresponding foreground token for text:

Background	Foreground	Use
`bg-background`	`text-foreground`	Page-level content
`bg-primary`	`text-primary-foreground`	Primary (shipper) buttons, badges
`bg-secondary`	`text-secondary-foreground`	Secondary actions
`bg-muted`	`text-muted-foreground`	Subdued content, captions
`bg-card`	`text-card-foreground`	Card surfaces
`bg-destructive`	`text-destructive-foreground`	Error states, delete actions
`bg-success`	`text-success-foreground`	Success confirmations
`bg-warning`	`text-warning-foreground`	Warning alerts
`bg-danger`	`text-danger-foreground`	Error and danger states
`bg-driver`	`text-driver-foreground`	Driver-context primary surfaces
`bg-info`	`text-info-foreground`	Informational callouts

When To Use A Ramp Step Directly

Subtle surface fills: bg-success-50 for a success-tinted card background with text-success-700 copy.
Hover / pressed states: base at bg-shipper-500, hover at bg-shipper-600, pressed at bg-shipper-700.
Borders and dividers on tinted surfaces: border-warning-200 on a warning banner.
Charts / multi-series visuals where distinct tints per step are needed.

Chart Colors

The five chart tokens (chart-1 through chart-5) provide a consistent palette for data visualization. They progress from warm to cool tones and maintain sufficient contrast between adjacent values.

Colors