Skip to content

PUBLIC REFERENCE

Workable

Clean canvas, purposeful accents

2026-04-30 Source style Original site
Workable captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Canvas Porcelain #fff5ee

Page background, primary light surface

White #ffffff

Card backgrounds, elevated UI elements

Midnight Ink #0f161e

Primary text, strong headings, dark UI elements

Harbor Mist #333942

Subtle text, muted links, secondary information

Forest Canopy #012620

Dark section backgrounds, hero background, decorative fills

Deep Teal #004038

Primary text color for navigation and headings, outlined button borders, active states

Fresh Teal #00f5dc

Card backgrounds, tag backgrounds, vibrant accents; Key product graphic fills, vibrant UI elements

Muted Sage #00544c

Secondary text, sub-brand accents, borders

Soft Peach #fde8ce

Informational card backgrounds, subtle highlight surfaces

Muted Mandarin #ffdcbf

Accent card backgrounds

Sky Haze #bee9f4

Accent card backgrounds

Lime Glow #d5ff4d

Decorative stroke, vibrant highlighting in illustrations

Spring Bud #7edcaf

Highlight text, decorative fills and borders

Do

  • Use Proxima Nova for all text elements to maintain typographic consistency.
  • Apply 16px border-radius to all cards and buttons for a unified, soft edge.
  • Utilize Forest Canopy (#012620) for dark section backgrounds and Deep Teal (#004038) for primary action outlines or filled navigation buttons.
  • Employ 32px padding for internal card content and around main section elements.
  • Maintain an 8px elementGap between smaller UI components for comfortable dense layouts.
  • Prioritize Canvas Porcelain (#fff5ee) as the primary page background to create a clean, light base.
  • Use Fresh Teal (#00f5dc) and Soft Peach (#fde8ce) as background tints for cards to visually group or highlight content.

Don't

  • Avoid arbitrary color usage; reserve brand and accent colors for functional roles or distinct highlights, not general decoration.
  • Do not introduce complex shadows or extreme elevation; the design favors flat surfaces and subtle distinctions.
  • Refrain from using overly decorative fonts; stick to Proxima Nova and Source Serif Pro for a clear, modern appearance.
  • Do not deviate from the established 16px and 8px border-radii; random smaller or larger radii will break visual cohesion.
  • Avoid dense, unbroken blocks of text; break content with headings, lists, and visual components.
  • Do not use dark backgrounds for general page content; restrict them to hero sections or distinct visual breaks.
  • Refrain from using system default link colors; ensure all links use either Midnight Ink (#0f161e) or Harbor Mist (#333942) unless an explicit accent link style is defined.