Documentation
Stride CSS.
The oklch-native design framework built for AI-generated layouts. Zero dependencies, fully open source.
Installation
Add Stride to your project.
Three ways to include Stride. No build step required for any of them.
CDN (recommended)
Add a single link tag to your HTML. Always serves the latest version. Best for quick starts and prototyping.
<link rel="stylesheet"
href="https://cdn.gallopbuilder.com
/stride/latest/stride.min.css">Self-hosted
Download stride.css or stride.min.css and host it alongside your project files. Full control over versioning.
<link rel="stylesheet"
href="/css/stride.min.css">npm
Install via npm for framework integrations. Import in your entry file or reference in your bundler config.
npm install @gallop/stride-css
// In your entry file:
import '@gallop/stride-css';Design Tokens
Color, spacing, and type.
Every token in Stride uses oklch — perceptually uniform color that produces predictable, accessible combinations.
Color Tokens
--primaryoklch(0.68 0.145 60) — Warm orange. Used for CTAs, links, and accent elements.--neutral-900oklch(0.20 0.02 265) — Deep navy. Backgrounds, headings, and primary text.--neutral-100oklch(0.97 0.015 80) — Warm cream. Light backgrounds and card surfaces.--successoklch(0.72 0.22 142) — Green. Status indicators and confirmation states.--dangeroklch(0.55 0.2 25) — Red. Error states and destructive actions.Spacing Scale
--space-xs4px — Tight gaps between inline elements.--space-sm8px — Small internal padding, icon gaps.--space-md16px — Default paragraph margin, card padding.--space-lg32px — Section gaps, grid gutters.--space-xl64px — Major section separators.Typography
heading-xlclamp(44px, 6vw, 72px) — Hero headings. DM Serif Display.heading-lgclamp(32px, 4vw, 48px) — Section headings. DM Serif Display.heading-sm20px — Card headings and subsections. Inter semibold.body-text17px — Paragraph body. Inter regular, 1.7 line-height.Layout
Structure classes.
Stride uses a section → container → grid → element hierarchy. Every layout class is composable and responsive.
gp-container: Centered max-width container with horizontal padding.pad-section: Vertical section padding (120px top/bottom).flow-grid: Auto-fit grid for card layouts (min 300px columns).pillar-grid: 2-column or 3-column feature pillar layouts.feature-row: Two-column text + visual layout with auto-reversing.section-intro: Centered eyebrow + heading + body block (max 680px).
<!-- Standard page section -->
<section class="section-cream pad-section">
<div class="gp-container">
<div class="section-intro">
<p class="label-sm label-accent">
Features
</p>
<h2 class="heading-lg">
What we offer.
</h2>
</div>
<div class="flow-grid">
<div class="flow-card">...</div>
<div class="flow-card">...</div>
<div class="flow-card">...</div>
</div>
</div>
</section>Components
Pre-built patterns.
Buttons
btn-warm btn-warm-primary for filled CTAs, btn-warm btn-warm-outline for secondary actions. Auto-gradient backgrounds with shimmer animation on primary.
Cards
flow-card for content cards with numbering. pillar for feature pillars. pillar-dark for dark-background variants. All include hover transitions.
Navigation
gallop-nav with gb-navbar-sticky for sticky behavior. Supports nav-light variant for cream-background pages. Built-in mega menu panels.
Code Blocks
code-block for standard blocks, code-block-flush for no-margin display inside cards, code-block-centered for centered standalone blocks.
Responsive
Breakpoints.
Stride uses two primary breakpoints. All layout classes include responsive behavior by default.
Stride intentionally uses minimal breakpoints. The layout system relies on clamp(), auto-fit grids, and proportional spacing to handle most responsive behavior without media queries.
Icons
250 curated icons.
Every icon is available in two weights: regular (outline) and duotone (filled accent). SVG format, individually importable, no icon font required.
Categories include navigation, actions, status, media, commerce, dev tools, social, and communication.
<!-- Regular weight -->
<img src="/stride-icons/regular
/arrow-right.svg"
alt="Arrow right" />
<!-- Duotone weight -->
<img src="/stride-icons/duotone
/arrow-right.svg"
alt="Arrow right" />
<!-- Or inline SVG for styling -->
<svg class="icon icon-sm
text-primary">
<use href="#arrow-right" />
</svg>Open Source
Explore the framework.
Stride CSS is MIT licensed and fully open.