Zest UI — Component Kit

Colours

The palette is anchored by warm off-white (paper) and near-black (ink), accented with electric lime, hot pink, deep purple, cyan, orange, and yellow. Each accent is vivid enough to carry a full section background.

paper

ink

lime

lime-deep

pink

purple

cyan

yellow

orange

red

pink-soft

purple-soft

cyan-soft

orange-soft

muted

muted-fg

Typography

Two font families: Bagel Fat One (display, headings, CTAs — loaded from Google Fonts) and Space Grotesk (body, UI text). Headings use tight negative tracking; body uses normal spacing.

H1 — Bagel Fat One, 88px, tracking -0.025em

Break the Sit Habit.

H2 — Bagel Fat One, 48px, tracking -0.01em

Return to natural, slightly silly movement.

H3 — Bagel Fat One, 20px

Neck Relief · Back Pain · Afternoon Recharge

Body — Space Grotesk, 16px, weight 400

Move every hour, feel better every day. Tiny exercises that take under 30 seconds — right at your desk, in your slippers.

Small / UI — Space Grotesk, 14px, weight 600

Exercises · Chrome · Cards · Philosophy

Eyebrow — 11px, weight 600, 0.1em tracking, uppercase

Start with what hurts

Shadows & Radius

The "sticker shadow" is the core elevation system — a flat offset shadow in the ink colour that makes elements look like stickers or cut-out shapes. Radius scales from 8px to pill-shaped.

sticker-sm
2px 2px 0 0

sticker
4px 4px 0 0

sticker-lg
6px 6px 0 0

sm
8px

md
16px

base
20px

lg
24px

xl
32px

2xl
36px

3xl
48px

full
pill

Animations

Six keyframe animations: wiggle, wobble, spin-slow, float, notif-pop. Apply via CSS animation property. All defined in tokens.css.

🤸

wiggle

🎪

wobble

⭐

spin-slow

🏄

float

🔔

notif-pop

Button

Thick 3px border, sticker shadow, display font. Hover lifts and rotates slightly. Active state slams down (translateX/Y by shadow offset) cancelling the shadow for a pressed effect.

<!-- Primary (lime) -->
<button class="btn btn-primary btn-lg">Get the App</button>

<!-- Secondary (paper) -->
<button class="btn btn-secondary btn-lg">Add to Chrome — free</button>

<!-- Pink -->
<button class="btn btn-pink btn-lg">Try it now</button>

<!-- Purple -->
<button class="btn btn-purple btn-lg">Learn more</button>

<!-- Ink -->
<button class="btn btn-ink btn-lg">Sign in</button>

<!-- Pill shape -->
<button class="btn btn-secondary btn-pill btn-md">Browse all packs →</button>

<!-- Ghost -->
<button class="btn btn-ghost btn-md">Cancel</button>

<!-- Disabled -->
<button class="btn btn-primary btn-lg" disabled>Disabled</button>

<!-- Loading -->
<button class="btn btn-primary btn-lg btn-loading">
  <span class="btn-spinner"></span> Loading...
</button>

Badge

Small pill labels with thick borders and sticker-sm shadow. Slight rotation classes (.badge-tilted) recreate the signature lopsided label look. Each accent colour has a matching badge variant.

Lime Pink Purple Yellow Cyan Orange Paper Ink Error Not a fitness app. Please. ✓ Active ⚠ Alert

<span class="badge badge-lime">Lime</span>
<span class="badge badge-pink">Pink</span>
<span class="badge badge-purple">Purple</span>
<span class="badge badge-yellow">Yellow</span>
<span class="badge badge-cyan">Cyan</span>

<!-- Tilted (signature style) -->
<span class="badge badge-yellow badge-tilted">Not a fitness app. Please.</span>

<!-- With icon -->
<span class="badge badge-lime">✓ Active</span>

Card

Default cards are white with a sticker shadow. Colour variants fill the background with a brand accent. Tilt classes (.card-tilt-l, .card-tilt-r) add a slight rotation for the characteristic off-kilter stack look.

Feature

Reads Apple Health

Step count, walking minutes, stand hours.

Real movement

Tiny, goofy exercises you do right at your desk.

Wiggle. Stretch.

Your spine has been filing complaints.

Break the sit habit

Four taps. Under 30 seconds. Still in your slippers.

<!-- Default -->
<div class="card">
  <div class="card-body">
    <span class="badge badge-lime">Feature</span>
    <h3>Reads Apple Health</h3>
    <p>Step count, walking minutes, stand hours.</p>
  </div>
</div>

<!-- Coloured + tilted -->
<div class="card card-lime card-tilt-l">
  <div class="card-body">...</div>
</div>

<!-- Variants: card-pink, card-purple, card-cyan,
     card-yellow, card-orange, card-ink -->

Pack Card

Exercise pack cards with large radius (48px), bold 4px borders, and sticker-lg shadow. Each card gets a brand accent colour and optional rotation. Hover lifts the card. Designed to stack in a grid with alternating tilts.

14 exercises

Neck Relief

Acute neck pain RIGHT NOW.

16 exercises

Back Pain

Generalized back tightness.

15 exercises

Hip Pain

Hips locked up from sitting.

11 exercises

Afternoon Recharge

The 3 pm crash won't win.

<a href="#" class="pack-card card-lime card-tilt-l">
  <div class="pack-card-body">
    <span class="pack-card-count">14 exercises</span>
    <h3 class="pack-card-title">Neck Relief</h3>
    <p class="pack-card-desc">Acute neck pain RIGHT NOW.</p>
  </div>
</a>

<!-- Colour options: card-lime, card-cyan, card-pink,
     card-yellow, card-purple, card-orange, card-ink -->
<!-- Tilt options: card-tilt-l, card-tilt-r -->

Nav

Fixed nav with paper background at 95% opacity, blur backdrop, and a 3px ink border on the bottom. Logo spins on hover. Links rotate and turn purple on hover. Right slot holds the primary CTA.

<nav class="nav">
  <div class="nav-inner">
    <a href="/" class="nav-logo">
      <!-- logo icon -->
      Brand Name
    </a>
    <ul class="nav-links" role="list">
      <li><a href="#" class="nav-link">Exercises</a></li>
      <li><a href="#" class="nav-link">Chrome</a></li>
    </ul>
    <div class="nav-cta">
      <a href="#" class="btn btn-primary btn-md">Get the App</a>
    </div>
  </div>
</nav>

Input / Form

Inputs use the same thick-border, sticker-shadow visual language. Focus adds a ring in --ring (purple). Disabled reduces opacity. Selects use a custom arrow. Labels are semibold and close to the field.

Your name

Choose a pack

What hurts?

Weekdays Weekends

<div class="form-group">
  <label class="label" for="name">Your name</label>
  <input class="input" type="text" id="name" placeholder="e.g. Alex">
</div>

<div class="form-group">
  <label class="label" for="pack">Choose a pack</label>
  <select class="input select" id="pack">
    <option>Neck Relief</option>
  </select>
</div>

<label class="checkbox">
  <input type="checkbox"> Weekdays
</label>

Modal

Blurred backdrop, ink overlay. The dialog itself uses the card aesthetic with sticker-lg shadow. Close button rotates 90° on hover. Triggered via data-modal-open attributes, dismissed via Escape or backdrop click.

<!-- Trigger -->
<button data-modal-open="my-modal">Open</button>

<!-- Modal -->
<div id="my-modal" role="dialog" aria-modal="true" hidden>
  <div class="modal-backdrop">
    <div class="modal">
      <div class="modal-header">
        <h2 class="modal-title">Title</h2>
        <button class="modal-close" data-modal-close>×</button>
      </div>
      <div class="modal-body">Content here</div>
      <div class="modal-footer">
        <button class="btn btn-ghost btn-md" data-modal-close>Cancel</button>
        <button class="btn btn-primary btn-md">Confirm</button>
      </div>
    </div>
  </div>
</div>

Toast

Bottom-right toasts with ink background and the notif-pop entrance animation. Colour variants for success (lime), error (red), and purple. Auto-dismiss after 3.5s. Use ZestUI.showToast() to trigger programmatically.

🎉

Move complete!

4 Point Head Movement — well done.

✓

Reminder set

You'll be nudged every 45 minutes.

⚠

Couldn't save

Check your connection and try again.

<!-- Via JS -->
ZestUI.showToast({
  type: 'success',   // 'default' | 'success' | 'error' | 'purple'
  icon: '✓',
  title: 'Reminder set',
  desc:  'You\'ll be nudged every 45 minutes.',
});

<!-- Via data attribute on a button -->
<button
  data-toast-trigger
  data-toast-type="success"
  data-toast-icon="✓"
  data-toast-title="Reminder set"
  data-toast-desc="..."
>Click me</button>

Feature Block

Icon + heading + description pattern for listing app features. Use the .feature class with a .feature-icon container. Pair with stat numbers for social proof.

🍎

Reads Apple Health

Pings only when the data says you've been still too long.

⏱

You set the cadence

Works around meetings, not against them.

⚡

Under 30 seconds

Four taps. Still in your slippers.

102

Exercise packs

30s

Avg. session

4.9

App Store

1M+

Moves done

<div class="feature">
  <div class="feature-icon">🍎</div>
  <h3 class="feature-title">Reads Apple Health</h3>
  <p class="feature-desc">Description here.</p>
</div>

<!-- Stat number -->
<div>
  <p class="stat-number" style="color:var(--color-lime)">102</p>
  <p class="stat-label">Exercise packs</p>
</div>

Testimonial

Quote card with opening/closing typographic quotation marks applied via CSS ::before/::after. Pairs with an avatar and author name. Supports tilt classes.

★★★★★

This is the only app that's actually made me move during work hours. It's goofy, it's quick, it works.

A

Alex R.

Software developer

★★★★★

The Sneaky Feet Party pack is my favourite thing on any app I've ever used.

J

Jordan K.

Marketing manager

<div class="testimonial">
  <div class="star-rating">★★★★★</div>
  <p class="testimonial-text">This is the only app that...</p>
  <div class="testimonial-author">
    <div class="avatar" style="background:var(--color-lime);">A</div>
    <div>
      <p class="testimonial-name">Alex R.</p>
      <p class="testimonial-handle">Software developer</p>
    </div>
  </div>
</div>

Progress Bar

Track uses the muted background with a thick ink border. Fill defaults to lime. Colour modifier classes switch to pink, purple, or cyan fills.

Neck Relief8/14

Back Pain16/16

Afternoon Recharge3/11

<div class="progress-track">
  <div class="progress-fill" style="width:57%;"></div>
</div>

<!-- Colour variants: progress-fill-pink, progress-fill-purple, progress-fill-cyan -->

Carousel Dots

Pill-shaped indicator dots. The active dot stretches to 2rem wide. Click to activate. Used to indicate position in a slideshow or feature carousel.

<div class="carousel-dots">
  <button class="carousel-dot active" aria-label="Slide 1"></button>
  <button class="carousel-dot" aria-label="Slide 2"></button>
  <button class="carousel-dot" aria-label="Slide 3"></button>
</div>

Pill Tabs

Pill-shaped tab navigation on a muted track. Active tab uses ink background. Works as a segmented control or filter row.

<nav class="pill-nav" role="tablist">
  <button class="pill-tab active" role="tab" aria-selected="true">All packs</button>
  <button class="pill-tab" role="tab" aria-selected="false">Neck</button>
  <button class="pill-tab" role="tab" aria-selected="false">Back</button>
</nav>

Notification Chip

Floating pill with a coloured dot indicator and the notif-pop animation. Used for "Time to move!" reminder chips and status indicators.

Time to move! 🎉

New pack unlocked

14-day streak 🔥

<div class="notif-chip">
  <span class="notif-dot"></span>
  Time to move! 🎉
</div>

<!-- Custom dot colour -->
<span class="notif-dot" style="background:var(--color-pink)"></span>

Avatar

Circular avatars with ink border. Three sizes. Group with negative margin for the stacked overlap effect. Background colour sets the fallback when no image is present.

A

S

J

A

S

J

+8

<div class="avatar avatar-sm" style="background:var(--color-lime);">A</div>
<div class="avatar" style="background:var(--color-cyan);">S</div>
<div class="avatar avatar-lg" style="background:var(--color-pink);">J</div>

<!-- Group -->
<div class="avatar-group">
  <div class="avatar avatar-sm" style="background:var(--color-lime);">A</div>
  <div class="avatar avatar-sm" style="background:var(--color-pink);">S</div>
  <div class="avatar avatar-sm">+3</div>
</div>

Section Bands

Full-bleed colour sections divided by 3px ink borders — the defining layout motif. Each accent colour has a matching band class. Use on a <section> with .section-band plus a colour modifier.

lime band

Return to natural movement.

cyan band

Most reminder apps are just timers.

purple band

Exercise should feel like play.

ink band

Break the sit habit.

Sneaky Feet Party awaits.

Ready to wiggle?

<section class="section-band section-band-lime">
  <div class="section-inner">
    <p class="section-eyebrow">See it, do it</p>
    <h2 class="section-heading">Return to natural movement.</h2>
  </div>
</section>

<!-- Colour options:
  section-band-lime | section-band-cyan | section-band-pink
  section-band-purple | section-band-yellow | section-band-ink
-->

Skeleton Loader

Shimmer-animated loading placeholders that respect the current theme. Use .skeleton-text, .skeleton-block, and .skeleton-circle for different shapes.

<!-- Block (image / card placeholder) -->
<div class="skeleton skeleton-block"></div>

<!-- Text line -->
<div class="skeleton skeleton-text" style="width:80%;"></div>

<!-- Circle (avatar) -->
<div class="skeleton skeleton-circle" style="width:2.5rem; height:2.5rem;"></div>

Bold ink borders, electric accents, playful movement.

Colours

Typography

Shadows & Radius

Animations

Button

Badge

Card

Reads Apple Health

Real movement

Wiggle. Stretch.

Break the sit habit

Pack Card

Neck Relief

Back Pain

Hip Pain

Afternoon Recharge

Nav

Input / Form

Modal

Toast

Feature Block

Reads Apple Health

You set the cadence

Under 30 seconds

Testimonial

Progress Bar

Carousel Dots

Pill Tabs

Notification Chip

Avatar

Section Bands

Return to natural movement.

Most reminder apps are just timers.

Exercise should feel like play.

Break the sit habit.

Sneaky Feet Party awaits.

Ready to wiggle?

Skeleton Loader