# DesignMD — Design System
> AI-powered design system extractor and DESIGN.md generator.
- **Canonical:** https://uiuxskills.com/library/designmd
- **Source:** https://designmd.me/
- **Category:** Developer Tools & IDEs
- **Compatible tools:** claude, cursor, lovable, figma-make
- **Coverage:** 80%
- **License:** MIT
- **Last updated:** 2026-08-14T04:28:02.614Z

---

---
version: alpha
name: DesignMD
tagline: Extract the design system behind any website.
description: AI-powered design system extractor and DESIGN.md generator.
tone: modern, precise, developer-first
color-scheme: dark
colors:
  primary: "#3B82F6"
  secondary: "#8B5CF6"
  background: "#0F1012"
  surface: "#16171A"
  surface-container: "#1E1F22"
  on-primary: "#FFFFFF"
  on-surface: "#F5F6F8"
  on-surface-variant: "#9AA0AB"
  outline: "#222428"
  error: "#EF4444"
  success: "#10B981"
typography:
  display-lg:
    fontFamily: Mona Sans
    fontSize: 48px
    fontWeight: 700
    lineHeight: "1.1"
    letterSpacing: "-0.03em"
  display-md:
    fontFamily: Mona Sans
    fontSize: 36px
    fontWeight: 600
    lineHeight: "1.2"
    letterSpacing: "-0.02em"
  headline-lg:
    fontFamily: Mona Sans
    fontSize: 30px
    fontWeight: 600
    lineHeight: "1.25"
    letterSpacing: "-0.02em"
  headline-md:
    fontFamily: Mona Sans
    fontSize: 24px
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: "-0.01em"
  headline-sm:
    fontFamily: Mona Sans
    fontSize: 20px
    fontWeight: 600
    lineHeight: "1.3"
    letterSpacing: 0em
  body-lg:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-md:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: 400
    lineHeight: "1.5"
    letterSpacing: 0em
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: 400
    lineHeight: "1.4"
    letterSpacing: 0em
  label-md:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: 500
    lineHeight: "1"
    letterSpacing: 0.05em
  label-sm:
    fontFamily: Inter
    fontSize: 11px
    fontWeight: 600
    lineHeight: "1"
    letterSpacing: 0.1em
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:
  page-wrapper:
    backgroundColor: "{colors.background}"
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-primary-hover:
    backgroundColor: "#2563EB"
    textColor: "{colors.on-primary}"
    typography: "{typography.label-md}"
    width: auto
  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto
    borderColor: "{colors.outline}"
  button-secondary-hover:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    typography: "{typography.label-md}"
    width: auto
    borderColor: "{colors.outline}"
  input-field:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    width: 100%
    borderColor: "{colors.outline}"
  input-field-focus:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface}"
    typography: "{typography.body-md}"
    width: 100%
    borderColor: "{colors.primary}"
  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.on-surface-variant}"
    width: 100%
    borderColor: "{colors.outline}"
  card-elevated:
    backgroundColor: "{colors.surface-container}"
    textColor: "{colors.on-surface}"
    width: 100%
    borderColor: "{colors.outline}"
  badge:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.secondary}"
    typography: "{typography.label-sm}"
    width: auto
    borderColor: "{colors.secondary}"
  link:
    textColor: "{colors.primary}"
    typography: "{typography.body-md}"
  link-hover:
    textColor: "#2563EB"
    typography: "{typography.body-md}"
  divider:
    backgroundColor: "{colors.outline}"
    height: 1px
    width: 100%
  badge-error:
    backgroundColor: "#FEF2F2"
    textColor: "{colors.error}"
    typography: "{typography.label-sm}"
  badge-success:
    backgroundColor: "#ECFDF5"
    textColor: "{colors.success}"
    typography: "{typography.label-sm}"
motion:
  duration-short: 200ms
  duration-medium: 400ms
  easing-standard: ease-out
elevation:
  sm: 0 1px 2px rgba(0,0,0,0.5)
  md: 0 4px 6px rgba(0,0,0,0.5)
  lg: 0 10px 15px rgba(0,0,0,0.5)
---

## Overview

DesignMD delivers a focused, developer-centric environment through a high-contrast dark mode aesthetic. The interface pairs deep charcoal canvases with vibrant blue and purple accents, establishing a precise, utility-first atmosphere. It evokes a sense of technical efficiency and clarity, tailored specifically for engineering and design workflows.

## Colors

The color strategy relies on a deep, low-light canvas to reduce eye strain, accented by high-vibrancy functional colors that guide the user's attention to interactive zones and status changes.

*   **Primary (`{colors.primary}`) (#3B82F6):** Vibrant blue used for primary actions, focus states, and key interactive elements.
*   **Secondary (`{colors.secondary}`) (#8B5CF6):** Vibrant purple used for accents, promotional banners, and brand highlights.
*   **Background (`{colors.background}`) (#0F1012):** Deep, near-black canvas background that establishes the dark mode theme.
*   **Surface (`{colors.surface}`) (#16171A):** Slightly lighter dark shade used for secondary buttons, inputs, and card elements.
*   **Surface Container (inferred) (`{colors.surface-container}`) (#1E1F22):** Elevated dark container background for nested components and hover states.
*   **On Primary (`{colors.on-primary}`) (#FFFFFF):** High-contrast white text used on primary colored backgrounds.
*   **On Surface (`{colors.on-surface}`) (#F5F6F8):** Off-white primary text color for maximum readability on dark surfaces.
*   **On Surface Variant (`{colors.on-surface-variant}`) (#9AA0AB):** Muted gray text color for secondary descriptions and labels.
*   **Outline (`{colors.outline}`) (#222428):** Subtle border color used to define component boundaries without adding visual noise.
*   **Error (inferred) (`{colors.error}`) (#EF4444):** Standard red color used for destructive actions and error states.
*   **Success (inferred) (`{colors.success}`) (#10B981):** Standard green color used for success badges and positive states.

## Typography

The typography strategy pairs a high-contrast, wide-optical-range sans-serif for structured headers with a highly readable neutral sans-serif for body copy and interface labels.

*   **Display Large (`{typography.display-lg}`) (Mona Sans):** Large, high-impact display type used for main hero headlines.
*   **Display Medium (inferred) (`{typography.display-md}`) (Mona Sans):** Medium display type used for secondary section headers.
*   **Headline Large (inferred) (`{typography.headline-lg}`) (Mona Sans):** Large headline style for major feature blocks.
*   **Headline Medium (`{typography.headline-md}`) (Mona Sans):** Standard headline style for card titles and sub-sections.
*   **Headline Small (inferred) (`{typography.headline-sm}`) (Mona Sans):** Small headline style for minor group headers.
*   **Body Large (`{typography.body-lg}`) (Inter):** Large body copy used for hero subheaders and intro paragraphs.
*   **Body Medium (`{typography.body-md}`) (Inter):** Standard body copy for general reading and descriptions.
*   **Body Small (inferred) (`{typography.body-sm}`) (Inter):** Small body copy for secondary metadata and helper text.
*   **Label Medium (`{typography.label-md}`) (Inter):** Standard label style for buttons, badges, and tags.
*   **Label Small (`{typography.label-sm}`) (Inter):** Small uppercase label style for overlines and micro-copy.

## Layout

*   The layout is structured around a strict 4px base grid, utilizing spacing tokens from `{spacing.xs}` to `{spacing.2xl}` to maintain consistent visual rhythm.
*   The observed section order top-to-bottom flows as: `nav` → `hero` → `features` → `footer`.
*   The hero composition pattern features a centered headline and subhead with a single primary CTA, accompanied by an asymmetric product preview offset to the right.
*   Generous container padding and clear section dividers separate major blocks, while multi-column grids stack vertically on smaller viewports.
*   Mobile layouts collapse the main navigation into a mobile-friendly drawer to preserve screen real estate.

## Elevation & Depth

Depth is primarily conveyed through subtle color shifts between dark surface layers rather than heavy drop shadows, utilizing soft, high-opacity dark shadows to blend seamlessly into the dark background.

*   `elevation.sm` (inferred) — Used for subtle card lift and minor interactive elements.
*   `elevation.md` (inferred) — Applied to dropdowns, popovers, and secondary floating containers.
*   `elevation.lg` (inferred) — Reserved for modals, drawer overlays, and high-priority floating elements.

## Shapes

The brand utilizes a hybrid radius philosophy to balance interactive dynamism with structural stability. Fully rounded pill shapes using `{rounded.full}` are applied to interactive triggers such as primary buttons, tags, and status badges, signaling clickability and utility.

For structural components like cards, input fields, and containers, the system transitions to medium-to-large rounded corners ranging from `{rounded.md}` to `{rounded.xl}`. This creates a grounded, organized layout that frames technical content cleanly.

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

### page-wrapper
The root container for all pages, utilizing `{colors.background}` to establish the dark-mode canvas. It ensures consistent full-viewport coverage and serves as the baseline layer for all layout grids. Use this as the outer shell for any page template.

### button-primary
The primary interactive trigger, styled with `{colors.primary}` background, `{colors.on-primary}` text, and `{typography.label-md}`. It transitions to `{components.button-primary-hover}` on hover. Use this for the main call-to-action on a page or form.

### button-secondary
A secondary trigger featuring a `{colors.surface}` background, `{colors.on-surface}` text, and a `{colors.outline}` border. It shifts to `{components.button-secondary-hover}` on hover. Use this for alternative or non-blocking actions.

### input-field
A text entry component built with `{colors.surface}` background, `{colors.outline}` border, and `{typography.body-md}`. On focus, it transitions to `{components.input-field-focus}` which highlights the border with `{colors.primary}`. Use this for all user text inputs and search bars.

### card
A structural content container with a `{colors.surface}` background and `{colors.outline}` border. For highlighted or interactive states, use `{components.card-elevated}` which shifts the background to `{colors.surface-container}`. Use this to group related features, steps, or metadata.

### badge
A compact status or category indicator utilizing `{colors.surface}` background and `{colors.secondary}` text and border, styled with `{typography.label-sm}`. For state-specific feedback, use `{components.badge-error}` or `{components.badge-success}`. Use this to denote interactive tags, status updates, or system states.

### link
An inline navigation element using `{colors.primary}` text and `{typography.body-md}`, transitioning to `{components.link-hover}` on hover. Use this for inline text redirections or secondary navigation links.

### divider
A structural line element with a `{colors.outline}` background and a height of 1px. Use this to separate distinct layout sections or list items without adding visual clutter.

## Do's and Don'ts

| Do | Don't |
| --- | --- |
| Use `{colors.primary}` for primary call-to-actions like the `{components.button-primary}`. | Never use `{colors.secondary}` for primary action buttons; reserve it for accents and `{components.badge}` borders. |
| Apply `{colors.background}` as the main canvas background to maintain the dark-mode aesthetic. | Avoid applying `{rounded.sm}` to large interactive elements like `{components.button-primary}`. |
| Use `{colors.surface}` for secondary containers and `{components.input-field}` backgrounds. | Do not pair `{colors.on-surface-variant}` text directly with `{colors.background}` without sufficient contrast or a `{components.divider}`. |
| Ensure all body text uses `{typography.body-md}` with `{colors.on-surface}` for optimal readability. | Do not use `{typography.display-lg}` for standard body copy or secondary descriptions. |
| Apply `{rounded.full}` to `{components.badge}` elements to denote interactive tags or status updates. | Never stack more than two levels of `{colors.surface-container}` to avoid visual clutter. |
| Use `{colors.outline}` for subtle borders on `{components.card}` elements to separate content blocks. | Avoid using bright saturated colors for backgrounds other than `{colors.primary}` or `{colors.secondary}`. |
| Apply `{motion.duration-short}` and `{motion.easing-standard}` to interactive transitions like `{components.button-primary-hover}`. | Do not use hard, un-animated state changes on `{components.link}` or `{components.button-secondary}`. |
| Use `{typography.label-sm}` with `{colors.secondary}` for small status badges to maintain brand identity. | Do not style `{components.badge-error}` with `{colors.primary}` as it conflicts with the error state. |

## Content Style

*   **CTA Style:** Button labels must use imperative verbs and sentence case (e.g., "Claim the offer", "Sign In"). They should be concise, action-oriented, and directly state the outcome of the interaction.
*   **Heading Tone:** Headlines must be direct, benefit-driven, and technically precise. Avoid marketing fluff or vague adjectives, focusing instead on clear value propositions tailored for developers and designers.
*   **Copy Density:** Maintain a highly scannable layout with short paragraphs paired with bulleted lists. Use generous whitespace to separate technical concepts and ensure information is easily digestible.

## Imagery & Icons

The imagery style combines high-fidelity UI previews of generated design systems with clean, flat vector icons. Visuals are enhanced by subtle gradient glows that emphasize modern technical capabilities. Icons should feature minimal, precise line work that aligns with the developer-first aesthetic, avoiding complex illustrations or realistic photography in favor of structured, abstract representations of data and code.

---

## Companion prompt

## Role
You are an AI assistant generating UI components and layouts for DesignMD, a modern, developer-first dark-mode utility tool. Match its precise, minimal, high-contrast tone. Content, copy, and information architecture remain owned by the product team.

## How to use design.md
1. Reference every visual value by token name — `{colors.primary}`, `{typography.body-md}`, `{rounded.lg}` — never hardcode hex values, pixel sizes, or font names.
2. Only generate variants listed under `components:` (e.g. `button-primary`, `card-elevated`, `badge-success`). Do not invent new component variants.
3. Follow the shape rules in `shapesNotes`: `{rounded.full}` for pill-shaped triggers and badges; `{rounded.md}` to `{rounded.xl}` for cards and inputs. Do not apply `{rounded.sm}` to large interactive elements.
4. Treat the Do's and Don'ts as authoritative. If a user request conflicts — e.g. using `{colors.secondary}` for a primary CTA — surface the conflict explicitly before proceeding.
5. Apply layout decisions (centered hero, multi-column grid, generous container padding) per `layoutNotes`. Default to mobile-first with one breakpoint at 768px when the spec is silent on a breakpoint.

## Output contract

**Must:**
- Use all tokens by name on every generated component.
- Include hover, focus, and disabled states for any interactive component the spec defines (e.g. `button-primary-hover`, `input-field-focus`, `link-hover`).
- Use `{spacing.xs}` through `{spacing.2xl}` for all padding, margin, and gap values.
- Write CTAs and headings in the voice defined in `voiceAndContent`: imperative, sentence case, technically precise, no marketing fluff.
- Maintain contrast ≥ 4.5:1 for body text; use `{colors.on-surface}` on dark surfaces and `{colors.on-primary}` on `{colors.primary}` backgrounds.

**Must NOT:**
- Invent colors, radii, or typefaces absent from the spec.
- Use generic utility defaults when a brand token exists.
- Add emoji, filler copy, or promotional language.
- Stack more than two levels of `{colors.surface-container}`.
- Rewrite, replace, or extend page copy, navigation items, or content hierarchy.

## When in doubt
- Ask the user before introducing any value not in the spec.
- Prefer composing existing components over creating new tokens.
- For ambiguous backgrounds, default to `{colors.surface}`; for ambiguous text, default to `{colors.on-surface}`.
- For unspecified breakpoints, apply mobile-first layout with a single 768px breakpoint.
- Tokens marked "(inferred)" in spec prose are approximations; authoritative token files take precedence.