Stitch::Extract Design Md

Extract Design System from Frontend Code

Analyze frontend source code to extract a comprehensive design system document (DESIGN.md) that captures the project's visual language — colors, typography, spacing, component patterns, and layout principles — directly from the source files, without needing to build or render the application.

Why This Exists

The design-md skill works from rendered HTML. But often you have a codebase and want to understand its design system before you can even run the app — maybe dependencies are missing, the build is broken, or you just want a quick audit. This skill reads the source files themselves: stylesheets, component files, theme configs, and Tailwind setups. It's faster and works anywhere.

When to Use

• User has a frontend codebase and wants to extract or document its design system
• User wants to migrate a project's visual identity into Stitch
• User asks to "audit the styling" or "understand the design language" of a repo
• User wants to create a DESIGN.md from existing source code
• The app can't be built/rendered but the source is available
• User wants to unify or reconcile inconsistent styles across a codebase

Prerequisites

• Access to the frontend project's source directory
• No build or runtime dependencies needed — this skill reads source files only

---

Workflow

Phase 1: Project Discovery

Start by understanding what you're working with. This determines which extraction patterns to use.

1. Detect the Framework and Stack

Scan the project root for telltale files:

Read package.json first — it reveals the framework, CSS tooling, and any design-token libraries (e.g., style-dictionary, @chakra-ui/react, @mui/material, ant-design). This context tells you where to look for styling information.

2. Map the Source Tree

Identify the key directories and files you'll analyze:

src/
├── components/     ← Component-level styles
├── styles/         ← Global stylesheets
├── theme/          ← Theme definitions, tokens
├── assets/         ← Fonts, images
├── app.css         ← Root styles
└── index.css       ← Entry CSS

Also check for:

• tailwind.config.js / tailwind.config.ts — Custom colors, fonts, spacing
• globals.css / global.css — CSS custom properties (variables)
• Any theme.* or tokens.* files
• Component library config (e.g., chakra-theme.ts, vuetify.config.ts)

3. Read Framework-Specific Guidance

Consult the appropriate reference for extraction patterns:

• React / Next.js / Tailwind → references/react-tailwind.md
• Vue / Nuxt → references/vue.md
• Svelte / SvelteKit → references/svelte.md
• Angular → references/angular.md
• Plain CSS / SASS / Less → references/plain-css.md

These references contain framework-specific patterns for locating colors, typography, spacing, and component styles. Read the one that matches before proceeding.

---

Phase 2: Deep Extraction

Work through each design dimension systematically. For each one, gather raw data from the source files, then synthesize it into descriptive language.

The goal isn't to dump every CSS property — it's to understand the intent behind the styling choices and describe them in human, editorial language that another designer (or Stitch) can use to recreate the same visual feel.

1. Visual Theme & Atmosphere

Read the broadest styling first to understand the overall mood:

• Root background: What's the body or root element background? Light

cream (#f-range) signals airy/clean; dark (#0-#2 range) signals moody/dramatic.

• Whitespace philosophy: Are spacing values generous (32px+) or tight?

Check padding/margin values on root containers, section wrappers, and card components.

• Density: Count the components per page/section. Few with space = minimal;

many packed tight = information-dense.

• Color temperature: Are the neutrals warm (creams, tans) or cool (blue-grays, slates)?
• Overall feel: Synthesize into 1-2 rich sentences that capture the mood.

Look for these signals in the source:

2. Color Palette & Roles

Extract every unique color from the codebase and assign functional roles. Search across all layers:

Where to find colors:

How to organize: Group colors by function, not by hue:

1. Primary Foundation — Background and surface colors 2. Accent & Interactive — CTA buttons, active states, links 3. Typography & Text Hierarchy — Primary, secondary, tertiary text 4. Functional States — Success, error, warning, info

For each color, create a descriptive name that evokes the color's character rather than its raw hex value:

• ❌ #294056 → "Blue"
• ✅ #294056 → "Deep Muted Teal-Navy" — Primary CTA, active navigation

Deduplication matters. Codebases often have near-duplicate colors (e.g., #333 and #2C2C2C). Consolidate them under one name that best represents the intended color.

3. Typography Rules

Extract the complete typographic system:

Font families:

• Check CSS font-family, Tailwind fontFamily, Google Fonts links, or

local @font-face declarations.

• Note the character of each font: geometric vs humanist, serif vs sans,

the feeling it evokes.

Type scale (hierarchy):

• Find every heading level (H1-H6) and body text, noting:
• font-size (in rem or px)
• font-weight (numeric value + descriptive name)
• letter-spacing (and why — elegance? compactness?)
• line-height (generous for readability? tight for display?)
• Map component usage: Which heading level do product cards use? What about

hero sections?

Spacing principles:

• How does text spacing relate to the overall spacing scale?
• Letter-spacing patterns on headings vs body
• Line-height philosophy (generous/relaxed for body, tighter for display)

4. Component Stylings

Analyze the 4-5 most important UI primitives:

Buttons:

• Corner radius (and what it communicates — playful? professional? minimal?)
• Color scheme for primary, secondary, and ghost variants
• Hover/focus/active states and transition timing
• Padding ratios (horizontal vs vertical)

Cards / Containers:

• Corner radius (often different from buttons — slightly rounder)
• Shadow strategy: flat, subtle hover shadows, or always elevated?
• Border treatment: hairline borders, colored accents, or none?
• Internal padding (generous or compact?)
• Image treatment within cards (full-bleed, padded, rounded?)

Navigation:

• Layout pattern (horizontal bar, vertical sidebar, drawer)
• Typography treatment (uppercase, letter-spacing, weight)
• Active/hover state indicators (underline, color, background)
• Mobile behavior (hamburger, bottom nav, drawer)

Inputs & Forms:

• Border style and focus state behavior
• Corner style consistency with buttons
• Padding and touch-target sizing

Domain-Specific Components:

• Identify 1-2 components unique to this project (e.g., product cards,

dashboard widgets, chat bubbles) and describe their styling patterns.

5. Layout Principles

Extract the structural system:

Grid & Structure:

• Max content width (from max-width on containers)
• Column system (CSS Grid, Flexbox patterns, defined breakpoints)
• Responsive breakpoints (from media queries or Tailwind config)

Whitespace Strategy:

• Base spacing unit (8px grid? 4px? custom?)
• Section margins (how much space between major sections)
• Edge padding (page margins at different breakpoints)

Alignment & Visual Balance:

• Text alignment patterns (centered heroes, left-aligned body)
• Image-to-text ratios
• Visual weight distribution

Responsive Behavior:

• Mobile-first or desktop-first?
• How do grids collapse? Padding scale?
• Touch target sizing

6. Stitch Generation Notes

Synthesize the extraction into actionable prompts for Stitch:

• Atmosphere language: Translate the mood into natural descriptors
• Color references: List colors by descriptive name + hex
• Component prompts: Write 2-3 example prompts that would recreate

key components in Stitch

• Iteration guidance: Tips for refining screens in this design system

---

Phase 3: Write the DESIGN.md

Assemble everything into the standard DESIGN.md format. Place it at .stitch/DESIGN.md in the project directory (create the .stitch/ directory if it doesn't exist).

[!IMPORTANT]

You MUST include the YAML frontmatter at the top of the file with name and colors mapping, exactly as shown in the example at examples/DESIGN.md. This structured data is required for other skills to parse the design system.

>

Failure to include this YAML block with at least the core color tokens is a failure to use this skill correctly.

Use the format from the example at examples/DESIGN.md as your template. The file must start with the YAML block, followed by the markdown sections:

# Design System: [Project Name]
**Project ID:** [If known, otherwise omit]

## 1. Visual Theme & Atmosphere
[Rich 2-paragraph description of mood, philosophy, and key characteristics]

## 2. Color Palette & Roles
### Primary Foundation
### Accent & Interactive
### Typography & Text Hierarchy
### Functional States

## 3. Typography Rules
### Hierarchy & Weights
### Spacing Principles

## 4. Component Stylings
### Buttons
### Cards & [Domain-Specific Containers]
### Navigation
### Inputs & Forms
### [Domain-Specific Components]

## 5. Layout Principles
### Grid & Structure
### Whitespace Strategy
### Alignment & Visual Balance
### Responsive Behavior & Touch

## 6. Design System Notes for Stitch Generation
### Language to Use
### Color References
### Component Prompts
### Incremental Iteration

---

Phase 4: Integration (Optional)

If the user wants to push the design system into Stitch:

1. Hand off to the manage-design-system skill for the MCP create/update calls 2. The DESIGN.md you wrote is the input — the manage-design-system skill handles the Stitch API integration

If the user just wants the document, you're done after Phase 3.

---

Quality Checklist

Before delivering the DESIGN.md, verify:

• [ ] Every color has a descriptive name, hex code, and functional role
• [ ] Typography includes font family, character description, and full hierarchy
• [ ] Component styles describe shape, color, states, and transitions
• [ ] Layout includes max-width, grid, breakpoints, and spacing strategy
• [ ] Stitch generation notes use natural language, not CSS syntax
• [ ] The atmosphere section reads like editorial copy, not technical docs
• [ ] Near-duplicate colors are consolidated
• [ ] The document captures the intent behind styling, not just raw values

Tips for Better Extraction

• Read comments and commit messages. Developers often document design

intent in code comments (/* hero section — breathable */) and commit messages. These are gold for understanding the why.

• Check for design-token libraries. If the project uses style-dictionary,

@tokens-studio, or similar, these files are the most authoritative source of design values.

• Theme files are higher-signal than component styles. A theme.ts that

defines a palette tells you the intended design system; scattered inline styles in components tell you what actually shipped. Both matter, but start from the theme.

• Tailwind config is a design system. If a project has a customized

tailwind.config.js, that is the design system — extract from it first, then spot-check components for overrides.

• CSS custom properties are intentional. If a developer defined

--brand-primary, they're telling you this is a design token. Respect that.

Brand & Style

The brand personality is high-performance, sophisticated, and dependable. It is designed for the modern skier who demands clarity and precision in harsh environments. The visual language evokes the crystalline beauty of a mountain peak while prioritizing the rugged utility required for outdoor navigation.

The design system utilizes Glassmorphism to achieve a "frozen" aesthetic, mimicking the properties of ice and packed snow. This is paired with a High-Contrast philosophy to ensure that critical data—like trail status and weather alerts—remains legible under intense mountain sunlight or the low-visibility conditions of a snowstorm.

Colors

The palette is anchored by Deep Peak Blue, a dark navy that provides a grounding contrast for white text and maps. Powder White serves as the primary canvas, ensuring the interface feels airy and cold.

Safety Orange is reserved strictly for primary calls to action, hazard warnings, and emergency trail closures, ensuring immediate eye-tracking. Electric Blue (the info status) is used for weather updates and general interactivity. For trail difficulty levels, standard industry colors (Green, Blue, Black) are used but rendered with high-saturation values to pop against the white backgrounds.

Typography

The typography system uses Inter for core functional text and body copy due to its exceptional x-height and legibility at small sizes. Lexend is introduced for labels and statistics; its hyper-readable, athletic character suits the "active" nature of skiing data like speed and vertical drop.

To combat outdoor glare, font weights are generally heavier than standard web applications. Display styles use tight tracking and heavy weights to create a sense of strength. Labels always utilize high-contrast coloring against their backgrounds.

Layout & Spacing

This design system uses a Fluid Grid model with generous safe areas. Elements are spaced using a strict 4px/8px baseline rhythm to maintain a disciplined, professional appearance.

Touch targets are intentionally oversized (minimum 48x48px) to accommodate users wearing gloves. Padding within cards and containers is kept spacious (lg or xl) to prevent the interface from feeling cluttered when displaying complex trail data.

Elevation & Depth

Depth is conveyed through Glassmorphism and backdrop filters rather than traditional heavy shadows. Surfaces use a hierarchy of transparency:

1. Base Layer: Solid 'Powder White' or 'Deep Peak Blue'. 2. Middle Layer (Cards/Modals): 70% opacity white with a 20px backdrop blur and a thin 1px 'Ice' border (white at 40% opacity). 3. Top Layer (Floating Actions): 90% opacity with a subtle 4px ambient shadow to separate the element from the blurred background.

This creates a "stacked ice" effect that maintains visual clarity while giving the UI a premium, modern feel.

Shapes

The shape language is defined by modern, organic rounded corners. This softens the high-contrast color palette and makes the app feel approachable.

Interactive elements like buttons and chips utilize rounded-lg (1rem) or rounded-xl (1.5rem) to suggest a tactile, "pebble" feel. Large containers like map overlays use 1rem corners, while small status indicators for trail difficulty may use pill shapes for instant recognition.

Components

Buttons

Primary buttons use a solid 'Safety Orange' or 'Deep Peak Blue' fill with white text. High-contrast outlines are used for secondary actions. All buttons must feature a minimum height of 52px for gloved-hand accessibility.

Cards & Modals

Cards utilize the glassmorphism effect—semi-transparent backgrounds with a 1px white border. This ensures that map imagery or photos underneath remain slightly visible, maintaining the "frozen" aesthetic.

Trail Status Chips

Pill-shaped indicators with high-saturation icons. Green (Easy), Blue (Intermediate), Black (Expert), and Double Black (Extreme). These must include text labels alongside icons to ensure accessibility for colorblind users.

Input Fields

Fields feature a 'Cloud Gray' background with a thick bottom border that transforms into 'Electric Blue' on focus. Labels are always visible above the field to ensure the user doesn't lose context in bright environments.

Weather Widgets

Bold, thick-stroke iconography (minimum 2pt stroke) to represent sun, snow, or wind. These icons should be large and accompanied by 'Lexend' typography for temperature and wind speed.

Angular Extraction Patterns

Angular projects use a structured, convention-heavy approach to styling. Design systems often live in SCSS/CSS files with clear separation between global themes and component-scoped styles.

File Discovery Order

1. `angular.json` — Lists global style files under projects.*.architect.build.options.styles. These are the entry-point CSS/SCSS files.

2. `src/styles.scss` / `src/styles.css` — Global stylesheet. CSS custom properties, font imports, and base styles live here.

3. `src/theme.scss` / `src/theme/` — Explicit theme directory. Custom Material/component palettes.

4. `tailwind.config.js` (if Tailwind) — Same extraction as React.

5. `src/app/app.component.scss` — Root component styles, reveals global layout patterns.

6. Component `.scss` / `.css` files — Co-located styles (ViewEncapsulation scoped by default).

Angular Material Theme Extraction

Angular Material is the most common component library. Themes are SCSS-based:

// src/theme.scss
@use '@angular/material' as mat;

$primary-palette: mat.m2-define-palette(mat.$m2-teal-palette, 800);
$accent-palette: mat.m2-define-palette(mat.$m2-blue-grey-palette);
$warn-palette: mat.m2-define-palette(mat.$m2-red-palette);

$theme: mat.m2-define-light-theme((
  color: (
    primary: $primary-palette,
    accent: $accent-palette,
    warn: $warn-palette,
  ),
  typography: mat.m2-define-typography-config(
    $font-family: 'Manrope, sans-serif',
    $headline-1: mat.m2-define-typography-level(3.5rem, 4rem, 600),
    $headline-5: mat.m2-define-typography-level(1.5rem, 2rem, 500),
    $body-1: mat.m2-define-typography-level(1rem, 1.7, 400),
  ),
));

@include mat.all-component-themes($theme);

What to extract:

• Palette choices → map to functional color roles
• Typography config → maps directly to the hierarchy section
• Light vs dark theme → atmosphere

For Angular Material 3 (MDC-based), look for mat.define-theme() using the new token system with --mat-* CSS custom properties.

SCSS Variable Patterns

Many Angular projects use SCSS variables for tokens:

// _variables.scss
$color-primary: #294056;
$color-background: #FCFAFA;
$color-surface: #F5F5F5;
$color-text: #2C2C2C;

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

$radius-button: 8px;
$radius-card: 12px;

$breakpoint-mobile: 768px;
$breakpoint-desktop: 1024px;

$spacing-section: 5rem;
$spacing-component: 2rem;

These are explicit design tokens. Map them directly.

ViewEncapsulation and Scoped Styles

Angular scopes styles by default (similar to Vue's scoped). When scanning component styles:

• Look for :host selectors — these style the component's root element
• ::ng-deep (deprecated but still used) — styles that pierce encapsulation
• Repeated values across components indicate design system conventions

PrimeNG / Nebular / NG-ZORRO

If component libraries are used:

• PrimeNG: Theme SCSS in node_modules/primeng/resources/themes/ —

look for custom theme or styles.scss overrides.

• Nebular: nb-theme() in styles.scss with custom theme object.
• NG-ZORRO (Ant Design for Angular): ng-zorro-antd.less variables

or custom theme config in angular.json.

Responsive Patterns

Check for:

• @media queries in styles.scss and component styles
• Angular CDK BreakpointObserver usage in components
• Tailwind responsive prefixes if Tailwind is configured
• Angular Flex-Layout directives (fxLayout, fxFlex) in templates

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).

React / Next.js / Tailwind Extraction Patterns

This reference covers the most common frontend stack: React components with Tailwind CSS (and optionally CSS Modules, styled-components, or Emotion).

File Discovery Order

Read these files in priority order — higher-priority files give you the intended design system, lower-priority files show what actually shipped:

1. `tailwind.config.js` / `tailwind.config.ts` — The single most important file. Custom theme.extend.colors, fontFamily, spacing, borderRadius, and screens are the design system definition.

2. `globals.css` / `global.css` / `index.css` — CSS custom properties (--*), @layer directives, @font-face declarations, and base styles.

3. `theme.ts` / `theme.js` / `tokens.ts` — Explicit design token files. May export objects consumed by Tailwind config or CSS-in-JS providers.

4. `src/app/layout.tsx` or `src/App.tsx` — Root layout. Shows the global font setup (via next/font or <link>), body background, and overall structure.

5. *Component files (`.tsx / .jsx`)* — Look at 5-8 representative components to understand usage patterns.

Tailwind Config Extraction

The Tailwind config is structured and machine-readable. Extract directly:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#294056',      // → "Deep Muted Teal-Navy" — Primary CTA
        background: '#FCFAFA',   // → "Warm Barely-There Cream" — Page BG
      },
      fontFamily: {
        sans: ['Manrope', 'sans-serif'],
      },
      borderRadius: {
        card: '12px',
        button: '8px',
      },
      spacing: {
        section: '5rem',
      }
    }
  }
}

Map each custom value to a descriptive name and role.

CSS Custom Properties

Look for :root or html blocks in global CSS:

:root {
  --color-primary: #294056;
  --color-bg: #FCFAFA;
  --font-heading: 'Manrope', sans-serif;
  --radius-card: 12px;
  --spacing-section: 5rem;
}

These are explicitly declared tokens — use their names as clues for their intended role.

Next.js Font Patterns

Next.js uses next/font for optimized font loading:

import { Inter, Playfair_Display } from 'next/font/google'

const inter = Inter({ subsets: ['latin'], variable: '--font-inter' })
const playfair = Playfair_Display({ subsets: ['latin'], variable: '--font-display' })

The variable names hint at usage: --font-display for headlines, --font-inter for body.

Component Scanning Strategy

Don't read every component. Focus on these archetypes:

For each, look at the className prop for Tailwind classes or the styled() / css() calls for CSS-in-JS values.

CSS-in-JS Patterns (styled-components / Emotion)

If the project uses CSS-in-JS, look for theme providers:

// ThemeProvider wrapping the app
const theme = {
  colors: {
    primary: '#294056',
    background: '#FCFAFA',
  },
  fonts: {
    heading: 'Manrope, sans-serif',
  },
  radii: {
    card: '12px',
    button: '8px',
  }
}

This theme object is the design system. Extract directly.

Component Library Integration

If the project uses Chakra UI, Material UI, Ant Design, or shadcn/ui:

• Chakra: Look for extendTheme() calls — these override defaults.
• MUI: Look for createTheme() — palette, typography, and spacing overrides.
• Ant Design: Look for ConfigProvider theme prop or theme.ts overrides.
• shadcn/ui: Colors are defined as CSS custom properties in globals.css.

Check components.json for the style configuration.

The overrides are the design system — default values are the library's generic styling and should be noted but not emphasized.

Responsive Patterns

Check Tailwind's screens config and look for responsive class prefixes (sm:, md:, lg:, xl:) in components:

screens: {
  sm: '640px',   // Mobile landscape
  md: '768px',   // Tablet
  lg: '1024px',  // Desktop
  xl: '1280px',  // Large desktop
  '2xl': '1536px'
}

Look for container configuration and max-width patterns on layout components to determine content width strategy.

Svelte / SvelteKit Extraction Patterns

Svelte co-locates styles even more tightly than Vue. Every .svelte file has a <style> block that is scoped by default. Design systems in Svelte projects typically live in global CSS, CSS custom properties, or a shared theme store.

File Discovery Order

1. `src/app.css` / `src/app.postcss` — Global styles and CSS custom properties. The most important file.

2. `svelte.config.js` — May reference CSS preprocessors, Tailwind, or UnoCSS configuration.

3. `tailwind.config.js` (if Tailwind/UnoCSS) — Same extraction as React.

4. `src/lib/theme.ts` / `src/lib/tokens.ts` — Shared design tokens exported as JS objects.

5. `src/routes/+layout.svelte` — Root layout. Shows global font loading, background, and structural patterns.

6. Component `<style>` blocks — Scoped styles revealing component patterns.

Svelte Component Style Patterns

<script>
  export let variant = 'primary'
</script>

<button class="btn btn-{variant}">
  <slot />
</button>

<style>
  .btn {
    border-radius: 8px;
    padding: 0.875rem 2rem;
    font-weight: 500;
    transition: all 250ms ease-in-out;
  }

  .btn-primary {
    background-color: var(--color-primary);
    color: white;
  }

  .btn-primary:hover {
    filter: brightness(0.9);
  }
</style>

Extraction points:

• Component props (like variant) reveal the intended variant system
• var(--*) references → trace to app.css
• Transition values reveal the interaction design philosophy

SvelteKit Layout Patterns

• `+layout.svelte` at route root — Global header, footer, font loading
• `+layout.ts/js` — May load theme data or tokens
• `$lib/` directory — Reusable components and shared utilities

CSS Custom Properties Strategy

Svelte projects heavily use CSS custom properties for theming:

/* app.css */
:root {
  --color-primary: #294056;
  --color-bg: #FCFAFA;
  --color-surface: #F5F5F5;
  --color-text: #2C2C2C;
  --color-text-muted: #6B6B6B;

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

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-full: 9999px;

  --shadow-hover: 0 2px 8px rgba(0,0,0,0.06);
  --spacing-section: 5rem;
}

These variable names are highly intentional. Use them as the foundation of your design system extraction.

Skeleton UI / DaisyUI / Flowbite-Svelte

If component libraries are used:

• Skeleton UI: Theme defined in tailwind.config.js using Skeleton's

design token system. Look for custom theme config object.

• DaisyUI: Theme in tailwind.config.js → daisyui.themes array.
• Flowbite-Svelte: Standard Tailwind theming.

Vue / Nuxt Extraction Patterns

Vue projects have a distinctive styling architecture. Styles are often co-located with components inside <style> blocks, and Nuxt adds convention-based directories.

File Discovery Order

1. `nuxt.config.ts` / `nuxt.config.js` — May contain global CSS paths, font configuration, and Tailwind/UnoCSS module config.

2. `assets/css/main.css` (or similar) — Global styles, CSS custom properties, and font imports.

3. `tailwind.config.js` (if Tailwind is used) — Same as React; extract custom theme values directly.

4. `plugins/vuetify.ts` (if Vuetify) — Theme definition with custom palette and typography.

5. Component `<style>` blocks — Co-located styles (scoped or global).

Single-File Component (SFC) Patterns

Vue components bundle template, script, and style together:

<template>
  <div class="card">
    <h2 class="card__title">{{ title }}</h2>
  </div>
</template>

<style scoped>
.card {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.card__title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
</style>

Key extraction points:

• var(--*) references → trace back to global CSS for the actual values
• scoped styles → component-specific, but reveal consistent patterns
• BEM naming (.card__title) → hints at component hierarchy

Vuetify Theme Extraction

Vuetify projects define their design system explicitly:

// plugins/vuetify.ts
export default createVuetify({
  theme: {
    defaultTheme: 'light',
    themes: {
      light: {
        colors: {
          primary: '#294056',
          secondary: '#6B6B6B',
          background: '#FCFAFA',
          surface: '#F5F5F5',
          error: '#EF4444',
          success: '#10B981',
        }
      }
    }
  }
})

This is the design system declaration. Map each key to a functional role and descriptive name.

Quasar / PrimeVue / Element Plus

These component libraries use their own theming systems:

• Quasar: quasar.config.js → framework.config.brand for colors
• PrimeVue: CSS themes in assets/ or theme preset configuration
• Element Plus: SCSS variables in element-variables.scss

Look for the override file — that's where the project's unique values live.

CSS Scoping Behavior

Vue's scoped attribute adds data attributes for CSS isolation. When scanning for patterns, look at multiple components to find repeated values (same border-radius, similar padding, consistent color references). Repeated patterns across scoped styles = design system conventions.

Nuxt-Specific Patterns

• `app.vue` or `layouts/default.vue` — Root layout, reveals

global background, font loading, and overall structure.

• `assets/` — Global CSS, fonts, and images.
• `composables/` — May contain useTheme or useDesignTokens.
• `nuxt.config.ts` css array — Lists global stylesheets automatically

injected into every page.