Design Tokens

All tokens are CSS custom properties defined in @layer tokens on :root. Reference them with var(--token-name).

Color — Base Palette

Color — Text

Color — Accents

Color — Alpha / Surface Variants

Color — Shadows

Spacing Scale

Border Radius

Measure

Typography

Font Families

Font Size Scale

Font Weight

Letter Spacing

Typography Utility Classes

<span class="gradient-text">Gradient Text</span>

<p class="text--overline">Overline Label</p>

<p class="text--body">Body text here.</p>

<ul class="arrow-list">
  <li>First item</li>
  <li>Second item</li>
</ul>

<span class="badge">Category Tag</span>

<h4 class="text--col-label mb--xs">Column Label</h4>

Buttons

All buttons share the .btn base class. Variants and size modifiers are additive. Hover states lift and brighten; :focus-visible shows a cyan outline ring.

Default Size

<a href="#" class="btn btn--primary">Primary</a>
<a href="#" class="btn btn--ghost">Ghost</a>
<button class="btn btn--sm btn--rainbow" aria-pressed="false">
  <span class="btn__icon" aria-hidden="true">🌈</span>
</button>

Small — .btn--sm

<a href="#" class="btn btn--sm btn--primary">Primary</a>
<a href="#" class="btn btn--sm btn--ghost">Ghost</a>
<button class="btn btn--sm btn--rainbow" aria-pressed="false">
  <span class="btn__icon" aria-hidden="true">🌈</span>
</button>

Rainbow — pressed state

<button class="btn btn--sm btn--rainbow" aria-pressed="true">
  <span class="btn__icon" aria-hidden="true">🌈</span>
</button>

Hover: All buttons lift (translateY -2px) via .btn:hover. btn--primary also gains a glow shadow and the gradient border brightens to full opacity. btn--ghost border brightens, text becomes primary. btn--rainbow border brightens, subtle background appears, icon rotates 20° and scales. Note: btn--rainbow uses aria-pressed to reflect toggle state — JS sets this on interaction.

Layout

Container

The global page column. Centers content and applies consistent horizontal padding.

<div class="container">
  <!-- page content -->
</div>

Section

Shared wrapper for every page section. Adds vertical rhythm and a top border separator between adjacent sections.

<section class="section" id="my-section" aria-labelledby="my-heading">
  <div class="container">
    <header class="section__header">…</header>
    <!-- section content -->
  </div>
</section>

Section Header

The standard header block used at the top of every content section. Constrained to --measure (60ch). Children use margin-bottom for spacing — no flex/gap.

<header class="section__header">
  <p class="section__eyebrow">Eyebrow Label</p>
  <h2 class="section__title" id="section-heading">Section Title</h2>
  <p class="section__subtitle">Subtitle text here.</p>
</header>

Spacing: eyebrow margin-bottom: 0.75rem, title margin-bottom: 1rem, subtitle margin-bottom: var(--space-sm-plus). Header itself: margin-bottom: var(--space-lg).

Background Utilities

Semantic background color classes. Use these instead of inlining token values so section backgrounds stay in sync with the palette.

<section class="section bg--section">…</section>

Border Utilities

A pair of utilities for adding a 1px rainbow gradient border via pseudo-element. Opacity is controlled by --rainbow-border-opacity (default 0.35), making it overridable for animated reveal states.

<section class="section rainbow-border-top">…</section>

<nav class="nav rainbow-border-bottom">…</nav>

Grid — 3 Column

Responsive 3-column grid. 1-col on mobile, 2-col at 640px, 3-col at 960px. Used for cards, tech chips, and any uniform-item layouts.

<div class="grid--3col gap--sm-plus">
  <!-- items -->
</div>

Pair with a gap--* utility to control spacing. gap--sm-plus is the standard card grid gap.

Gap Utilities

Composable gap classes that map directly to the spacing scale. Apply to any flex or grid container.

Margin-Bottom Utilities

Composable margin-bottom classes for spacing typography elements without nested CSS. Prefer these over component-specific descendant selectors.

Components

Card

Used in the Philosophy section inside a .grid--3col wrapper. 3-col on desktop, 2-col on tablet, 1-col on mobile. Cards lift on hover with a pink glow.

<article class="card">
  <div class="card__icon" aria-hidden="true">⚙️</div>
  <h3 class="card__title">Title</h3>
  <p class="card__body text--body">Body text.</p>
</article>

In rainbow mode, card borders become a full-spectrum gradient via background-clip: border-box.

Accordion

An accessible accordion. Each item is a <button> trigger with aria-expanded and aria-controls. The body uses the hidden attribute; JS toggles is-open on the wrapper and removes hidden. The title gets a gradient on hover/open. The chevron rotates on open.

<div class="accordion">
  <article class="accordion__item" id="cs-id">
    <button class="accordion__trigger" aria-expanded="false" aria-controls="cs-id-body">
      <div class="accordion__meta">
        <span class="section__eyebrow">Org</span>
        <span class="badge">Category</span>
      </div>
      <h3 class="accordion__title">Title</h3>
      <p class="accordion__teaser text--body">Teaser.</p>
      <span class="accordion__chevron" aria-hidden="true"></span>
    </button>
    <div class="accordion__body" id="cs-id-body" hidden>
      <div class="accordion__grid">
        <div class="accordion__col">
          <h4 class="text--col-label mb--xs">Context</h4>
          <p>Prose.</p>
        </div>
        <div class="accordion__col">
          <h4 class="text--col-label mb--xs">Goals</h4>
          <ul class="arrow-list">
            <li>Goal one</li>
          </ul>
        </div>
      </div>
    </div>
  </article>
</div>

The gap: 1px between case study items is achieved by the flex container exposing its background through a 1px gap — not borders. JS toggles .is-open on the article and flips aria-expanded. The expandIn animation plays when the body is revealed.

Nav

Fixed to the top. Glassmorphism backdrop blur on desktop (removed on mobile for performance). The wordmark fades in via JS once the hero name scrolls out of view. The rainbow toggle lives here.

<nav class="nav" aria-label="Main navigation">
  <a href="/" class="nav__wordmark">
    <span class="gradient-text">Aly Fluckey</span>
  </a>
  <div>
    <button class="btn btn--sm btn--rainbow" id="rainbowToggle"
            aria-pressed="false" aria-label="Toggle Rainbow Time mode">
      <span class="btn__icon" aria-hidden="true">🌈</span>
    </button>
  </div>
</nav>

.nav.scrolled reveals the .rainbow-border-bottom gradient (sets --rainbow-border-opacity to 0.35) and adds a drop shadow — applied by JS on scroll. .nav.name-visible fades the wordmark in — applied by JS via IntersectionObserver on the hero name.

Badge Group

A labeled cluster of pill badges. Each group has an overline heading and a flex-wrapped chip row using .badge elements. Named by pattern, not content — reusable anywhere badges need a labeled grouping.

<div class="badge-group">
  <p class="text--overline mb--sm">Group Label</p>
  <div class="badge-group__chips">
    <span class="badge">Chip</span>
    <span class="badge">Chip</span>
  </div>
</div>

.badge-group__chips is display: flex; flex-wrap: wrap; gap: var(--space-xs). Uses .badge for the individual chips. Groups are placed inside a .grid--3col wrapper. The .mb--sm on the label drives spacing without nested CSS.

Footer

2-column grid on desktop (brand left, links right), stacked on mobile. The bottom bar spans full width and holds copyright copy and a second rainbow toggle.

<footer class="footer">
  <div class="container footer__inner">
    <div>
      <span class="footer__name gradient-text">Name</span>
      <p class="footer__tagline">Tagline.</p>
    </div>
    <nav class="footer__links" aria-label="...">
      <a href="#" class="footer__link">Link</a>
    </nav>
    <div class="footer__bottom">
      <span class="footer__copy">Copy text.</span>
      <button class="btn btn--sm btn--rainbow" aria-pressed="false">
        <span class="btn__icon" aria-hidden="true">🌈</span>
      </button>
    </div>
  </div>
</footer>

Animations & Motion

All animations respect prefers-reduced-motion: reduce — durations are collapsed to 0.01ms and iteration counts to 1.

Motion Tokens

Keyframe Animations

Transition Patterns

Rainbow Time

Rainbow Time is the default color scheme. The rainbow spectrum tokens live in :root and are applied directly to key components — no mode class required. The 🌈 toggle button (#rainbowToggle, #rainbowToggleFooter) is preserved for future use.

Spectrum Tokens

Components Using Rainbow Spectrum