A Gutenberg-style CSS system for standalone landing pages. Consistent spacing, semantic HTML, and simple class names.
Landing pages use a standalone layout with isolated CSS/JS bundles.
Add a file to src/landing-pages/ with this frontmatter:
---
title: My Landing Page
meta_description: Page description for SEO
permalink: /my-page/
---
<main>
<header class="hero">
<h1>Your Content Here</h1>
</header>
</main>design-system-base.html layoutdesign-system-bundle.css onlydesign-system.js for scroll animations<main>, <section>, <article>, <figure>Override these in your HTML with inline styles or custom CSS.
--bg: #fafafa
--bg-alt: #f3f4f6
--card-bg: #ffffff
--text: #1f2937
--text-muted: #6b7280
--primary: #2563eb
--primary-dark: #1d4ed8
--primary-light: #dbeafe
--secondary: #7c3aed
--accent: #10b981--font-sans: system-ui, ...
--font-mono: ui-monospace, ...
Font sizes (SCSS):
$font-size-xs: 0.75rem (12px)
$font-size-sm: 0.875rem (14px)
$font-size-base: 1rem (16px)
$font-size-md: 1.125rem (18px)
$font-size-lg: 1.25rem (20px)
$font-size-xl: 1.5rem (24px)
$font-size-2xl: 2rem (32px)
$font-size-3xl: 2.5rem (40px)
$font-size-4xl: 3rem (48px)
$font-size-5xl: 4rem (64px)Base unit: 8px
$space-xs: 8px
$space-sm: 16px
$space-md: 24px
$space-lg: 32px
$space-xl: 48px
$space-2xl: 64px
$space-3xl: 96px
$space-4xl: 128pxOverride design tokens in _theme-variables.scss to customize the entire design system.
The design system uses SCSS variables with !default flags, allowing you to override any value by setting it before the default is defined.
src/css/_theme-variables.scssThis file is unique per-site - it's where site owners customize the template.
// Uncomment to customize colors
$color-primary: #059669;
$color-primary-dark: #047857;
$color-primary-light: #d1fae5;
// Uncomment to change spacing
$space-unit: 10px;
// Uncomment for custom fonts
$font-sans: "Inter", sans-serif;Colors:
$color-bg, $color-bg-alt
$color-text, $color-text-muted
$color-primary, $color-primary-dark
$color-primary-light
$color-secondary, $color-accent
Spacing (8px base):
$space-unit (scales all)
$space-xs → $space-4xl
Widths:
$width-narrow (680px)
$width-default (900px)
$width-wide (1200px)Font families:
$font-sans
$font-mono
Font sizes:
$font-size-xs → $font-size-5xl
Line heights:
$line-height-tight (1.2)
$line-height-normal (1.5)
$line-height-relaxed (1.625)Border radius:
$radius-sm → $radius-full
Borders:
$border-light
$border-medium
$border-dark
Transitions:
$transition-fast (150ms)
$transition-normal (250ms)
$transition-slow (350ms)
Breakpoints:
$bp-sm → $bp-xlCenter content with max-width and responsive padding.
<div class="container">
Wide container (1200px)
</div>
<div class="container--default">
Default container (900px)
</div>
<div class="container--narrow">
Narrow container (680px)
</div>Add classes to <section> elements.
<section>
Default padding (96px vertical)
</section>
<section class="compact">
Compact padding (64px)
</section>
<section class="alt">
Gray background
</section>
<section class="dark">
Dark background, light text
</section>
<section class="gradient">
Primary-to-purple gradient
</section>This is a section.compact with container--narrow
This is section.dark.compact - text color automatically inverts
This is section.gradient.compact
Full-width header with centered content. Use inside a <header> element.
<header class="hero gradient">
<span class="badge">Optional Badge</span>
<h1>Main Headline</h1>
<p class="lead">Subtitle text with larger font</p>
<div class="actions">
<a href="#" class="btn btn--primary btn--lg">Primary</a>
<a href="#" class="btn btn--secondary btn--lg">Secondary</a>
</div>
</header>Classes: .hero, .badge, .lead, .actions
<a class="btn btn--primary">Primary</a>
<a class="btn btn--secondary">Secondary</a>
<a class="btn btn--ghost">Ghost</a>
<!-- Sizes -->
<a class="btn btn--primary btn--lg">Large</a>
<a class="btn btn--primary btn--sm">Small</a>Use <article class="feature"> inside a .features grid.
<div class="features">
<article class="feature" data-reveal>
<div class="icon">🚀</div>
<h3>Feature Title</h3>
<p>Feature description text.</p>
</article>
<!-- more features... -->
</div>The .features container auto-fits cards at 300px minimum width.
Static HTML, no server processing.
Override CSS variables per-card.
Set --primary inline to change icon color.
<!-- Auto 1/2/3 columns based on screen -->
<div class="grid">...</div>
<!-- Force 2 columns on tablet+ -->
<div class="grid--2">...</div>
<!-- Force 4 columns on tablet+ -->
<div class="grid--4">...</div>Scrollable card rows with prev/next navigation.
<div class="slider-container">
<div class="slider">
<article class="feature">Card 1</article>
<article class="feature">Card 2</article>
<article class="feature">Card 3</article>
<!-- Add more cards... -->
</div>
<nav class="slider-nav">
<button class="slider-prev">←</button>
<button class="slider-next">→</button>
</nav>
</div>Navigation buttons auto-hide when content doesn't overflow. Button states (disabled) update on scroll.
prefers-reduced-motionOverride the default 300px/340px card width with inline styles:
<div class="slider">
<article class="feature" style="width: 400px;">
Wider card
</article>
</div>Two-column layouts for text + image sections.
<div class="split">
<article data-reveal="left">
<h2>Text Content</h2>
<p>Description...</p>
</article>
<figure data-reveal="scale">
<img src="..." alt="...">
</figure>
</div>
<!-- Reverse order (image left) -->
<div class="split split--reverse">
<article data-reveal="right">...</article>
<figure data-reveal="scale">...</figure>
</div>Use <article> for text, <figure> for images/media. The figure gets rounded corners and border automatically.
Text on left, image/content on right. Stacks vertically on mobile.
The data-reveal="left" makes it slide in from the left.
Images, code blocks, or any content
Two-tone sections that span the full viewport width.
<div class="split-full split-full--dark-left">
<div class="split-full__left">
<div>
<h2>Left Content</h2>
<p>Dark background section.</p>
</div>
</div>
<div class="split-full__right">
<div>
<h2>Right Content</h2>
<p>Light background section.</p>
</div>
</div>
</div>Variants: .split-full--dark-left, .split-full--dark-right, .split-full--primary-left, .split-full--primary-right
This is the left half with a dark background. Content is automatically aligned to the right edge to meet the center.
Learn MoreThis is the right half with a light background. Content aligns to the left edge from center.
Get StartedThe left side uses the default background color.
The right side uses the primary brand color. Text automatically inverts to white.
<div class="stats">
<div class="stat" data-reveal>
<strong>99%</strong>
<span>Uptime</span>
</div>
<div class="stat" data-reveal>
<strong>50k</strong>
<span>Users</span>
</div>
</div>Terminal-style code display with colored window dots.
<div class="code-block">
<header>
<div class="dots">
<span></span>
<span></span>
<span></span>
</div>
<span>filename.js</span>
</header>
<pre><code>your code here</code></pre>
</div>The dots auto-color red/yellow/green. Use <span> with inline styles for syntax highlighting.
<aside class="cta">
<h2>Ready to Start?</h2>
<p>Call to action description.</p>
<a href="#" class="btn btn--secondary btn--lg">
Get Started
</a>
</aside>Use <aside> for semantic markup. The CTA has a gradient background and inverted colors.
Add data-reveal to animate elements on scroll.
<!-- Fade up (default) -->
<div data-reveal>...</div>
<!-- Slide from left -->
<article data-reveal="left">...</article>
<!-- Slide from right -->
<article data-reveal="right">...</article>
<!-- Scale up -->
<figure data-reveal="scale">...</figure>Animations respect prefers-reduced-motion. Elements get .is-visible class when in viewport.
data-reveal
Fades up
data-reveal="left"
Slides from left
data-reveal="right"
Slides from right
.text-center
.text-muted
.text-primary.mt-0 margin-top: 0
.mb-0 margin-bottom: 0
.mt-lg margin-top: 32px
.mb-lg margin-bottom: 32px
.mt-xl margin-top: 48px
.mb-xl margin-bottom: 48px.sr-only
Visually hidden but
accessible to screen readersStandard <ul> and <ol> have default styling with proper spacing.
Available mixins in _mixins.scss
@include flex-row($gap, $align, $justify)
@include flex-col($gap, $align, $justify)
@include flex-center
@include flex-between
@include flex-wrap($gap)
@include grid($columns, $gap)
@include grid-auto($min-width, $gap)
@include container($max-width)
@include section($padding-y)@include card($padding, $radius)
@include card-hover
@include button-base
@include button-primary
@include button-secondary
@include button-ghost
@include focus-ring@include heading-xl
@include heading-lg
@include heading-md
@include heading-sm
@include body-lg
@include body-base
@include body-sm@include scroll-reveal
@include scroll-reveal-left
@include scroll-reveal-right
@include scroll-reveal-scale
@include stagger-children($delay, $max)
@include hover-float($distance)@include mobile-only { }
@include tablet-up { }
@include desktop-up { }
@include large-desktop { }
@include reduced-motion { }
Breakpoints:
$bp-sm: 650px
$bp-md: 768px
$bp-lg: 1000px
$bp-xl: 1200px@include sr-only
@include aspect-ratio($w, $h)
@include truncate($lines)
@include glass($blur, $opacity)src/
├── landing-pages/
│ ├── landing-pages.json # Default frontmatter
│ └── *.html # Your landing pages
│
├── _layouts/
│ └── design-system-base.html # Standalone layout (.design-system)
│
├── _includes/
│ ├── head-meta.html # Shared meta tags
│ ├── head-schema.html # Shared JSON-LD
│ │
│ └── design-system/ # Accessible component templates
│ ├── code-block.html # Terminal-style code display
│ ├── feature-icon.html # Accessible icon with aria
│ ├── features.html # Features as semantic list
│ ├── section-header.html # Section title + subtitle
│ └── stats.html # Stats as description list
│
├── css/
│ ├── design-system-bundle.scss # Entry point for design system styles
│ ├── _theme-variables.scss # YOUR SITE OVERRIDES (edit this!)
│ ├── _variables.scss # Default values (don't edit)
│ ├── _mixins.scss # Layout, card, button mixins
│ │
│ └── design-system/ # Modular SCSS components
│ ├── _index.scss # Imports all components
│ ├── _base.scss # Reset, typography, .design-system
│ ├── _buttons.scss # Button styles
│ ├── _hero.scss # Hero section
│ ├── _feature.scss # Feature cards
│ ├── _stats.scss # Stats display
│ ├── _cta.scss # Call to action
│ ├── _split.scss # Split layouts (+ full-width)
│ ├── _grid.scss # Grid layouts
│ ├── _slider.scss # Horizontal slider
│ ├── _items.scss # Item lists
│ ├── _code-block.scss # Code display
│ ├── _footer.scss # Footer
│ └── _utilities.scss # Utility classes
│
└── _lib/public/
└── design-system.js # Scroll animations