/extract-design-md

Plain CSS / SASS / Less Extraction Patterns

For projects without a JavaScript framework — static sites, WordPress themes, vanilla HTML/CSS, or CSS preprocessor-heavy projects.

File Discovery Order

1. index.html / *.html — Check <link> tags and <style> blocks for stylesheet references, inline styles, and font loading.

2. Main stylesheet (style.css, main.css, app.css) — The primary CSS file. Look for custom properties, base styles, and typography.

3. _variables.scss / _tokens.scss / variables.less — Preprocessor variable files containing design tokens.

4. _mixins.scss — Reusable style patterns reveal design conventions.

5. Component/module stylesheets — Individual CSS files for UI components.

CSS Custom Properties (Modern CSS)

Modern vanilla CSS projects often define a design system via custom properties:

:root {
  /* Colors */
  --color-primary: #294056;
  --color-bg: #FCFAFA;
  --color-surface: #F5F5F5;
  --color-text: #2C2C2C;
  --color-text-secondary: #6B6B6B;
  --color-border: #E0E0E0;
  --color-success: #10B981;
  --color-error: #EF4444;

  /* Typography */
  --font-heading: 'Manrope', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-size-base: 1rem;
  --line-height-body: 1.7;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 4rem;
  --spacing-xl: 6rem;

  /* Shapes */
  --radius-button: 8px;
  --radius-card: 12px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.06);
}

This is the cleanest source of truth. Extract directly and name each token.

SASS/SCSS Token Patterns

// _variables.scss
$colors: (
  'primary': #294056,
  'background': #FCFAFA,
  'surface': #F5F5F5,
  'text': #2C2C2C,
  'text-muted': #6B6B6B,
);

$font-stack-heading: 'Manrope', sans-serif;
$font-stack-body: 'Inter', sans-serif;

$breakpoints: (
  'mobile': 768px,
  'tablet': 1024px,
  'desktop': 1280px,
);

$spacers: (
  'section': 5rem,
  'component': 2rem,
  'element': 1rem,
);

SASS maps are essentially design token dictionaries. Extract all values.

Less Variable Patterns

@primary-color: #294056;
@bg-color: #FCFAFA;
@text-color: #2C2C2C;
@font-heading: 'Manrope', sans-serif;
@border-radius-base: 8px;

Same extraction approach — map each variable to a descriptive name and role.

Static Sites and WordPress

For static sites or WordPress themes:

• WordPress: Check style.css header comment for theme metadata. Look for wp-content/themes/<name>/assets/css/ for stylesheets. functions.php may enqueue Google Fonts.
• Jekyll/Hugo: Check _sass/ or assets/css/ directories.
• Static HTML: Everything is in the CSS files and <style> blocks.

Inline Style Scanning

For projects heavy on inline styles (legacy codebases, email templates):

Search HTML files for style="..." attributes. Group unique values by property type:

background-color: #FCFAFA, #F5F5F5, #294056
color: #2C2C2C, #6B6B6B, white
border-radius: 8px, 12px
font-family: 'Manrope', 'Inter'

Then deduplicate and assign roles.

Color Extraction Strategy

When there's no explicit token system, you need to discover colors across all stylesheets. Search for:

background-color:
background:
color:
border-color:
border:
outline-color:
box-shadow:
fill:
stroke:

Collect all unique hex values, rgb(), rgba(), and hsl() values. Group by proximity (similar colors within a few shades) and assign roles based on context (which selectors use them).

Responsive Patterns

Look for @media queries in all stylesheets. Common patterns:

@media (max-width: 768px) { ... }   /* Mobile-first breakpoint */
@media (min-width: 1024px) { ... }  /* Desktop enhancement */
@media (prefers-color-scheme: dark) { ... } /* Dark mode support */

Document all breakpoints and the content strategy at each (column changes, padding adjustments, navigation transformations).