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 & Gradient

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="section__eyebrow">Overline Label</p>

<span class="text--tag">Tag Label</span>

<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>

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> Rainbow Time
</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">🌈 Rainbow Time
</button>

Rainbow — pressed state

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

Hover: btn--primary lifts (translateY -2px) + glow shadow, border brightens. 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).

Components

Card

Used in the Philosophy section. A 4-column grid 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--overline">Context</h4>
          <p>Prose.</p>
        </div>
        <div class="accordion__col">
          <h4 class="text--overline">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>
      <span>Rainbow Time</span>
    </button>
  </div>
</nav>

.nav.scrolled adds a border and shadow — applied by JS on scroll. .nav.name-visible fades the wordmark in — applied by JS via IntersectionObserver on the hero name.

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> Rainbow Time
      </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 Mode

Activated by toggling the Rainbow Time button. Applies body.rainbow-mode and overrides key color tokens + specific component styles. Preference is persisted to localStorage under the key af-rainbow-mode.

Overridden Tokens

Affected Components

The two rainbow toggle buttons (#rainbowToggle and #rainbowToggleFooter) both have their aria-pressed attribute managed by JS in index.js → initRainbow().