Core Components

Buttons, cards, forms, and navigation — reusable UI components built on the foundations.

For Claude / LLM Reference

Reference this file when building UI. Call sections by name: "refer to core-components Buttons" or "use the Cards section".

Sections

2.1 Buttons — .btn-primary, .btn-secondary, .btn-tertiary
2.2 Cards — .card-white, .card-bone, .card-dark
2.3 Breadcrumbs — .breadcrumb
2.4 Images — effects, overlays, masks
2.5 Animated Components — scroll animations on components

Quick Reference

Primary btn: .btn-primary
Secondary btn: .btn-secondary
On dark bg: .btn-*-dark
Card: .card-white

Key Files

_includes/header.html
_includes/footer.html
assets/css/main.css

2.1 Buttons

LLM Usage Guide:

• .btn-primary: Main CTAs, form submissions — use sparingly (1-2 per view)
• .btn-secondary: Secondary actions, alternative CTAs
• .btn-tertiary: Low-emphasis actions, cancel buttons
• Dark backgrounds: Use .btn-primary-dark, .btn-secondary-dark, .btn-tertiary-dark
• States: Hover (2% scale), active (scale-95), focus ring, and disabled are built-in

Button Variants

Three button styles for different levels of emphasis. Click to see active state.

Primary

Use: Main CTAs, form submissions

Limit: 1-2 per view

.btn-primary

Secondary

Use: Secondary actions, alternative CTAs

Pairing: Use alongside primary

.btn-secondary

Tertiary

Use: Low-emphasis, cancel, dismiss

Note: Subtle on bone backgrounds

.btn-tertiary

Button States

Interactive states for accessibility and feedback. Tab to see focus states.

Default state

hover: 2% scale

active:scale-95

.btn-primary + disabled

Focus Ring: Tab to this button to see focus state

Focus ring included in .btn-primary

Buttons on Dark Backgrounds

All button types have dark variants with reversed hover states for proper contrast on dark backgrounds.

On dark backgrounds (black / charcoal-900)

.btn-primary-dark

.btn-secondary-dark

.btn-tertiary-dark

Variant Comparison

Primary

.btn-primary

← Same on both

Secondary (dark bg)

.btn-secondary-dark

← Reversed colors

Tertiary (dark bg)

.btn-tertiary-dark

← Transparent white

Common Combinations

Typical button pairings for forms and dialogs.

Form Actions

Hero CTA Pair

Dialog Actions

Button Class Reference

Light Background Classes

.btn-primary — Orange, main CTAs
.btn-secondary — Charcoal, alternative CTAs
.btn-tertiary — Bone → orange on hover

Dark Background Classes

.btn-primary-dark — Orange → lighter on hover
.btn-secondary-dark — Bone, reversed
.btn-tertiary-dark — White/10, transparent

Included Features

• Hover scale up (2%) + color change
• Active press feedback (scale-95)
• Focus ring for accessibility
• Disabled state styling

When to Use Dark Variants

Parent has bg-charcoal-700/800/900
Parent has bg-black
Any dark background context

Usage: <button class="btn-primary">Start free trial</button>

2.2 Cards

LLM Usage Guide:

• .card-white: Most common — white cards on bone backgrounds
• .card-bone: Bone cards on white backgrounds
• .card-dark: Translucent cards on charcoal backgrounds OR blurred image backgrounds
• .card-orange: Translucent cards on orange backgrounds OR orange mesh gradients
• Padding modifiers: .card-sm (1rem), default (1.5rem), .card-lg (2rem)
• Border-radius modifiers: .card-rounded-sm (0.75rem), default (1rem), .card-rounded-lg (1.25rem)
• Blurred Image Section BG: Use scale-150 + blur(50px) + tint overlay + SVG noise
• Orange Mesh Gradient Section BG: Use 3 blurred blobs (#f6b896, #f08851, #d34e0e) + SVG noise
• Card WITH Blurred Image BG: Apply blur pattern directly to card (blur 40px for smaller cards)
• Card WITH Mesh Gradient BG: Apply mesh gradient directly to card (blur 60px for smaller cards)

Card Variants

Eight card styles: four basic card classes, cards displayed on decorative backgrounds, and cards with decorative backgrounds built-in.

On Bone Background

White Card

Content on a white card displayed on a bone background. This is the most common card style.

.card-white

On White Background

Bone Card

Content on a bone card displayed on a white background. Use for subtle differentiation.

.card-bone

On Charcoal Background

Dark Card

Content on a translucent card displayed on a dark background.

.card-dark

On Orange Background

Orange Card

Content on a translucent card displayed on an orange/gradient background.

.card-orange

On Blurred Image Background

Blurred Image Card

Content on a translucent card displayed on a blurred image with noise texture.

.card-dark + blurred image bg

On Orange Mesh Gradient

Mesh Gradient Card

Content on a translucent card displayed on an orange mesh gradient with noise.

.card-orange + mesh gradient bg

Card with Blurred Image BG

Blurred Image Card

The card itself has a blurred image background with noise texture.

.card-blurred-image (custom)

Card with Mesh Gradient BG

Mesh Gradient Card

The card itself has an orange mesh gradient background with noise.

.card-mesh-gradient (custom)

Card Size Modifiers

Padding and border-radius modifiers to customize card appearance. Combine with any base card class.

Padding Modifiers

.card-sm

Small Padding

1rem (16px) padding for compact cards.

(default)

Default Padding

1.5rem (24px) padding — the standard.

.card-lg

Large Padding

2rem (32px) padding for spacious cards.

Border-Radius Modifiers

.card-rounded-sm

Small Radius

0.75rem (12px) — subtle rounding.

(default)

Default Radius

1rem (16px) — the standard.

.card-rounded-lg

Large Radius

1.25rem (20px) — more rounded corners.

Combined Modifiers

.card-sm .card-rounded-sm

Compact Card

Minimal padding and subtle corners.

(no modifiers)

Standard Card

Default padding and border-radius.

.card-lg .card-rounded-lg

Spacious Card

Maximum padding and rounded corners.

Content Patterns

Common card layouts for different content types. Combine with typography classes.

Basic

Card Title

A simple card with title and description. Use for feature lists, benefits, or brief content.

With CTA

Card Title

Card content with an action button for user interaction.

With Icon

Feature Card

Cards with icons work well for feature grids and benefits sections.

Card Layouts

Grid patterns for arranging multiple cards. Use gap-6 for consistent spacing.

3-Column Grid (gap-6)

Card One

First card in a 3-column layout.

Card Two

Second card in a 3-column layout.

Card Three

Third card in a 3-column layout.

grid grid-cols-1 md:grid-cols-3 gap-6

Cards with Actions

Combine card classes with button classes for interactive cards.

Pricing Card

Use primary button for main action, tertiary for secondary.

Dark Card Actions

Use dark button variants on dark backgrounds.

Card Class Reference

Base Card Classes

.card-white — White, for bone backgrounds
.card-bone — Bone-200, for white backgrounds
.card-dark — Charcoal-800, for charcoal backgrounds
.card-orange — Gradient-mid, for orange backgrounds

Padding Modifiers

.card-sm — 1rem (16px)
• (default) — 1.5rem (24px)
.card-lg — 2rem (32px)

Border-Radius Modifiers

.card-rounded-sm — 0.75rem (12px)
• (default) — 1rem (16px)
.card-rounded-lg — 1.25rem (20px)

Combining Modifiers

• Stack modifiers: .card-white .card-sm .card-rounded-lg
• Override with Tailwind utilities as needed

Usage: <div class="card-white card-sm card-rounded-lg">Card content</div>

2.3 Breadcrumbs

LLM Usage Guide:

• .breadcrumb: Apply to <ol> containing navigation items
• Structure: Use <li> for each item, <a> for links, <span> for current page
• Separator: "//" automatically added via CSS ::after pseudo-element
• Styling: Uppercase, 10px, tracking-widest, charcoal-500 text
• Hover: Links turn orange with underline on hover (300ms transition)

Breadcrumb Navigation

Hierarchical navigation showing current location within the site structure.

Live Example

HTML Structure

<nav aria-label="Breadcrumb" class="mb-6">
  <ol class="breadcrumb">
    <li><a href="/">Home</a></li>
    <li><a href="/interview-types">Interview Types</a></li>
    <li><span>Current Page</span></li>
  </ol>
</nav>

Breadcrumb Depths

Breadcrumbs can have varying depths depending on the page hierarchy.

2 Levels

3 Levels

4 Levels

Breadcrumb Class Reference

Styling

.breadcrumb — Container class for <ol>
• Font size: 10px (0.625rem)
• Text transform: uppercase
• Letter spacing: 0.1em (tracking-widest)
• Font weight: 500 (medium)

Colors & States

• Links: charcoal-500 (#6b6860)
• Hover: orange-600 + underline
• Current page: charcoal-900 (#2a2827)
• Separator: charcoal-300 "//"
• Transition: 300ms

Usage: <ol class="breadcrumb"><li><a href="#">...</a></li></ol>

2.4 Images

LLM Usage Guide:

• White ring: Use shadow-[inset_0_0_0_4px_rgba(255,255,255,0.5)] for inset white border effect
• Noise overlays: Subtle (0.15), Medium (0.40), Strong (0.55) — see foundations.html for SVG filter code
• Directional masks: Combine with mask-to-tr/tl/br/bl/t/b/l/r for fade effects
• Grid pattern: Use bg-grid-pattern or bg-grid-pattern-light with mask modifiers
• Structure: Always wrap image in relative overflow-hidden container for overlays

Plain Image

Basic image with rounded corners. Foundation for all other variants.

rounded-2xl overflow-hidden

Image with White Outline

Inset white ring creates a subtle border effect. Used in hero carousel and team member images.

shadow-[inset_0_0_0_4px_rgba(255,255,255,0.5)]

Image with Noise Overlays

SVG feTurbulence noise adds texture. Three intensity levels for different use cases.

Subtle (0.15)

opacity: 0.15, baseFreq: 0.8, octaves: 4

Medium (0.40)

opacity: 0.40, baseFreq: 0.7, octaves: 5

Strong (0.55)

opacity: 0.55, baseFreq: 0.6, octaves: 6

Image with Noise + Directional Masks

Combining noise overlays with CSS mask gradients for directional fade effects.

noise mask-to-r

Clear left → noisy right

noise mask-to-br

Clear top-left → noisy bottom-right

noise mask-radial-center

Noisy center → clear edges

noise mask-fade-y

Clear top/bottom → noisy middle

Image with All Effects Combined

Combining white ring, noise overlay, and mask gradient for the full effect. Used in hero overlapping images.

Ring + Noise + mask-to-r

Left edge fade (inner image)

Ring + Noise (center)

Full visibility (center image)

Ring + Noise + mask-to-l

Right edge fade (inner image)

Image with Blur Effects

Full blur and gradient blur masking. For gradient blur, layer a blurred copy over the clear image with a mask.

Full blur (20px)

blur-[20px] scale-110

Blur mask-to-r

Clear left → blurred right

Blur mask-radial

Clear center → blurred edges

Blur mask-to-b

Clear top → blurred bottom

Blur Amount Comparison

4px

8px

12px

20px

30px

50px

Combined Noise + Blur with Masks

Layer multiple masked effects on a single image: clear areas, blurred areas, and noisy areas.

Clear → Blur → Noise (horizontal)

Left clear, middle blur, right noise

Clear center, Blur + Noise edges

Sharp focus center, diffuse edges

Clear → Noise → Blur (vertical)

Top clear, middle noise, bottom blur

Layer Structure

<div class="relative overflow-hidden">
  <!-- 1. Base: Clear image -->
  <img class="absolute inset-0 object-cover" />

  <!-- 2. Blur layer with mask -->
  <div class="absolute inset-0" style="mask-image: ...">
    <img class="blur-[12px] scale-110" />
  </div>

  <!-- 3. Noise layer with mask -->
  <svg style="mask-image: ...">...</svg>
</div>

Image with Tile Effect Overlay

Grid pattern overlay with directional mask. Adds subtle texture while maintaining image visibility.

Tile + mask-to-tr

Tile + mask-to-bl

Tile + mask-radial-center

Light tile + mask-to-br

Image Effects Reference

White Ring

shadow-[inset_0_0_0_4px_rgba(255,255,255,0.5)]
• Requires relative parent
• Use on absolute inset-0 overlay div
• Add pointer-events-none to overlay

Noise Overlay

• Subtle: opacity-[0.15] baseFreq 0.8, octaves 4
• Medium: opacity-[0.40] baseFreq 0.7, octaves 5
• Strong: opacity-[0.55] baseFreq 0.6, octaves 6
• Always use mix-blend-overlay

Directional Masks

.mask-to-tr/tl/br/bl — diagonal fades
.mask-to-t/b/l/r — edge fades
.mask-fade-x/y — bidirectional fades
.mask-radial-center — center spotlight

Grid Pattern Overlay

.bg-grid-pattern — dark tiles
.bg-grid-pattern-light — light tiles
• Combine with mask modifiers
• Add pointer-events-none

Blur Effects

blur-[4px] to blur-[50px]
• Always add scale-110 or higher to prevent edge artifacts
• Higher blur = higher scale needed

Gradient Blur Masking

• Layer blurred image over clear image
• Apply mask-image to blurred layer's container
• Use linear-gradient or radial-gradient

Structure: <div class="relative overflow-hidden"><img/><div class="absolute inset-0 ..."></div></div>

2.5 Animated Components

LLM Usage Guide:

• Adding animations: Add data-scroll-animate="preset" to any component
• Cards: Use data-scroll-animate="fade-up" or "scale-up" for card entrances
• Scrub mode: Add data-scroll-scrub="1" for scroll-linked animations
• Stagger groups: Add data-scroll-stagger="0.15" to parent for sequential reveals
• Full docs: See Foundations → Motion for complete reference

Animated Cards

Cards with scroll-triggered entrance animations. Scroll down to see them animate.

Fade Up Animation (default for cards)

Fade Up Card

This card fades in while moving up when it enters the viewport.

Delayed Card

This card has a 0.1s delay before animating.

More Delayed

This card has a 0.2s delay for staggered entrance.

data-scroll-animate="fade-up" data-scroll-delay="0.1"

Staggered Card Grid

Use parent stagger attribute for automatic sequential delays.

Parent with data-scroll-stagger="0.1"

First Card

Animates first with 0s delay.

Second Card

Animates second with 0.1s delay.

Third Card

Animates third with 0.2s delay.

HTML Structure

<!-- Parent with stagger -->
<div class="grid grid-cols-3 gap-6" data-scroll-stagger="0.1">
  <div class="card-white" data-scroll-animate="fade-up">First</div>
  <div class="card-white" data-scroll-animate="fade-up">Second</div>
  <div class="card-white" data-scroll-animate="fade-up">Third</div>
</div>

Scale Up Animation (Featured Cards)

For hero-style cards that scale up while entering. Add scrub for scroll-linked effect.

Featured Card

This card scales from 0.7 to 1 while fading in and moving up. Great for hero sections.

With Scrub (Scroll-Linked)

<!-- Animation tied to scroll position -->
<div class="card-white"
  data-scroll-animate="scale-up"
  data-scroll-scrub="1"
  data-scroll-start="top bottom"
  data-scroll-end="top 40%">
  Card content...
</div>

Recommended Presets by Component

Guidelines for which animation preset to use with each component type.

Component	Recommended Preset	Notes
Card grids	`fade-up` + stagger	Use 0.1s stagger for 3 cards, 0.08s for 4+
Featured cards	`scale-up`	Add scrub for scroll-linked hero cards
Side-by-side content	`slide-left` / `slide-right`	Content slides in from opposite sides
Text content	`fade-up`	Subtle entrance for headings and paragraphs
Images	`scale-in`	Scales from 0.8 without vertical movement
Buttons / CTAs	`fade-in`	Simple fade, no movement, as last element

Animated Component Reference

Data Attributes

data-scroll-animate — preset name
data-scroll-delay — seconds (e.g., "0.2")
data-scroll-stagger — on parent, seconds between children
data-scroll-scrub — "1" for scroll-linked

Available Presets

fade-up — fade + move up
scale-up — scale + fade + move up
fade-in — simple fade
slide-left / slide-right
scale-in — scale only

Key files: assets/js/scroll-animations.js (implementation), _includes/head.html (GSAP includes)

Plan

Recruit

Conduct

Analyse

Alice Walker

Ana Martinez

Anton Novak

Hana Park

Olivia Brooks

Omar Ali

Product Managers

Marketing Managers

Product Designers

Customer Success

Blog

Changelog

FAQs

2.1 Buttons

Button Variants

Button States

Buttons on Dark Backgrounds

Common Combinations

2.2 Cards

Card Variants

Card Size Modifiers

Content Patterns

Card Layouts

Cards with Actions

2.3 Breadcrumbs

Breadcrumb Navigation

Breadcrumb Depths

2.4 Images

Plain Image

Image with White Outline

Image with Noise Overlays

Image with Noise + Directional Masks

Image with All Effects Combined

Image with Blur Effects

Combined Noise + Blur with Masks

Image with Tile Effect Overlay

2.5 Animated Components

Animated Cards

Staggered Card Grid

Scale Up Animation (Featured Cards)

Recommended Presets by Component