Product

Developers

Company

OPEN SOURCE DESIGN SYSTEM

Ship CSS.
Drop the config.

AI-built pages usually look AI-built. Stride is the reason Gallop's don't. It's a complete design system: CSS framework, 250 curated icons, and vanilla JS utilities. Built entirely on native browser features. No Node. No PostCSS. No config files. Link one stylesheet and you're live.

View on GitHub →Read the docs

Stride CSS

oklch color science, @property animations, color-mix(). The CSS features you've been reading about, actually shipping in production

Stride Icons

250 hand-picked icons. Regular + Duotone weights. The ones you actually use, not the thousands you scroll past.

Stride JS

Dropdowns, sticky nav, tooltips, scroll animations. Vanilla JS. No framework dependency, no import hell.

Stride CSS

Your browser already supports this.

oklch color. @property animations. color-mix(). Container queries. These ship in every modern browser today. Stride is the first framework that treats them as baseline, not progressive enhancement. No Sass. No PostCSS. No build step between your code and the browser.

Design Tokens

Change one variable. Update everything.

Every color, spacing value, radius, and font in Stride is a CSS custom property. When your client says "make it warmer," you change one oklch hue value and the entire site adapts. Buttons, backgrounds, borders, hover states. No find-and-replace. No rebuilds.

oklch colors with perceptual uniformity
Consistent spacing scale (4px base)
Three curated font stacks included
Full dark mode via token swap

:root {
  --cream:      oklch(0.97 0.015 80);
  --navy:       oklch(0.20 0.025 265);
  --primary:    oklch(0.68 0.145 60);

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   32px;
  --space-xl:   64px;

  --radius-sm:  8px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  --font-heading: 'DM Serif Display';
  --font-body:    'Inter';
  --font-mono:    'JetBrains Mono';
}

@property

Animations CSS was never supposed to do.

You know the trick: CSS custom properties can't transition because the browser doesn't know their type. @property fixes that. Stride registers properties with explicit syntax, so you can smoothly animate oklch hue shifts, lightness fades, and chroma pulses — entirely in CSS. No GSAP. No Framer Motion. No JavaScript.

Smooth color channel transitions
Registered custom properties with type safety
Zero JavaScript animation overhead

@property --hue {
  syntax: '<number>';
  inherits: false;
  initial-value: 60;
}

.btn:hover {
  --hue: 280;
  transition: --hue 0.4s ease;
  background: oklch(0.68 0.15 var(--hue));
}

color-mix()

One brand color. Every state derived.

Hover states, focus rings, gradients. Stride derives them all from a single brand token using color-mix(in oklch, ...). No hardcoded hover colors. No palette spreadsheets. Change your brand color once and every interaction state follows. Your client's rebrand is a one-line change.

Perceptually uniform color mixing
No preprocessor — native browser CSS
Entire theme from one color token

.btn-primary {
  background: var(--brand);
}
.btn-primary:hover {
  background: color-mix(
    in oklch, var(--brand) 85%, white
  );
}
.btn-primary:active {
  background: color-mix(
    in oklch, var(--brand) 85%, black
  );
}

/* One brand token. Three states.
   Change --brand and it all follows. */

Container Queries

Components that adapt themselves.

Media queries respond to the viewport. Container queries respond to the parent. Drop a card grid into a sidebar and it stacks to one column automatically. Put the same grid in a full-width section and it goes three-across. No extra media queries. No layout-specific overrides. This is especially critical for AI-generated pages where components land in unpredictable containers.

Component-level responsiveness
Zero media query duplication
AI-friendly: works at any parent width

.card-grid {
  container-type: inline-size;
}

@container (min-width: 480px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@container (min-width: 720px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

You don't need a build step anymore.

oklch, @property, color-mix(), container queries, native nesting. These ship in every browser your users have. The build step that existed to work around browser limitations has no reason to exist.

Stride is 48 KB. Tailwind's purged output is 10-30 KB, but it needs Node, PostCSS, a config file, and a CI pipeline to produce it. We chose to ship the source. Your deploy is git push.

Stride Icons

The icons you actually use.

Most icon libraries give you 7,000 icons and let you figure out which 40 you need. We did that work for you. 250 curated icons covering navigation, actions, status, media, commerce, and dev tools. Regular (outlined) and Duotone (two-tone) weights. Inline SVGs that inherit currentColor.

Two Weights

Regular for UI. Duotone for impact.

Regular weight goes in navs, toolbars, and dense interfaces where icons need to be functional, not flashy. Duotone weight goes in hero sections, feature callouts, and onboarding flows where you want visual emphasis. Same 250 icons in both — swap one path and the entire tone shifts.

REGULAR

DUOTONE

<!-- Regular weight -->
<img src="/stride-icons/regular/heart.svg" />

<!-- Duotone weight -->
<img src="/stride-icons/duotone/heart.svg" />

<!-- Inline SVG (inherits color) -->
<svg class="stride-icon" width="24" height="24">
  <use href="/stride-icons/sprite.svg#heart" />
</svg>

<!-- React component -->
import { StrideIcon } from '@/components/StrideIcon';
<StrideIcon name="heart" weight="duotone" />

Browse the collection.

Searchable gallery with category filters, weight toggle, and click-to-copy SVG code.

arrow-right

check

gear

bell

envelope

magnifying-glass

user

heart

star

lock

code

rocket

lightning

globe

eye

database

sparkle

shield-check

chart-line-up

play

camera

shopping-cart

terminal

cloud

Browse all 250 icons →

250

unique icons

weights (Regular + Duotone)

270

KB total package size

Why only 250?

Because nobody needs thousands of icons. We picked the 250 that cover real-world web app UI: navigation, actions, status indicators, media controls, commerce, dev tools, and communication. No guessing icon names. No 2 MB sprite sheets. A set small enough to memorize.

Stride JS

Interactive UI. Zero dependencies.

Sticky navs, dropdowns, scroll animations, tooltips. Things every site needs, and none of them should require React, Vue, or a 200 KB animation library. Stride JS is vanilla JavaScript driven by HTML data attributes. Works on any site, any CMS, any framework.

Navigation

Professional nav. Zero config.

The sticky nav you'd build yourself: glassmorphism backdrop blur on scroll, light and dark variants, mobile hamburger with slide animation. Plus the details you'd forget. Body scroll lock, focus trapping, ARIA attributes. All handled.

Glass-blur backdrop on scroll
Light and dark variants built in
Mobile toggle with scroll lock
Accessible by default (ARIA, focus trap)

<!-- That's the entire API -->
<nav class="gallop-nav gb-navbar-sticky">
  <a class="nav-logo" href="/">Brand</a>

  <div class="nav-links">
    <a href="/about">About</a>
    <a href="/pricing">Pricing</a>
  </div>

  <!-- Mobile toggle (auto-managed) -->
  <button class="nav-toggle"
          aria-label="Menu">
    <span></span><span></span><span></span>
  </button>
</nav>

<!-- Add nav-light for cream pages -->
<nav class="gallop-nav gb-navbar-sticky nav-light">
  ...
</nav>

Dropdowns

Mega menus without the headache.

Building a mega menu from scratch takes a day. Getting hover timing right takes another. Stride handles it all. Configurable delay timers so the menu doesn't flash on casual mouse passes, keyboard navigation, mobile touch support, and staggered entrance animations. No FOUC. No jank.

Smart hover delay — no accidental flicker
Staggered entrance animations
Keyboard and touch accessible
Spotlight and bottom bar patterns

<div class="gb-dropdown mega-menu">
  <div class="mega-content-wrap">
    <div class="mega-col">
      <a class="dd-item" href="/product">
        <div class="dd-icon">⚡</div>
        <div class="dd-text">
          <h4>Product Name</h4>
          <p>Description text</p>
        </div>
      </a>
    </div>
    <div class="mega-col-spotlight">
      <h4>Featured</h4>
      <p>Highlight content here.</p>
    </div>
  </div>
  <div class="mega-bottom-bar">
    <span>Announcement</span>
    <a href="/cta">Learn more →</a>
  </div>
</div>

Scroll Animations

Scroll reveal. 40 lines of JS.

IntersectionObserver-powered reveal animations: fade-up, fade-in, slide-left, slide-right. Configure animation type, delay, and stagger directly in your HTML. No animation library. No scroll event listeners. Respects prefers-reduced-motion automatically. Your users' accessibility preferences aren't optional.

Four animation types built in
Configurable delay and stagger from HTML
Reduced-motion respected automatically
IntersectionObserver — not scroll events

<!-- Basic reveal -->
<div data-scroll-animation="fade-up">
  This fades up when scrolled into view.
</div>

<!-- With delay -->
<div data-scroll-animation="fade-up"
     data-scroll-delay="200">
  200ms delayed reveal.
</div>

<!-- Staggered grid -->
<div class="pillar-grid">
  <div data-scroll-animation="fade-up"
       data-scroll-delay="0">Card 1</div>
  <div data-scroll-animation="fade-up"
       data-scroll-delay="100">Card 2</div>
  <div data-scroll-animation="fade-up"
       data-scroll-delay="200">Card 3</div>
</div>

Tooltips

One attribute. That's the API.

Add data-tooltip="text" to any element. That's it. Auto-positioning keeps it visible, keyboard users can access it, screen readers announce it. No tooltip library. No initialization function. No configuration object. The markup is the interface.

Zero config — just add a data attribute
Auto-positioning within viewport
Keyboard and screen-reader accessible

<!-- Add a tooltip to anything -->
<button data-tooltip="Save your changes">
  💾 Save
</button>

<span data-tooltip="Copied!" class="copy-btn">
  📋 Copy code
</span>

<!-- Position control -->
<div data-tooltip="I appear above"
     data-tooltip-position="top">
  Hover me
</div>

<!-- That's it. No JS to write. -->

HTML is the API.

Every Stride JS feature is controlled by HTML data attributes. No initialization functions. No config objects. No import statements. Add data-scroll-animation and it animates. Add data-tooltip and it shows. The markup is the interface.

This is what makes Stride JS AI-native. When Gallop Builder builds a page, it adds interactive behavior by writing HTML attributes. No separate JavaScript coordination, no post-processing. The page works the moment it's built.

Get Started

Three lines. You're live.

<link rel="stylesheet" href="stride.css">
<script src="stride.js" defer></script>

<!-- 250 icons available at /stride-icons/ -->

MIT licensed. Zero dependencies. No build step. Works with WordPress, Next.js, static HTML, or anything that renders to a browser.

Open Source

Drop it in. Ship today.

MIT licensed. Zero dependencies. No build step between you and production.

Gallop Builder

Stride

Rider AI

Pricing

Architecture

Learn Gallop

GitHub

About

From the Stables

Contact

Ship CSS. Drop the config.

Stride CSS

Stride Icons

Stride JS

Your browser already supports this.

Change one variable. Update everything.

Animations CSS was never supposed to do.

One brand color. Every state derived.

Components that adapt themselves.

You don't need a build step anymore.

The icons you actually use.

Regular for UI. Duotone for impact.

Browse the collection.

Why only 250?

Interactive UI. Zero dependencies.

Professional nav. Zero config.

Mega menus without the headache.

Scroll reveal. 40 lines of JS.

One attribute. That's the API.

HTML is the API.

Three lines. You're live.

Drop it in. Ship today.

Get Early Access

Ship CSS.
Drop the config.