Setting the file. One moment.
Skill 07 · Stitch::extract Design Md
Subchapter 7.2
references/plain-css.mdMarkdown4 KBView on GitHub
For projects without a JavaScript framework — static sites, WordPress themes, vanilla HTML/CSS, or CSS preprocessor-heavy projects.
index.html / *.html — Check <link> tags and <style> blocks
for stylesheet references, inline styles, and font loading.
Main stylesheet (style.css, main.css, app.css) — The primary
CSS file. Look for custom properties, base styles, and typography.
_variables.scss / _tokens.scss / variables.less — Preprocessor
variable files containing design tokens.
_mixins.scss — Reusable style patterns reveal design conventions.
Component/module stylesheets — Individual CSS files for UI components.
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.
// _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.
@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.
For static sites or WordPress themes:
style.css header comment for theme metadata.
Look for wp-content/themes/<name>/assets/css/ for stylesheets.
functions.php may enqueue Google Fonts._sass/ or assets/css/ directories.<style> blocks.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.
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).
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).