Reference

Reference Typography 2

Typography 2

OtherEvergreenPublic

File: content/tokens/typography.md

---
title: Typography System
description: Comprehensive type scale with font sizes, line heights, and spacing for consistent text hierarchy
path: /tokens/typography
icon: i-ph-text-aa-duotone
to: /tokens/typography
date: 2025-01-15
badge:
  label: Core
token_type: typography
css_variables:
  # Font Sizes
  - "--font-size-xs": "0.75rem"
  - "--font-size-sm": "0.875rem"
  - "--font-size-base": "1rem"
  - "--font-size-lg": "1.125rem"
  - "--font-size-xl": "1.25rem"
  - "--font-size-2xl": "1.5rem"
  - "--font-size-3xl": "1.875rem"
  - "--font-size-4xl": "2.25rem"
  - "--font-size-5xl": "3rem"
  - "--font-size-6xl": "3.75rem"

  # Line Heights
  - "--line-height-none": "1"
  - "--line-height-tight": "1.25"
  - "--line-height-snug": "1.375"
  - "--line-height-normal": "1.5"
  - "--line-height-relaxed": "1.625"
  - "--line-height-loose": "2"

  # Font Weights
  - "--font-weight-thin": "100"
  - "--font-weight-light": "300"
  - "--font-weight-normal": "400"
  - "--font-weight-medium": "500"
  - "--font-weight-semibold": "600"
  - "--font-weight-bold": "700"
  - "--font-weight-extrabold": "800"
  - "--font-weight-black": "900"

seo:
  title: Typography System - Tailwind CSS v4 Design Tokens
  description: Complete typography scale with font sizes, weights, and line heights for consistent text hierarchy
---

## Tailwind CSS v4 Typography Tokens

### Font Size Scale
```css
@layer base {
  :root {
    /* Display sizes */
    --font-size-6xl: 3.75rem;   /* 60px */
    --font-size-5xl: 3rem;      /* 48px */
    --font-size-4xl: 2.25rem;   /* 36px */
    --font-size-3xl: 1.875rem;  /* 30px */

    /* Heading sizes */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-lg: 1.125rem;   /* 18px */

    /* Body sizes */
    --font-size-base: 1rem;     /* 16px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-xs: 0.75rem;    /* 12px */
  }
}

Line Height Scale

@layer base {
  :root {
    --line-height-none: 1;
    --line-height-tight: 1.25;
    --line-height-snug: 1.375;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.625;
    --line-height-loose: 2;
  }
}

Font Weight Scale

@layer base {
  :root {
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
  }
}

Semantic Typography Classes

@layer components {
  /* Display text */
  .text-display-xl {
    @apply text-6xl font-bold leading-none tracking-tight;
  }

  .text-display-lg {
    @apply text-5xl font-bold leading-tight tracking-tight;
  }

  .text-display-md {
    @apply text-4xl font-bold leading-tight;
  }

  /* Headings */
  .text-heading-xl {
    @apply text-3xl font-bold leading-tight;
  }

  .text-heading-lg {
    @apply text-2xl font-semibold leading-tight;
  }

  .text-heading-md {
    @apply text-xl font-semibold leading-snug;
  }

  .text-heading-sm {
    @apply text-lg font-semibold leading-snug;
  }

  /* Body text */
  .text-body-lg {
    @apply text-lg leading-relaxed;
  }

  .text-body {
    @apply text-base leading-normal;
  }

  .text-body-sm {
    @apply text-sm leading-normal;
  }

  /* Labels and captions */
  .text-label {
    @apply text-sm font-medium leading-normal;
  }

  .text-caption {
    @apply text-xs leading-normal;
  }
}

Usage Examples

Display Typography

<!-- Hero headlines -->
<h1 class="text-display-xl text-gray-900 mb-6">Design System Documentation</h1>

<h2 class="text-display-lg text-gray-800 mb-8">Build Consistent Interfaces</h2>

Heading Hierarchy

<article class="space-y-6">
  <h1 class="text-heading-xl text-gray-900">Article Title</h1>
  <h2 class="text-heading-lg text-gray-800">Section Heading</h2>
  <h3 class="text-heading-md text-gray-700">Subsection</h3>
  <h4 class="text-heading-sm text-gray-700">Minor Heading</h4>
</article>

Body Text Variants

<!-- Lead paragraph -->
<p class="text-body-lg text-gray-600 mb-4">
  This is a lead paragraph with larger text for emphasis and better readability.
</p>

<!-- Regular body text -->
<p class="text-body text-gray-700 mb-4">
  This is regular body text used for most content. It provides comfortable reading at standard size.
</p>

<!-- Small text -->
<p class="text-body-sm text-gray-600">This is smaller body text used for secondary information or captions.</p>

Interactive Text Elements

<!-- Links -->
<a href="#" class="text-body text-primary hover:text-primary-600 font-medium"> Learn more about typography → </a>

<!-- Labels -->
<label class="text-label text-gray-700 mb-2 block"> Email Address </label>

<!-- Captions -->
<p class="text-caption text-gray-500 mt-1">We'll never share your email with anyone else.</p>

Typography Scale Reference

ClassFont SizeLine HeightUse Case
text-display-xl60px1.0Hero headlines
text-display-lg48px1.25Page titles
text-display-md36px1.25Section heroes
text-heading-xl30px1.25H1 headings
text-heading-lg24px1.25H2 headings
text-heading-md20px1.375H3 headings
text-heading-sm18px1.375H4 headings
text-body-lg18px1.625Lead paragraphs
text-body16px1.5Body text
text-body-sm14px1.5Small text
text-label14px1.5Form labels
text-caption12px1.5Captions, metadata

Responsive Typography

<!-- Responsive heading -->
<h1 class="text-heading-lg sm:text-heading-xl lg:text-display-md">Responsive Headline</h1>

<!-- Responsive body text -->
<p class="text-body-sm sm:text-body lg:text-body-lg">Responsive paragraph text that scales with screen size.</p>

Best Practices

Do's

  • Use semantic typography classes for consistent hierarchy
  • Maintain proper contrast ratios for accessibility
  • Scale typography responsively across breakpoints
  • Use appropriate line heights for readability

Don'ts

  • Avoid mixing too many font sizes on one page
  • Don't use font weights that aren't defined in the scale
  • Avoid tight line heights for body text
  • Don't use display sizes for body content

Related Tokens


---

## Border Radius Template

### File: `content/tokens/border-radius.md`

```markdown
---
title: Border Radius System
description: Consistent corner rounding scale for creating cohesive visual hierarchy and modern interface aesthetics
path: /tokens/border-radius
icon: i-ph-corners-out-duotone
to: /tokens/border-radius
date: 2025-01-15
badge:
  label: Core
token_type: border
css_variables:
  - "--border-radius-none": "0"
  - "--border-radius-sm": "0.125rem"
  - "--border-radius": "0.25rem"
  - "--border-radius-md": "0.375rem"
  - "--border-radius-lg": "0.5rem"
  - "--border-radius-xl": "0.75rem"
  - "--border-radius-2xl": "1rem"
  - "--border-radius-3xl": "1.5rem"
  - "--border-radius-full": "9999px"

seo:
  title: Border Radius System - Tailwind CSS v4 Design Tokens
  description: Complete border radius scale for consistent corner rounding across UI components
---

## Tailwind CSS v4 Border Radius Tokens

### Border Radius Scale
```css
@layer base {
  :root {
    /* No radius */
    --border-radius-none: 0;

    /* Small radius */
    --border-radius-sm: 0.125rem;   /* 2px */
    --border-radius: 0.25rem;       /* 4px */
    --border-radius-md: 0.375rem;   /* 6px */

    /* Medium radius */
    --border-radius-lg: 0.5rem;     /* 8px */
    --border-radius-xl: 0.75rem;    /* 12px */

    /* Large radius */
    --border-radius-2xl: 1rem;      /* 16px */
    --border-radius-3xl: 1.5rem;    /* 24px */

    /* Full radius */
    --border-radius-full: 9999px;   /* Fully rounded */
  }
}

Semantic Border Radius Classes

@layer components {
  /* Button radius variants */
  .rounded-button {
    @apply rounded-md;
  }

  .rounded-button-sm {
    @apply rounded;
  }

  .rounded-button-lg {
    @apply rounded-lg;
  }

  /* Card radius variants */
  .rounded-card {
    @apply rounded-lg;
  }

  .rounded-card-sm {
    @apply rounded-md;
  }

  .rounded-card-lg {
    @apply rounded-xl;
  }

  /* Input radius variants */
  .rounded-input {
    @apply rounded-md;
  }

  /* Badge and tag radius */
  .rounded-badge {
    @apply rounded-full;
  }

  .rounded-tag {
    @apply rounded-lg;
  }

  /* Modal and dialog radius */
  .rounded-modal {
    @apply rounded-xl;
  }

  /* Image radius variants */
  .rounded-image {
    @apply rounded-lg;
  }

  .rounded-avatar {
    @apply rounded-full;
  }
}

Usage Examples

Buttons with Different Radius

<!-- Small radius button -->
<button class="btn btn-primary rounded">Small Radius</button>

<!-- Medium radius button (default) -->
<button class="btn btn-primary rounded-md">Medium Radius</button>

<!-- Large radius button -->
<button class="btn btn-primary rounded-lg">Large Radius</button>

<!-- Pill button -->
<button class="btn btn-primary rounded-full">Pill Button</button>

Cards with Consistent Rounding

<!-- Standard card -->
<div class="bg-white border rounded-card p-6 shadow-sm">
  <h3 class="text-heading-md mb-3">Card Title</h3>
  <p class="text-body text-gray-600">Card content with consistent border radius.</p>
</div>

<!-- Small card -->
<div class="bg-white border rounded-card-sm p-4">
  <h4 class="text-heading-sm mb-2">Small Card</h4>
  <p class="text-body-sm text-gray-600">Compact card with smaller radius.</p>
</div>

<!-- Large feature card -->
<div class="bg-white border rounded-card-lg p-8 shadow-md">
  <h2 class="text-heading-lg mb-4">Feature Card</h2>
  <p class="text-body-lg text-gray-600">Prominent card with larger radius.</p>
</div>

Form Elements

<!-- Input fields -->
<div class="space-y-4">
  <div>
    <label class="text-label block mb-2">Email</label>
    <input
      type="email"
      class="w-full px-3 py-2 border border-gray-300 rounded-input focus:outline-none focus:ring-2 focus:ring-primary/50"
      placeholder="Enter your email"
    />
  </div>

  <div>
    <label class="text-label block mb-2">Message</label>
    <textarea
      class="w-full px-3 py-2 border border-gray-300 rounded-input focus:outline-none focus:ring-2 focus:ring-primary/50"
      rows="4"
      placeholder="Your message"
    ></textarea>
  </div>
</div>

Badges and Tags

<!-- Status badges -->
<span class="badge badge-stable rounded-badge">
  <i class="badge-icon ph ph-check-circle-duotone"></i>
  Stable
</span>

<!-- Category tags -->
<div class="flex gap-2 flex-wrap">
  <span class="px-3 py-1 bg-primary/10 text-primary text-sm rounded-tag"> Design System </span>
  <span class="px-3 py-1 bg-accent/10 text-accent text-sm rounded-tag"> Components </span>
</div>

Images and Avatars

<!-- Rounded image -->
<img src="/component-preview.jpg" alt="Component preview" class="w-full h-48 object-cover rounded-image" />

<!-- User avatars -->
<div class="flex items-center gap-3">
  <img src="/avatar-1.jpg" alt="User avatar" class="w-10 h-10 rounded-avatar" />
  <div>
    <p class="text-label">John Doe</p>
    <p class="text-caption text-gray-500">Designer</p>
  </div>
</div>

Complex Component Combinations

<!-- Modal dialog -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4">
  <div class="bg-white rounded-modal max-w-md w-full p-6">
    <div class="flex items-center gap-3 mb-4">
      <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center">
        <i class="ph ph-info-duotone text-primary"></i>
      </div>
      <h3 class="text-heading-md">Confirm Action</h3>
    </div>

    <p class="text-body text-gray-600 mb-6">Are you sure you want to delete this component?</p>

    <div class="flex gap-3 justify-end">
      <button class="btn btn-ghost rounded-button">Cancel</button>
      <button class="btn btn-error rounded-button">Delete</button>
    </div>
  </div>
</div>

Border Radius Scale Reference

TokenValuePixelsUse Case
rounded-none00pxSharp edges, tables
rounded-sm0.125rem2pxSmall elements
rounded0.25rem4pxButtons, inputs
rounded-md0.375rem6pxCards, panels
rounded-lg0.5rem8pxLarge cards, modals
rounded-xl0.75rem12pxFeature cards
rounded-2xl1rem16pxHero sections
rounded-3xl1.5rem24pxLarge containers
rounded-full9999pxFullBadges, avatars

Component-Specific Guidelines

Buttons

  • Small buttons: rounded (4px)
  • Standard buttons: rounded-md (6px)
  • Large buttons: rounded-lg (8px)
  • Pill buttons: rounded-full

Cards

  • Small cards: rounded-md (6px)
  • Standard cards: rounded-lg (8px)
  • Feature cards: rounded-xl (12px)

Form Elements

  • Inputs: rounded-md (6px)
  • Checkboxes: rounded-sm (2px)
  • Radio buttons: rounded-full

Navigation

  • Tabs: rounded-lg on top only
  • Breadcrumbs: rounded (4px)
  • Pills: rounded-full

Best Practices

Do's

  • Use consistent radius values across similar components
  • Increase radius for larger, more prominent elements
  • Use full radius for circular elements (avatars, badges)
  • Consider the overall design aesthetic

Don'ts

  • Avoid mixing too many different radius values
  • Don't use very large radius on small elements
  • Avoid sharp corners on interactive elements
  • Don't override radius without design system approval

Related Tokens


---

## Shadow System Template

### File: `content/tokens/shadows.md`

```markdown
---
title: Shadow System
description: Elevation and depth system using shadows to create visual hierarchy and spatial relationships
path: /tokens/shadows
icon: i-ph-drop-shadow-duotone
to: /tokens/shadows
date: 2025-01-15
badge:
  label: Core
token_type: shadow
css_variables:
  - "--shadow-xs": "0 1px 2px 0 rgb(0 0 0 / 0.05)"
  - "--shadow-sm": "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"
  - "--shadow": "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"
  - "--shadow-md": "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"
  - "--shadow-lg": "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"
  - "--shadow-xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
  - "--shadow-2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
  - "--shadow-inner": "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"

seo:
  title: Shadow System - Tailwind CSS v4 Design Tokens
  description: Complete shadow system for creating depth, elevation, and visual hierarchy in UI components
---

## Tailwind CSS v4 Shadow Tokens

### Shadow Scale
```css
@layer base {
  :root {
    /* Subtle shadows */
    --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);

    /* Standard shadows */
    --shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);

    /* Prominent shadows */
    --shadow-lg: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

    /* Special shadows */
    --shadow-inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
    --shadow-none: 0 0 #0000;
  }
}

Semantic Shadow Classes

@layer components {
  /* Button shadows */
  .shadow-button {
    @apply shadow-sm hover:shadow-md transition-shadow duration-200;
  }

  .shadow-button-raised {
    @apply shadow-md hover:shadow-lg transition-shadow duration-200;
  }

  /* Card shadows */
  .shadow-card {
    @apply shadow-sm hover:shadow-md transition-shadow duration-300;
  }

  .shadow-card-elevated {
    @apply shadow-md hover:shadow-lg transition-shadow duration-300;
  }

  .shadow-card-floating {
    @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
  }

  /* Modal and overlay shadows */
  .shadow-modal {
    @apply shadow-xl;
  }

  .shadow-dropdown {
    @apply shadow-md;
  }

  .shadow-tooltip {
    @apply shadow-sm;
  }

  /* Input shadows */
  .shadow-input {
    @apply shadow-inner;
  }

  .shadow-input-focus {
    @apply shadow-sm;
  }

  /* Navigation shadows */
  .shadow-header {
    @apply shadow-sm;
  }

  .shadow-sidebar {
    @apply shadow-md;
  }
}

Colored Shadow Variants

@layer components {
  /* Brand colored shadows */
  .shadow-primary {
    box-shadow: 0 4px 6px -1px rgb(59 130 246 / 0.1), 0 2px 4px -2px rgb(59 130 246 / 0.1);
  }

  .shadow-primary-lg {
    box-shadow: 0 10px 15px -3px rgb(59 130 246 / 0.1), 0 4px 6px -4px rgb(59 130 246 / 0.1);
  }

  .shadow-accent {
    box-shadow: 0 4px 6px -1px rgb(139 92 246 / 0.1), 0 2px 4px -2px rgb(139 92 246 / 0.1);
  }

  /* State colored shadows */
  .shadow-success {
    box-shadow: 0 4px 6px -1px rgb(16 185 129 / 0.1), 0 2px 4px -2px rgb(16 185 129 / 0.1);
  }

  .shadow-warning {
    box-shadow: 0 4px 6px -1px rgb(245 158 11 / 0.1), 0 2px 4px -2px rgb(245 158 11 / 0.1);
  }

  .shadow-error {
    box-shadow: 0 4px 6px -1px rgb(239 68 68 / 0.1), 0 2px 4px -2px rgb(239 68 68 / 0.1);
  }
}

Usage Examples

Button Elevation

<!-- Standard button with subtle shadow -->
<button class="btn btn-primary shadow-button">Standard Button</button>

<!-- Raised button with more prominent shadow -->
<button class="btn btn-primary shadow-button-raised">Raised Button</button>

<!-- Primary button with colored shadow -->
<button class="btn btn-primary shadow-primary">
  <i class="ph ph-check-duotone"></i>
  Primary Action
</button>

Card Hierarchy

<!-- Basic card with minimal shadow -->
<div class="bg-white rounded-card p-6 shadow-card">
  <h3 class="text-heading-md mb-3">Basic Card</h3>
  <p class="text-body text-gray-600">Content with subtle elevation.</p>
</div>

<!-- Elevated card for important content -->
<div class="bg-white rounded-card-lg p-8 shadow-card-elevated">
  <h2 class="text-heading-lg mb-4">Important Card</h2>
  <p class="text-body-lg text-gray-600">Content with medium elevation.</p>
</div>

<!-- Floating card for hero sections -->
<div class="bg-white rounded-card-lg p-12 shadow-card-floating">
  <h1 class="text-display-md mb-6">Hero Card</h1>
  <p class="text-body-lg text-gray-600">Premium content with high elevation.</p>
</div>

Modal and Overlay Components

<!-- Modal dialog -->
<div class="fixed inset-0 bg-black/50 flex items-center justify-center p-4">
  <div class="bg-white rounded-modal p-6 shadow-modal max-w-md w-full">
    <h3 class="text-heading-lg mb-4">Modal Title</h3>
    <p class="text-body text-gray-600 mb-6">Modal content with strong shadow for prominence.</p>
    <div class="flex gap-3 justify-end">
      <button class="btn btn-ghost">Cancel</button>
      <button class="btn btn-primary">Confirm</button>
    </div>
  </div>
</div>

<!-- Dropdown menu -->
<div class="relative">
  <button class="btn btn-secondary">
    Options
    <i class="ph ph-caret-down-duotone"></i>
  </button>

  <div class="absolute top-full left-0 mt-1 bg-white border rounded-lg shadow-dropdown min-w-48">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-50">Edit</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-50">Duplicate</a>
    <hr class="my-1" />
    <a href="#" class="block px-4 py-2 text-sm text-error hover:bg-error/5">Delete</a>
  </div>
</div>

Form Elements with Shadows

<div class="space-y-4">
  <!-- Input with inner shadow -->
  <div>
    <label class="text-label block mb-2">Email</label>
    <input
      type="email"
      class="w-full px-3 py-2 border border-gray-300 rounded-input shadow-input focus:outline-none focus:ring-2 focus:ring-primary/50 focus:shadow-input-focus"
      placeholder="Enter your email"
    />
  </div>

  <!-- Textarea with shadow -->
  <div>
    <label class="text-label block mb-2">Message</label>
    <textarea
      class="w-full px-3 py-2 border border-gray-300 rounded-input shadow-input focus:outline-none focus:ring-2 focus:ring-primary/50 focus:shadow-input-focus"
      rows="4"
      placeholder="Your message"
    ></textarea>
  </div>
</div>

Navigation with Shadows

<!-- Header with bottom shadow -->
<header class="bg-white border-b shadow-header sticky top-0 z-40">
  <div class="container-fixed py-4">
    <nav class="flex items-center justify-between">
      <div class="flex items-center gap-8">
        <div class="flex items-center gap-3">
          <i class="ph ph-squares-four-duotone text-2xl text-primary"></i>
          <span class="text-heading-md">Design System</span>
        </div>

        <div class="hidden md:flex items-center gap-6">
          <a href="/components" class="text-body hover:text-primary">Components</a>
          <a href="/patterns" class="text-body hover:text-primary">Patterns</a>
          <a href="/tokens" class="text-body hover:text-primary">Tokens</a>
        </div>
      </div>

      <button class="btn btn-primary shadow-button">Get Started</button>
    </nav>
  </div>
</header>

<!-- Sidebar with right shadow -->
<aside class="w-64 bg-white h-full shadow-sidebar">
  <nav class="p-4">
    <!-- Navigation content -->
  </nav>
</aside>

Interactive Shadow States

<!-- Card with hover shadow transition -->
<div class="group cursor-pointer">
  <div class="bg-white rounded-card p-6 border shadow-sm group-hover:shadow-md transition-shadow duration-300">
    <div class="flex items-center gap-3 mb-4">
      <i class="ph ph-cube-duotone text-2xl text-primary"></i>
      <h3 class="text-heading-md">Interactive Card</h3>
    </div>
    <p class="text-body text-gray-600">Hover to see the shadow transition effect.</p>
  </div>
</div>

<!-- Button with press shadow effect -->
<button class="btn btn-primary shadow-button active:shadow-sm active:translate-y-px transition-all duration-150">
  Press Me
</button>

Layered Shadow Components

<!-- Stacked cards with progressive shadows -->
<div class="relative">
  <!-- Background cards -->
  <div class="absolute top-2 left-2 right-2 h-full bg-gray-100 rounded-card shadow-xs"></div>
  <div class="absolute top-1 left-1 right-1 h-full bg-gray-200 rounded-card shadow-sm"></div>

  <!-- Foreground card -->
  <div class="relative bg-white rounded-card p-6 shadow-card">
    <h3 class="text-heading-md mb-3">Stacked Effect</h3>
    <p class="text-body text-gray-600">Multiple shadow layers create depth illusion.</p>
  </div>
</div>

Shadow Scale Reference

TokenElevationUse CaseComponents
shadow-xsLevel 1Minimal separationBorders, dividers
shadow-smLevel 2Subtle elevationButtons, inputs
shadowLevel 3Standard elevationCards, panels
shadow-mdLevel 4Moderate elevationDropdowns, tooltips
shadow-lgLevel 5High elevationModals, overlays
shadow-xlLevel 6Maximum elevationHero sections
shadow-2xlLevel 7Floating elementsFeature cards
shadow-innerInsetRecessed elementsInput fields

Component Shadow Guidelines

Buttons

  • Default: shadow-sm
  • Hover: shadow-md
  • Active: shadow-xs or none
  • Floating: shadow-lg

Cards

  • Basic cards: shadow-sm
  • Interactive cards: shadow-sm → shadow-md on hover
  • Feature cards: shadow-md
  • Hero cards: shadow-lg

Overlays

  • Tooltips: shadow-md
  • Dropdowns: shadow-lg
  • Modals: shadow-xl
  • Sheets: shadow-2xl

Navigation

  • Headers: shadow-sm
  • Sidebars: shadow-md
  • Tabs: shadow-xs
  • Breadcrumbs: No shadow

Animation and Transitions

/* Smooth shadow transitions */
.shadow-transition {
  transition: box-shadow 0.2s ease-in-out;
}

.shadow-transition-slow {
  transition: box-shadow 0.3s ease-in-out;
}

/* Hover state shadows */
.hover\:shadow-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Focus state shadows */
.focus\:shadow-focus:focus {
  box-shadow: 0 0 0 3px rgb(59 130 246 / 0.1);
}

Dark Mode Shadows

/* Dark mode shadow adjustments */
.dark .shadow-sm {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3), 0 1px 2px -1px rgb(0 0 0 / 0.3);
}

.dark .shadow {
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3);
}

.dark .shadow-md {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3);
}

.dark .shadow-lg {
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.4), 0 8px 10px -6px rgb(0 0 0 / 0.4);
}

Performance Considerations

Best Practices

  • Use transform and opacity for animations instead of changing shadows
  • Combine shadow transitions with will-change: transform for smooth animations
  • Limit the number of elements with complex shadows on a single page
  • Use CSS custom properties for consistent shadow application

Optimized Shadow Classes

/* GPU-accelerated shadow animations */
.shadow-animate {
  will-change: transform, box-shadow;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.shadow-animate:hover {
  transform: translateY(-1px);
}

/* Simplified shadows for mobile */
@media (max-width: 768px) {
  .shadow-lg {
    box-shadow: var(--shadow-md);
  }

  .shadow-xl {
    box-shadow: var(--shadow-lg);
  }
}

Accessibility Considerations

  • Shadows should not be the only way to convey information
  • Ensure sufficient contrast with background colors
  • Test shadow visibility in high contrast mode
  • Consider users with visual sensitivities to motion

Best Practices

Do's

  • Use consistent shadow scales across similar components
  • Animate shadows smoothly for better user experience
  • Match shadow intensity with component importance
  • Consider the overall visual hierarchy

Don'ts

  • Avoid using too many different shadow levels on one page
  • Don't make shadows the primary way to indicate interactivity
  • Avoid very dark or heavy shadows that create visual noise
  • Don't ignore performance impact of complex shadows

Related Tokens