Foundations

Color

The Woodruff Sawyer Connect color library — from raw palette to semantic tokens. All values sourced directly from the Figma design file.

Primary Brand Colors

The three core brand colors. WS Green 01 drives primary actions and interactive states. WS Dark 01 anchors navigation surfaces and deep backgrounds.

WS Green Scale

Tints built from WS Green 01. Used for interactive backgrounds, focus rings, hover states, and success semantics.

Dark Navy Scale

Tints built from WS Dark 01 (#1F2A44). Used for the topbar, sidebar gradient, and deep surfaces.

Secondary — Extended Brand

A teal-blue scale anchored at Secondary 04 (#34657F). Used for accent buttons and secondary brand expression.

Neutrals

Ten shades of gray used on borders, text colors, and backgrounds — from Black 100 to White. Values are exact from Figma.

Utility Colors

Semantic meaning colors — used for claim status tracking. Green = acceptable time window, Yellow = warning time window, Red = dangerous time window.

Semantic aliases

These are the tokens you reference in product code — never raw palette values. Changing a palette token here cascades to every component automatically.

TokenMaps toPreviewUsage
--color-bg-canvasgray-50 / #F8F8F8
App/page background
--color-bg-surfacegray-0 / #FFFFFF
Cards, panels, modals
--color-bg-subtlegray-100 / #F2F2F2
Hover states, table stripes
--color-bg-brandWS Green 01 / #319B42
Primary buttons, checkboxes, progress
--color-bg-inverseWS Dark 01 / #1F2A44
Dark nav surfaces
--color-text-primarygray-900 / #0A0A18
Headings, body copy
--color-text-secondarygray-600 / #585A66
Supporting text, captions
--color-text-brandWS Green 01 / #319B42
Links, active states
--color-border-defaultgray-300 / #D3D3DB
Input borders, dividers
--color-border-focusWS Green 01 / #319B42
Focus rings
--color-danger-solidred-500 / #DB3131
Error messages, destructive actions
--color-warning-solidamber-500 / #FFB900
Warning banners, claim time windows
--color-success-solidgreen-500 / #319B42
Success states, acceptable time window

Usage

Use WS Green 01 for the single primary action on a screen
Don't use brand green for multiple competing primary actions at once
Contrast minimums

Text on a solid background must meet 4.5:1 contrast (3:1 for text ≥ 24px or bold ≥ 19px). All semantic text/background pairs in this system have been chosen to pass WCAG AA.