# Dub — Design System
> The modern link attribution platform for short links, conversion tracking, and affiliate programs.
- **Canonical:** https://uiuxskills.com/library/dub
- **Source:** https://www.dub.co
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:54.089Z

---

---
version: alpha
name: Dub
description: The modern link attribution platform for short links, conversion tracking, and affiliate programs.
tone: >-
  Professional, data-driven, and efficient. The tone is direct and product-focused, emphasizing
  clarity and actionable insights.
color-scheme: light
colors:
  primary: "#3B82F6"
  secondary: "#A855F7"
  surface: "#FFFFFF"
  surface-dim: "#F9FAFB"
  neutral-900: "#171717"
  neutral-600: "#525252"
  error: "#C73E33"
  success: "#14B8A6"
  outline: "#E5E5E5"
  focus-ring: "#3B82F6"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 3rem
    fontWeight: 700
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 2.25rem
    fontWeight: 600
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 1.875rem
    fontWeight: 600
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 1.5rem
    fontWeight: 600
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 1rem
    fontWeight: 400
  body-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.875rem
    fontWeight: 400
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 0.75rem
    fontWeight: 500
rounded:
  sm: 2px
  md: 6px
  lg: 8px
  xl: 12px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "#FFFFFF"
    typography: "{typography.label-sm}"
    width: auto
  button-primary-hover:
    backgroundColor: "#2563EB"
    textColor: "#FFFFFF"
  button-secondary:
    backgroundColor: "#FFFFFF"
    textColor: "{colors.neutral-900}"
    borderColor: "{colors.outline}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "{colors.primary}"
  link-hover:
    textColor: "#1D4ED8"
  badge:
    backgroundColor: "#F3F4F6"
    typography: "{typography.label-sm}"
  badge-success:
    backgroundColor: "#CCFBF1"
    textColor: "{colors.success}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  card-dim:
    backgroundColor: "{colors.surface-dim}"
    rounded: "{rounded.md}"
    padding: 16px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-neutral-600:
    backgroundColor: "{colors.neutral-600}"
    rounded: "{rounded.sm}"
    size: 32px
  swatch-focus-ring:
    backgroundColor: "{colors.focus-ring}"
    rounded: "{rounded.sm}"
    size: 32px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.05)
  md: 0 4px 6px -1px rgba(0,0,0,0.1)
  lg: 0 10px 15px -3px rgba(0,0,0,0.1)
---

## Overview

Dub is a high-performance, developer-centric link attribution platform designed with a clean, enterprise-grade aesthetic. The visual identity prioritizes data density and functional clarity, using a professional, direct tone to support complex marketing and analytics workflows.

## Colors

The color palette is built for high-contrast readability and clear status indication, utilizing a neutral foundation with vibrant accents for interactive elements.

*   Primary (#3B82F6): The core brand color used for primary CTAs and active states.
*   Secondary (#A855F7): Used for secondary highlights and accent elements.
*   Surface (#FFFFFF): The primary background color for the application and marketing site.
*   Surface-dim (#F9FAFB) (inferred): A subtle background color used to differentiate section containers.
*   Neutral-900 (#171717): The primary text color for high-contrast headlines and body content.
*   Neutral-600 (#525252): Secondary text color for descriptions, metadata, and labels.
*   Error (#C73E33): Used for negative metrics, critical alerts, and error states.
*   Success (#14B8A6): Used for positive conversion metrics and success indicators.
*   Outline (#E5E5E5): The standard border color for cards, inputs, and structural dividers.
*   Focus-ring (#3B82F6) (inferred): The highlight color applied to interactive elements during focus states.

## Typography

The typography system relies exclusively on the Inter font family to maintain a clean, professional, and readable interface across all data-dense views.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for major section headers.
*   Headline-lg (inferred): Used for feature section titles.
*   Headline-md (inferred): Used for sub-headers.
*   Body-md: Standard paragraph text for primary content.
*   Body-sm: Secondary body text and descriptive metadata.
*   Label-sm: Small labels, UI metadata, and button text.

## Layout

Dub utilizes a responsive grid system centered within a max-width container, ensuring consistent alignment across viewports. The design follows a 4px base spacing unit, with a standard 16px gutter for grid components. The page pattern follows a logical flow: nav, hero, social-proof, features, analytics, integrations, partners, and footer. The hero section is characterized by a centered headline and subhead with primary/secondary CTA buttons, followed by a product screenshot. Responsive behaviour is mobile-first, with navigation collapsing into a mobile menu on smaller screens.

## Elevation & Depth

Elevation is applied sparingly to provide subtle visual hierarchy between content layers. The shadow weights are consistent across the interface: `{elevation.sm}` provides a light lift for cards, `{elevation.md}` is used for interactive popovers or dropdowns, and `{elevation.lg}` is reserved for modal or drawer overlays.

## Shapes

The design language employs a functional approach to corner radii. A `{rounded.full}` value is strictly reserved for buttons and pill-shaped UI elements to emphasize interactivity. Content cards and containers utilize `{rounded.lg}` to maintain a modern, soft-edged appearance, while smaller UI elements like inputs and swatches use `{rounded.md}` or `{rounded.sm}` for a tighter, more compact feel.

## Components

> **Note:** This spec was generated from a website scrape and contains visual approximations.
> For production use, add a deep reference to each component pointing to its authoritative
> source (Storybook story, metadata file, or component spec):
> `→ Deep reference: src/components/Button/metadata.ts`


### Button
Buttons use `{colors.primary}` for primary actions and a white background with `{colors.outline}` for secondary actions. Always apply `{rounded.full}` to ensure the pill-shaped aesthetic required for all interactive buttons.

### Card
Cards are the primary container for data and features, utilizing `{colors.surface}` with a `{colors.outline}` border and `{rounded.lg}` corners. Use `{card-dim}` for secondary content areas to create visual separation without adding extra elevation.

### Input Field
Input fields feature a clean `{colors.surface}` background with an `{colors.outline}` border. On focus, the border must transition to `{colors.focus-ring}` to provide clear accessibility feedback.

### Badge
Badges are used for status indication, utilizing `{typography.label-sm}`. Use `{badge-success}` for positive indicators and `{badge-error}` for negative states, ensuring consistent padding and corner radius.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Use `{colors.primary}` for non-interactive text. |
| Apply `{rounded.lg}` to all content cards for consistency. | Use sharp corners on buttons; always use `{rounded.full}`. |
| Use `{typography.body-sm}` for secondary metadata and labels. | Mix font families; stick to the Inter sans-serif stack. |
| Maintain `{spacing.md}` between major content sections. | Use excessive shadows; keep card elevation to `{elevation.sm}`. |
| Use `{colors.success}` for positive conversion metrics. | Use `{colors.neutral-900}` for secondary text. |
| Apply `{colors.error}` for negative metrics or critical alerts. | Apply `{typography.display-lg}` to standard body text. |
| Use `{colors.outline}` for card and input borders. | Use high-contrast black borders on light surfaces. |
| Use `{rounded.md}` for input fields. | Use `{rounded.full}` for input fields. |

## Content Style

CTA labels should be written in imperative verbs using sentence case, keeping them concise (e.g., "Start for free" or "Learn more"). 

Headings are benefit-driven and declarative, focusing on the outcome for the user rather than just describing a feature. 

Copy density is designed to be scannable. Use short paragraphs, frequent bullet points, and clear headings to break up complex technical information, ensuring the content remains accessible and efficient.

## Imagery & Icons

The imagery style is mixed, combining clean, high-fidelity product screenshots with subtle shadows for depth. Feature representations rely on high-quality vector icons that match the minimal, enterprise-focused aesthetic. All imagery should be treated with a focus on clarity, ensuring that screenshots are legible and icons are used to reinforce, rather than distract from, the data-driven content.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Dub, a minimal enterprise link attribution platform. Match its professional, data-driven tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by its token name — `{colors.primary}`, `{typography.body-md}`, `{spacing.md}`, `{rounded.lg}` — never hardcode hex values, font sizes, or pixel values.
2. Use only the component variants defined under `components:`. Do not invent states, sizes, or variants absent from the spec.
3. Follow the Shapes narrative strictly: `{rounded.full}` for buttons only; `{rounded.lg}` for cards; `{rounded.md}` for inputs; `{rounded.sm}` for badges and swatches.
4. Apply elevation tokens sparingly: `{elevation.sm}` for cards, `{elevation.md}` for dropdowns/popovers, `{elevation.lg}` for modals only.
5. When a user request conflicts with the Do's and Don'ts table, surface the conflict explicitly before proceeding.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for interactive elements when the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Use the spacing scale `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Apply `{typography.label-sm}` to button text and badge labels; use `{typography.body-sm}` for metadata and secondary text.
- Write CTAs in imperative sentence case per the Content Style section (e.g., "Start for free").

**Must NOT:**
- Invent colors, radii, font weights, or shadow values outside the spec.
- Apply `{rounded.full}` to inputs or cards; apply `{rounded.md}` or `{rounded.lg}` respectively.
- Use `{colors.primary}` for non-interactive body text.
- Use `{colors.neutral-900}` for secondary text; use `{colors.neutral-600}` instead.
- Add emoji, filler copy, or marketing language.
- Rewrite existing page copy, button labels, or navigation items, or alter page section order.

## When in doubt
- If a value is not defined in the spec, ask the user before inventing one.
- Prefer composing existing component tokens over introducing new ones.
- For ambiguous backgrounds, default to `{colors.surface}`; use `{colors.surface-dim}` for secondary containers.
- Tokens marked "(inferred)" are visual approximations. If an authoritative token source exists, it takes precedence.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px, consistent with the Layout section.