# Specify — Design System
> A design token engine for building and managing design systems.
- **Canonical:** https://uiuxskills.com/library/specify
- **Source:** https://specifyapp.com
- **Category:** Productivity & SaaS
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 77%
- **License:** MIT
- **Last updated:** 2026-06-09T23:15:53.545Z

---

---
version: alpha
name: Specify
description: A design token engine for building and managing design systems.
tone: Professional, technical, reliable, and collaborative.
color-scheme: light
colors:
  primary: "#8D4AF7"
  secondary: "#1D58C0"
  surface: "#FFFFFF"
  surface-container: "#F5F5F5"
  on-surface: "#151718"
  on-primary: "#FFFFFF"
  error: "#D32F2F"
  success: "#009639"
  outline: "#E0E0E0"
  focus-ring: "#8D4AF7"
typography:
  display-lg:
    fontFamily: Inter, sans-serif
    fontSize: 48px
  display-md:
    fontFamily: Inter, sans-serif
    fontSize: 36px
  headline-lg:
    fontFamily: Inter, sans-serif
    fontSize: 30px
  headline-md:
    fontFamily: Inter, sans-serif
    fontSize: 24px
  body-md:
    fontFamily: Inter, sans-serif
    fontSize: 20px
    fontWeight: 500
    lineHeight: 32px
  label-md:
    fontFamily: Inter, sans-serif
    fontSize: 14px
  label-sm:
    fontFamily: Inter, sans-serif
    fontSize: 12px
rounded:
  sm: 4px
  md: 8px
  lg: 12px
  xl: 16px
  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
  button-primary-hover:
    backgroundColor: "#7A3ED6"
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.primary}"
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.md}"
  input-field:
    backgroundColor: "{colors.surface}"
    rounded: "{rounded.sm}"
    borderColor: "{colors.outline}"
  input-field-focus:
    borderColor: "{colors.focus-ring}"
  link:
    textColor: "#0099FF"
  link-hover:
    textColor: "#007ACC"
  badge:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
  badge-success:
    backgroundColor: "{colors.success}"
    textColor: "{colors.on-primary}"
  badge-error:
    backgroundColor: "{colors.error}"
    typography: "{typography.label-sm}"
    rounded: "{rounded.sm}"
    padding: 4px 8px
  swatch-secondary:
    backgroundColor: "{colors.secondary}"
    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.06)
  md: 0 4px 6px rgba(0,0,0,0.08)
  lg: 0 10px 15px rgba(0,0,0,0.12)
---

## Overview

Specify is a professional-grade design token platform that bridges the gap between design tools and codebases. Its visual identity is clean, technical, and highly structured, reflecting its role as a foundational tool for design system engineers.

## Colors

The color palette is built for clarity and professional utility, using a high-contrast foundation with a vibrant primary accent.

*   Primary (#8D4AF7): The brand anchor for key actions and highlights.
*   Secondary (#1D58C0): An accent color for supporting UI elements.
*   Surface (inferred) (#FFFFFF): The primary background for the application interface.
*   Surface-container (inferred) (#F5F5F5): A subtle background for cards and containers.
*   On-surface (#151718): High-contrast text for maximum readability.
*   On-primary (inferred) (#FFFFFF): Text color for elements placed on primary backgrounds.
*   Error (inferred) (#D32F2F): Semantic color for error states.
*   Success (#009639): Semantic color for positive status indicators.
*   Outline (inferred) (#E0E0E0): Standard border color for inputs and dividers.
*   Focus-ring (inferred) (#8D4AF7): Accessibility indicator for interactive states.

## Typography

The typography system uses the Inter typeface to maintain a clean, readable, and technical aesthetic across all interface levels.

*   Display-lg (inferred): Used for hero headlines.
*   Display-md (inferred): Used for major section titles.
*   Headline-lg (inferred): Used for primary headings.
*   Headline-md (inferred): Used for secondary headings.
*   Body-md: The standard for all main content paragraphs.
*   Label-md (inferred): Used for UI labels and button text.
*   Label-sm (inferred): Used for small captions and metadata.

## Layout

The layout follows a centered container approach with strict max-width constraints to ensure readability. It relies on a 4px base unit for all spacing, ensuring consistent rhythm across the interface. The page structure follows a logical flow: nav, hero, social-proof, features, testimonials, and footer. The hero section uses a centered composition to highlight the value proposition, and the design is mobile-first, with navigation collapsing into a drawer on smaller viewports.

## Elevation & Depth

Elevation is used sparingly to differentiate cards from the background, relying on subtle shadows to convey depth. The elevation values are inferred from the design system's need for clean separation: elevation.sm is for subtle card lift; elevation.md is for standard card components; and elevation.lg is for modal or overlay depth.

## Shapes

The brand uses a moderate corner radius, favoring a professional and modern aesthetic that avoids being overly playful. The `rounded` scale ranges from 4px (`sm`) for small UI elements like inputs to 16px (`xl`) for larger containers, maintaining a consistent, slightly rounded look throughout the platform.

## 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`


### Buttons
Buttons use `{colors.primary}` for primary actions with `{typography.label-md}` for clear, legible text. Use primary buttons for the main call to action and secondary buttons (transparent background with primary border) for supporting actions.

### Cards
Cards utilize `{colors.surface}` with a `{rounded.md}` corner radius and `{colors.outline}` borders. Use `card-elevated` when you need to create a distinct layer of depth against the `surface-container` background.

### Input Fields
Inputs are designed for high-density forms, featuring a `{rounded.sm}` radius and `{colors.outline}` borders. The `input-field-focus` state must trigger the `{colors.focus-ring}` to ensure accessibility.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for all primary call-to-action buttons. | Do not use `{colors.primary}` for text elements unless they are interactive links. |
| Apply `{typography.body-md}` for all main content paragraphs. | Never apply `{typography.display-lg}` for body text. |
| Use `{rounded.md}` for all card components to maintain consistency. | Do not mix `{rounded.full}` with `{rounded.sm}` in the same component group. |
| Ensure `{colors.outline}` is used for all subtle dividers. | Avoid using high-contrast shadows on flat UI elements. |
| Use `{colors.success}` for positive status indicators. | Do not use `{colors.error}` for non-critical information. |
| Apply `{spacing.md}` as the default gutter between grid items. | Never use custom spacing values outside the defined `{spacing}` scale. |
| Use `{input-field-focus}` to indicate active input states. | Avoid using default browser focus rings on input fields. |
| Use `{badge-success}` for successful process completion states. | Do not use arbitrary background colors for status badges. |

## Content Style

CTA labels should be action-oriented and concise, utilizing strong verbs (e.g., "Read vision" or "Discover parsers"). Keep labels short to maintain the clean, minimal UI aesthetic.

Headings should be direct, benefit-focused, and professional. They should clearly communicate the value of the platform or the specific feature being described without unnecessary marketing fluff.

Copy density should be kept low to ensure scannability. Use short paragraphs and frequent lists to break up technical information, ensuring the content remains accessible to both designers and developers.

## Imagery & Icons

The brand employs clean, vector-based iconography with a consistent, uniform stroke weight. Imagery is minimal and functional, often used to represent integrations or technical processes, ensuring that visual assets never distract from the core utility of the design token platform.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for Specify, a minimal enterprise design token platform. Match its professional, technical tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every value by token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.md}` — never hardcode hex values, font sizes, or pixel radii.
2. Use only the component variants defined under `components:`. Do not invent variants (e.g., a ghost button, an outlined card) that the spec does not list.
3. Follow the Layout section for page structure (nav → hero → social-proof → features → testimonials → footer), spacing rhythm, and the mobile-first, 768px breakpoint rule.
4. Treat the Do's and Don'ts table as authoritative. If a user request conflicts with it, surface the conflict before generating output.
5. Tokens marked "(inferred)" are visual approximations from a website render. If an authoritative source (Figma tokens, Storybook, theme file) exists for the product, those values override inferred ones.

## Output contract

**Must:**
- Use token names for every color, size, radius, and spacing decision.
- Include hover, focus, and disabled states for all interactive components where the spec defines them (`button-primary-hover`, `input-field-focus`, `link-hover`).
- Apply `{colors.focus-ring}` on input focus; never fall back to the browser default ring.
- Use `{spacing.xs}` through `{spacing.2xl}` exclusively — no custom spacing values.
- Apply `{typography.label-md}` for button text and `{typography.body-md}` for all body copy.
- Use `{rounded.md}` for cards, `{rounded.sm}` for inputs and small UI elements.
- Use semantic badge tokens (`badge-success`, `badge-error`) for status indicators.

**Must NOT:**
- Invent colors, font sizes, radii, or shadows absent from the spec.
- Use generic utility defaults (e.g., `text-gray-500`, `rounded-md`) when a brand token covers the role.
- Add emoji, filler copy, or unsolicited marketing language.
- Reference any specific framework or toolchain.
- Rewrite, replace, or restructure existing page copy, headings, button labels, or navigation items.
- Mix `{rounded.full}` with `{rounded.sm}` within the same component group.

## When in doubt
- If the spec does not define a needed value, ask the user before introducing one.
- Prefer composing existing components over creating new tokens.
- For ambiguous background roles, default to `{colors.surface-container}`; for text on those surfaces, use `{colors.on-surface}`.
- For unspecified breakpoints, default to mobile-first with one breakpoint at 768px.
- Use `{colors.primary}` only for interactive or CTA elements, not decorative text.