Design System

Hover over any sample to see its CSS.

Colors

Accent

Secondary

Gradient

Main text

Muted

Border

Callout / Objective bg

White

Accent soft

Card/media bg

Border ghost

Typography

Typography classes (.eyebrow, .subtitle, .org, etc.) define only font styling — no margins or padding. Spacing is applied explicitly in HTML via margin utilities (e.g. mb-6, mb-12, mt-32). See Spacing section for the full utility scale.

Type scale

Font sizes and one example use each. Use these sizes consistently for hierarchy.

Size	Example use
0.75rem	Metric labels
0.8rem	case-block__title captions
0.85rem	Logo role, footer brand
0.9rem	.text-small, accent label
1rem	p (body), .eyebrow
1.1rem	.subtitle
1.4rem	Logo (script)
1.5rem	h3
1.75rem	h2, .org
3rem	Case study h1
3.5rem	.hero h1 (homepage)

Typography (by hierarchy — largest to smallest)

Role / Style	Purpose	HTML	Classes / IDs	Example
Hero headline	Main page title on the homepage	h1	.hero	Designing for Impact
Section title	Major section headings (e.g. Recommendations). Use h2.	h2	—	Recommendations
Card org / company	Company or organization name in case study heroes and cards	p	.org	The Walt Disney Company
Index work card company	Company name on homepage work blocks	h4	.blue	The Walt Disney Company
Subsection / Card title	Section subheadings and case card titles. Use h3.	h3	—	Profitability through price increases
Logo (script)	Site name in script/display font	span	.logo__name	Caroline Win
Subtitle	Supporting text below section titles	p	.subtitle	Thanks to all my teammates!
Body text	Primary body: hero intro, card summary	p	—	As a scientist-turned-designer…
Footer body / links	Footer body text and navigation links (use standard p and a)	p, a	—	Message on LinkedIn or email.
Text small	Small body copy (e.g. metadata)	p	.text-small	Jan 2023 to present
Logo subtitle	Tagline or role below logo	span	.logo__role	Product Designer, Researcher, & Builder
Eyebrow	Small uppercase labels above section titles	p	.eyebrow	Selected Work

Buttons

Style	Purpose	Example
Primary CTA	Main call-to-action for primary actions	Learn More
Ghost / secondary	Secondary or less prominent actions	Secondary action
Text link	Minimal link style for tertiary actions

Corners and shadows

Style	Purpose	Example
Radius extra large	Largest corner radius for major containers
Radius large	Standard large radius for cards and sections
Radius medium	Medium radius for buttons and smaller elements
Pill	Fully rounded for pill-shaped elements
Shadow soft	Subtle depth shadow for elevated elements
Shadow primary	Primary button default shadow

Layout

Container

Main content width and horizontal margins. --container-max: 1280px, --container-margin: 72px

Reading width (measure)

Comfortable line length: 45–75 characters. .hero p uses max-width: 42rem.

Sections

.section, .section__header, .section--work, .section--recommendations, .section--anchor

Recommendations section content

Content fills 100% viewport width minus 72px left and right margins (36px each side). Use .recommendations__inner with max-width: 1280px; section keeps full-width background.

Marquee

Infinite left-sliding text. Use .marquee, .marquee__track, .marquee__text. Respects prefers-reduced-motion.

Media: static vs lightbox

.static_media — no zoom. .case-block__media — hover lift, click opens lightbox.

Footer

See Footer in Patterns tab.

Spacing

Explicit spacing in HTML

Apply spacing via margin utilities: mb-6, mb-12, mt-32, etc.

Margin utilities

mb-0, mb-2, mb-4, mb-6, mb-8, mb-12, mb-16, mb-24, mb-32, mb-40 (and mt-*).

Space token scale (CSS)

--space-2 through --space-120. Section gaps use --space-120.

Reusable layout components for case study pages. Copy the HTML from each block into your new page. Click "View HTML" to expand code snippets. Source files live in components/.

Global

Header and footer used across the site. Use header.html for all pages.

Header

HTML · components/header.html

View HTML

<header class="site-header">
  <div class="site-header__inner">
    <a href="index.html" class="logo">
      <span class="logo__name">Caroline Win</span>
      <span class="logo__role">Product Designer, Researcher, & Builder</span>
    </a>
    <button type="button" class="nav-toggle" aria-label="Open menu" aria-expanded="false" aria-controls="main-nav">
      <span class="nav-toggle__bar"></span>
      <span class="nav-toggle__bar"></span>
      <span class="nav-toggle__bar"></span>
    </button>
    <nav class="nav" id="main-nav" aria-label="Main">
      <a href="index.html" class="nav__link nav__link--pill" aria-current="page">Work</a>
      <a href="about.html" class="nav__link">About</a>
      <a href="resume.html" class="nav__link">Resume</a>
    </nav>
  </div>
</header>

Navigation variants & focus states

Pill link (active): Use nav__link nav__link--pill with aria-current="page".

Plain nav links: Use nav__link alone.

Examples: Work About Resume

Footer

Footer with copy block and social links. Use site-footer__copy, site-footer__heading, site-footer__text, site-footer__social, site-footer__icon.

HTML · components/footer.html

View HTML

<footer class="site-footer">
  <div class="site-footer__inner">
    <div class="site-footer__copy">
      <h4 class="site-footer__heading">Say hello!</h4>
      <p class="site-footer__text">Send me a message on <a href="...">LinkedIn</a> or at <a href="mailto:...">email</a>.</p>
    </div>
    <nav class="site-footer__social" aria-label="Social links">
      <a href="..." class="site-footer__icon" aria-label="Instagram"><img src="..." alt="" width="24" height="24" /></a>
      <a href="..." class="site-footer__icon" aria-label="LinkedIn"><img src="..." alt="" width="24" height="24" /></a>
    </nav>
    <p class="site-footer__meta">
      <a href="design-system.html" class="site-footer__meta-link">Design System</a> · © 2026 Caroline Win. All rights reserved.
    </p>
  </div>
</footer>

Index page

Homepage layout blocks. Use inside <main> on the index page.

Index hero

Hero with gradient headline, intro text, optional marquee, and circular profile image.

Designing for Impact

As a scientist-turned-designer with 11 years of experience grounded in human-computer interaction, I transform complex problems into elegant human-centered experiences.

HTML · .hero, .hero__content, .hero__visual, .hero__image-wrap

View HTML

<section class="hero">
  <div class="hero__content">
    <h1>Your Headline</h1>
    <p>Your intro paragraph.</p>
    <div class="marquee mt-32" aria-hidden="true">
      <div class="marquee__track">
        <span class="marquee__text">Brand · Experience · </span>
        <span class="marquee__text" aria-hidden="true">Brand · Experience · </span>
      </div>
    </div>
  </div>
  <figure class="hero__visual">
    <div class="hero__image-wrap">
      <img src="..." alt="Your name, role" width="320" height="320" />
    </div>
  </figure>
</section>

Work section

Two-column layout with grid-2col__col for content and static_media for images.

The Walt Disney Company

Streamlining Price Change Operations

Empowering business operations teams at Disney…

Configuration Time

66%

description

Learn More

HTML · section.grid-2col.case-block

View HTML

<section class="grid-2col case-block">
  <div class="grid-2col__col">
    <h4 class="blue">Company Name</h4>
    <h2>Project Title</h2>
    <p>Brief description.</p>
    <a href="#" class="btn btn--primary">Learn More</a>
  </div>
  <div class="static_media"><img src="..." alt="Screenshot" /></div>
</section>

Case study shell

Full page structure for a new case study. Use disney-case-study.html as reference.

Structure

body.case-body → header → main.case-main → footer. Hero: org, h1, subtitle, grid-3col. Use grid-2col case-block for content, gray-block for objective.

View HTML

<body class="case-body">
  <!-- PASTE: components/header.html -->
  <main class="case-main">
    <!-- PASTE: hero, case-block sections -->
  </main>
  <!-- PASTE: footer -->
</body>

Case study sections

Long-form patterns. Use inside <main class="case-main">. See disney-case-study.html.

Case study hero

org, h1, subtitle, then grid-3col with meta, My Role, Jump To.

The Walt Disney Company

Streamlining Disney's Global Price Change Operations

Brief project summary.

Timeframe

Jan 2023 to present

My Role

Lead designer
Interaction designer

Profitability through price increases

Body paragraphs.

Objective (gray-block / gray-block__centered)

Objective

Reduce operational steps and time spent on manual configurations.

Outcome metrics row

Use grid-3col with metric-large and text-small.

Operational Efficiency

66%

decrease in configuration time

Total Clicks

53%

decrease in clicks

Case blockquote

"Quote from a user or stakeholder."

Attribution