# Ditto — Design System
> Single source of truth for product copy, managing copy from draft to design to deploy.
- **Canonical:** https://uiuxskills.com/library/ditto
- **Source:** https://www.dittowords.com/
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 81%
- **License:** MIT
- **Last updated:** 2026-06-14T19:21:17.294Z

---

---
version: alpha
name: Ditto
tagline: Source of truth for product copy
description: Single source of truth for product copy, managing copy from draft to design to deploy.
tone: Professional, collaborative, structured, and developer-friendly.
color-scheme: dark
colors:
  primary: "#7C3AED"
  primary-hover: "#9061F9"
  secondary: "#3B82F6"
  secondary-hover: "#60A5FA"
  neutral: "#F5F2EB"
  surface: "#0D0D0D"
  surface-container: "#1A1A1A"
  on-surface: "#F5F2EB"
  on-primary: "#FFFFFF"
  outline: "#2E2E2E"
  error: "#EF4444"
  success: "#84CC16"
  warning: "#EAB308"
  info: "#3B82F6"
typography:
  display-lg:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 3rem
    fontWeight: 700
    lineHeight: "1.15"
    letterSpacing: "-0.02em"
  display-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 2.25rem
    fontWeight: 700
    lineHeight: "1.2"
    letterSpacing: "-0.01em"
  headline-lg:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 1.875rem
    fontWeight: 600
    lineHeight: "1.25"
  headline-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 1.5rem
    fontWeight: 600
    lineHeight: "1.3"
  headline-sm:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 1.25rem
    fontWeight: 600
    lineHeight: "1.4"
  body-lg:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 1.125rem
    fontWeight: 400
    lineHeight: "1.5"
  body-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: "1.5"
  body-sm:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 0.875rem
    fontWeight: 400
    lineHeight: "1.5"
  label-md:
    fontFamily: "\"Inter\", sans-serif"
    fontSize: 0.875rem
    fontWeight: 600
    lineHeight: "1"
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 24px
  full: 9999px
spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto-fit
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    borderColor: "{colors.outline}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.neutral}"
    typography: "{typography.label-md}"
    borderColor: "{colors.neutral}"
  card:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    rounded: "{rounded.lg}"
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    width: 100%
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-md}"
    borderColor: "{colors.primary}"
  link:
    textColor: "{colors.secondary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "{colors.secondary-hover}"
    typography: "{typography.body-md}"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.neutral}"
    typography: "{typography.body-sm}"
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.surface}"
    typography: "{typography.body-sm}"
  badge-error:
    backgroundColor: "{colors.error}"
    textColor: "{colors.on-primary}"
    typography: "{typography.body-sm}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
    width: 100%
  badge-warning:
    backgroundColor: "{colors.warning}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  badge-info:
    backgroundColor: "{colors.info}"
    typography: "{typography.label-md}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.3)
  md: 0 4px 6px rgba(0,0,0,0.4)
  lg: 0 10px 15px rgba(0,0,0,0.5)
---

## Overview

Ditto's visual identity is built around a sophisticated, dark-mode aesthetic designed specifically for product and development teams. It combines a deep dark background with warm white typography and vibrant, functional accent colors that represent different stages of the copy workflow. The resulting experience feels highly structured, collaborative, and developer-friendly, balancing utility with visual focus.

## Colors

The color strategy leverages a high-contrast dark theme to reduce eye strain for product teams while using vibrant, semantic accents to denote workflow states and interactive actions.

*   `{colors.primary}` (#7C3AED): Vibrant purple accent color used for primary actions and core branding elements.
*   `{colors.primary-hover}` (inferred) (#9061F9): Lighter purple variant used for hover states on primary interactive elements.
*   `{colors.secondary}` (#3B82F6): Vibrant blue accent color used for links and secondary highlights.
*   `{colors.secondary-hover}` (inferred) (#60A5FA): Lighter blue variant used for hover states on links and secondary buttons.
*   `{colors.neutral}` (#F5F2EB): Warm white color used for primary text and high-contrast elements.
*   `{colors.surface}` (#0D0D0D): Deep black background color that anchors the dark-mode theme.
*   `{colors.surface-container}` (inferred) (#1A1A1A): Slightly lighter dark gray used for cards, containers, and structured sections.
*   `{colors.on-surface}` (#F5F2EB): Warm white text color applied over dark surface backgrounds.
*   `{colors.on-primary}` (inferred) (#FFFFFF): Pure white text used on primary purple buttons for maximum contrast.
*   `{colors.outline}` (inferred) (#2E2E2E): Subtle dark gray border color used to separate sections and define card boundaries.
*   `{colors.error}` (#EF4444): Vibrant red used for error states, destructive actions, and alerts.
*   `{colors.success}` (#84CC16): Olive green used for success states and positive workflow indicators.
*   `{colors.warning}` (#EAB308): Gold/yellow accent used for warnings and pending states.
*   `{colors.info}` (inferred) (#3B82F6): Blue accent used for informational badges and system updates.

## Typography

The typography system relies on Inter to deliver clean, highly legible text across dense product interfaces and marketing flows. The scale transitions from bold, tight display faces for headlines to highly readable body styles for long-form copy.

*   `{typography.display-lg}` (inferred): Large bold display type used for main hero headings.
*   `{typography.display-md}` (inferred): Medium display type used for section headers.
*   `{typography.headline-lg}` (inferred): Large headline used for feature group titles.
*   `{typography.headline-md}` (inferred): Medium headline used for card titles and sub-sections.
*   `{typography.headline-sm}` (inferred): Small headline used for minor section titles.
*   `{typography.body-lg}` (inferred): Large body copy used for introductory paragraphs and hero subtext.
*   `{typography.body-md}` (inferred): Standard body copy used for general descriptions and explanations.
*   `{typography.body-sm}` (inferred): Small body copy used for secondary details, captions, and badges.
*   `{typography.label-md}` (inferred): Medium label used for buttons and interactive controls.

## Layout

*   **Grid & Spacing:** Layouts are structured around a clean, single-column flow for narrative sections, transitioning into multi-column grids for feature highlights. Spacing relies on an 8px base unit, using larger tokens like `{spacing.xl}` and `{spacing.2xl}` to separate distinct workflow phases.
*   **Section Order:** The typical page flow follows: `nav` → `hero` → `social-proof` → `value-prop` → `workflow-tabs` → `features-grid` → `footer`.
*   **Hero Pattern:** A bold typographic headline using `{typography.display-lg}` on a `{colors.surface}` background, paired with primary and secondary CTAs and a dynamic product workflow illustration.
*   **Responsive Behavior:** Multi-column desktop grids collapse to single-column mobile stacks, with layout containers utilizing `{spacing.md}` or `{spacing.lg}` for horizontal padding.

## Elevation & Depth

Depth is primarily conveyed through subtle background color contrast between the dark background `{colors.surface}` and container cards `{colors.surface-container}`, supplemented by soft, low-opacity shadows to elevate interactive elements. Because these elevation values are inferred, they should be applied conservatively:

*   `elevation.sm` — Used for subtle card lift and small interactive components.
*   `elevation.md` — Applied to dropdown menus, popovers, and floating action elements.
*   `elevation.lg` — Reserved for modals, dialogs, and prominent drawer overlays.

## Shapes

The design system employs a structured radius philosophy that balances sharp, technical precision with approachable interactive elements. Standard container elements, such as `{components.card}` and `{components.input-field}`, utilize `{rounded.md}` or `{rounded.lg}` to establish clear, structured boundaries.

Fully rounded pill shapes (`{rounded.full}`) are reserved exclusively for primary buttons and status badges to draw immediate visual focus. Small accents, such as `{components.badge-warning}`, use `{rounded.sm}` to maintain a compact, metadata-like appearance.

## 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-primary
The primary action button uses a solid `{colors.primary}` background with `{colors.on-primary}` text and `{typography.label-md}`. It features a fully rounded shape (`{rounded.full}`) and transitions to `{colors.primary-hover}` on hover. Use this for the main call-to-action on a page or form.

### button-secondary
This button features a transparent background, `{colors.neutral}` text, and a border styled with `{colors.outline}`. On hover, it transitions to `{colors.surface-container}` with a `{colors.neutral}` border. Use this for secondary actions that support the primary user flow.

### card
The standard card component uses `{colors.surface-container}` as its background, `{colors.on-surface}` for text, and is bounded by a `{colors.outline}` border with `{rounded.lg}` corners. It is used to group related content, features, or integrations in structured grids.

### card-elevated
An elevated variant of the standard card that shares the `{colors.surface-container}` background and `{rounded.lg}` corners, but utilizes `elevation.md` to float above the base canvas. Use this to highlight featured content or interactive workflow steps.

### input-field
The input field is styled with a `{colors.surface}` background, `{colors.neutral}` text, `{typography.body-md}`, and a `{colors.outline}` border. When active, it transitions to `{components.input-field-focus}` which highlights the border with `{colors.primary}`. Use this for all text inputs, search bars, and form fields.

### link
Text links are styled with `{colors.secondary}` and `{typography.body-md}`. On hover, they transition to `{colors.secondary-hover}` to provide clear interactive feedback. Use these for inline navigation and text-based actions.

### badge
Badges are small, metadata containers utilizing `{colors.surface-container}` background, `{colors.neutral}` text, and `{typography.body-sm}`. They are used to display tags, categories, or neutral statuses.

### badge-success
A status badge featuring a `{colors.success}` background with `{colors.surface}` text. Use this exclusively to denote positive workflow states, successful deployments, or approved copy.

### badge-error
A status badge featuring an `{colors.error}` background with `{colors.on-primary}` text. Use this exclusively to denote critical errors, failed syncs, or rejected copy.

### badge-warning
A status badge featuring a `{colors.warning}` background and `{typography.label-md}` text, styled with `{rounded.sm}` and compact padding. Use this to represent pending reviews, warnings, or draft states.

### badge-info
An informational badge featuring an `{colors.info}` background and `{typography.label-md}` text, styled with `{rounded.sm}` and compact padding. Use this to highlight new features, updates, or helpful tips.

### divider
A subtle structural element with a height of 1px, spanning the full width of its container, styled with `{colors.outline}`. Use this to separate content sections or list items without adding visual clutter.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-action buttons like `{components.button-primary}` to drive user engagement. | Never use `{colors.primary}` for secondary actions; instead, use `{components.button-secondary}` to maintain hierarchy. |
| Apply `{colors.surface-container}` to group related content inside structured `{components.card}` elements. | Do not apply heavy shadows to `{components.card}` elements; rely on `{colors.outline}` and subtle background contrast instead. |
| Ensure all body copy uses `{typography.body-md}` or `{typography.body-sm}` for optimal readability against `{colors.surface}` backgrounds. | Avoid using `{typography.display-lg}` for standard body paragraphs or secondary headings. |
| Use `{colors.outline}` for subtle borders and `{components.divider}` lines to maintain a clean visual hierarchy. | Avoid mixing sharp corners with rounded elements; stick to the defined `{rounded.md}` and `{rounded.full}` tokens. |
| Apply `{rounded.full}` to `{components.badge}` elements to denote status or highlight new features. | Do not use `{colors.on-surface}` text directly on bright accent backgrounds like `{colors.primary}` without verifying contrast. |
| Use `{colors.success}` and `{colors.error}` exclusively for semantic feedback and status indicators. | Never omit the focus state `{components.input-field-focus}` on interactive form elements. |
| Style interactive text links with `{colors.secondary}` and transition to `{colors.secondary-hover}` on hover. | Do not use `{colors.secondary}` for static body text; reserve it strictly for interactive links and highlights. |
| Use `{spacing.xl}` and `{spacing.2xl}` to create generous vertical separation between distinct workflow phases. | Do not crowd elements; avoid using `{spacing.xs}` or `{spacing.sm}` for primary section margins. |

## Content Style

*   **CTA Style:** Call-to-action copy must be action-oriented, clear, and direct. Use imperative verbs in title case or sentence case, such as "Get Started Free", "Get a Demo", and "Learn more". Keep labels concise to fit comfortably within `{components.button-primary}` and `{components.button-secondary}`.
*   **Heading Tone:** Headlines should be direct, benefit-driven, and structured around the product workflow stages (such as Draft, Design, Review, Translate, Personalize, Ship, and Iterate). Use bold, declarative phrasing to emphasize speed and efficiency.
*   **Copy Density:** Maintain a highly scannable layout. Use short paragraphs, bold lead-ins, and structured tabbed sections to break down complex workflows. Ensure generous whitespace is preserved around text blocks using `{spacing.lg}` and `{spacing.xl}` to avoid visual fatigue on dark backgrounds.

## Imagery & Icons

The imagery style is mixed, combining high-fidelity product screenshots (such as Figma integrations and the Ditto web app interface) with stylized vector connectors, branch lines, and tool logos (such as Slack and Figma) to visually map out copy workflows. Screenshots must be presented inside containers styled with `{colors.surface-container}` and `{rounded.lg}` to match the UI aesthetic. Vector elements and branch lines should use `{colors.outline}` or `{colors.secondary}` to guide the user's eye through the workflow stages without competing with the primary content.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Ditto, a professional, developer-friendly product copy platform with a dark-mode minimal aesthetic. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every color, type, spacing, radius, and component value by its token name (e.g., `{colors.primary}`, `{typography.body-md}`, `{spacing.xl}`) — never hardcode hex values, pixel sizes, or font weights.
2. Render only the components listed under `components:` (`button-primary`, `card`, `badge`, `input-field`, etc.). Do not invent variants the spec does not define.
3. Follow the layout narrative: single-column for narrative sections, multi-column grids for feature highlights, with `{spacing.xl}` and `{spacing.2xl}` separating workflow phases.
4. Apply shapes per the spec: `{rounded.md}` for cards and inputs; `{rounded.full}` for primary buttons and badges. Do not mix sharp corners with rounded elements.
5. Treat the Do's and Don'ts as authoritative. If a user request conflicts — for example, using `{colors.primary}` on a secondary action — surface the conflict before proceeding.

## Output contract

**Must:**
- Use token names for every design value.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (e.g., `{components.button-primary-hover}`, `{components.input-field-focus}`).
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding and gap values.
- Set all surfaces to `{colors.surface}` or `{colors.surface-container}`; all primary text to `{colors.on-surface}`.
- Use `{colors.success}`, `{colors.error}`, and `{colors.warning}` only for semantic status feedback via badge components.
- Match CTA copy style: imperative, direct, action-oriented.

**Must NOT:**
- Invent colors, radii, or type scales absent from the spec.
- Use generic utility defaults when a brand token exists.
- Apply heavy shadows to cards; use `{colors.outline}` and background contrast instead.
- Add emoji, filler text, or marketing copy.
- Rewrite, replace, or restructure existing page copy, headings, labels, or navigation items.

## When in doubt
- Ask the user before introducing any token or component not listed in the spec.
- Prefer composing existing components over creating new patterns.
- For ambiguous backgrounds, default to `{colors.surface-container}`; for ambiguous text, default to `{colors.on-surface}`.
- If breakpoints are unspecified, use mobile-first with one breakpoint at 768px, following the single-to-multi-column layout narrative.
- Any token marked "(inferred)" in the spec is a visual approximation; if an authoritative token source exists, it takes precedence.