What is Dub’s primary brand color and where does it appear?

Dub’s primary brand color is #2563eb, a medium‑blue hue that surfaces on every interactive element. It colors navigation links, the focus ring on inputs (via the --tw-ring-color variable), and the background of primary call‑to‑action buttons. The color also appears in SVG icons and hover states, ensuring a unified accent across the UI.

How does Dub achieve visual hierarchy without heavy shadows?

Dub replaces traditional drop‑shadows with a 1‑pixel #e5e5e5 hairline border that outlines cards, tables, and input fields. This “hairline‑as‑elevation” approach creates a subtle depth cue that scales uniformly, keeping the interface lightweight while preserving a clear separation between layers. The technique also reduces rendering cost on low‑end devices.

Which typefaces are used for code snippets versus body copy?

Code snippets employ the GeistMono stack (GeistMono, ui‑monospace, SFMono‑Regular, …) at 14px weight 400, delivering a monospaced feel that aligns with developer expectations. Body copy, headings, and UI labels use Inter (Inter, "Inter Fallback", system‑ui, sans‑serif) across a range of sizes from 10px to 14px, providing a clean, legible sans‑serif experience throughout the product.

What status colors does Dub provide and how are they applied?

Dub defines three status colors: #dcfce7 for success (light green), #fb923c for warning (orange), and #d32f2f for error (red). These tokens appear on badge components, alert banners, and form validation messages. Each status color pairs with a contrasting text color drawn from the ink palette to maintain readability.

How are spacing and radii tokens structured for consistency?

Spacing tokens follow a linear scale from 1px (xxs) up to 16px (xl), with intermediate steps at 2px, 4px, 6px, 8px, and 10px, mirroring the most frequent values observed in the live site. Radii tokens include none (0px), sm (2px), md (4px), lg (6px), xl (8px), and full (9999px) for fully rounded elements such as avatars. This systematic approach ensures that margins, paddings, and corner rounding remain harmonious across all components.

Dub Design System

Dub’s design system uses a #2563eb blue primary accent, Inter typeface across headings and body, and a white canvas background.

About Dub DESIGN.md

Curated by Dov AzencotUpdated May 14, 2026Source dub.co

Design & Creative Tools

The Dub homepage opens on a pure white canvas (#ffffff) framed by dark #171717 body copy and a #2563eb blue link accent that threads through navigation, buttons, and focus rings. The hero heading uses a large satoshi typeface at 48px, while the body text settles into Inter 14px‑20px line‑height, establishing a clear hierarchy without decorative flourishes. A distinctive 1‑pixel #e5e5e5 hairline border runs around cards, tables, and input fields, acting as the system’s sole elevation mechanism and reinforcing visual consistency across the interface.

Inside this DESIGN.md file live a total of 60 raw color samples collapsed into 50 clustered tokens, organized into primary, neutral, and status groups. The token set includes 17 named colors, 15 typography roles, 7 rounded radii, and 9 spacing steps. The component library covers navigation, forms, data display, and feedback patterns, totaling 22 distinct components. All values follow the Google Labs design‑system spec, exposing CSS variables and Tailwind‑compatible tokens for seamless integration.

Developers can import this JSON into Claude, Cursor, or Copilot to generate component scaffolding, or reference the tokens directly in Tailwind config or CSS‑var declarations such as var(--colors-primary) and var(--font-inter). Because the system is grounded in real‑world usage data, it offers a pragmatic case study of how a data‑driven token strategy can reduce visual noise while preserving brand identity.

What makes it distinct

Primary accent#2563eb blue appears on interactive links, focus rings, and button backgrounds, providing a consistent visual hook across the product.
Hairline elevation#e5e5e5 1‑pixel borders replace heavy shadows, creating a subtle depth cue that scales across cards, tables, and input fields.
Neutral palette#171717 ink and #404040 body text deliver strong contrast on the #ffffff canvas while preserving a low‑key aesthetic.
Status colors#dcfce7 success, #fb923c warning, and #d32f2f error tokens give immediate feedback without relying on additional graphics.

Live at dub.co

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

dub.co

Explore Dub

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Dub design system FAQ

Common questions about Dub's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Dub — official site

Dub's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.