// Import everything (default, ~75KB)
import "@drop-in/graffiti";

// Or import only what you need for smaller bundles
import "@drop-in/graffiti/minimal"; // core + utilities (~26KB)
import "@drop-in/graffiti/standard"; // core + utilities + layouts (~33KB)

// Or pick individual modules
import "@drop-in/graffiti/core"; // variables, reset, typography
import "@drop-in/graffiti/utilities"; // helper classes
import "@drop-in/graffiti/layouts"; // page layouts
import "@drop-in/graffiti/components"; // UI components

// Optionally import decks component styles separately
import "@drop-in/graffiti/decks";

Copy & Paste

Download the CSS file directly:

https://raw.githubusercontent.com/stolinski/graffiti/refs/heads/main/drop-in.css

CLI Tool

npx @drop-in/graffiti

This copies drop-in.css to your src/ folder.

Usage

Typography

Fluid typography that scales automatically between viewport sizes:

<h1 class="fs-xxxl">Extra Large</h1>
<h1>H1 - Large Heading</h1>
<h2>H2 - Med Heading</h2>
<h3>H3 - Small Heading</h3>
<p class="fs-xs">Extra small text</p>

Custom fluid sizing:

<div style="--fl: 3">Scales like an h3</div>

Container-based fluid text:

<div class="fc">
  <h1>Scales with container, not viewport</h1>
</div>

Layouts

Auto-fill card grid:

<div class="layout-card">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
</div>

Sidebar layout:

<div class="layout-sidebar">
  <aside>Sidebar (250px)</aside>
  <main>Main Content</main>
</div>

<!-- Variants: .narrow (150px), .wide (350px), .invert (sidebar on right) -->

50/50 split:

<div class="layout-split">
  <div>Left Column</div>
  <div>Right Column</div>
</div>

<!-- Add .no-stack to stay side-by-side on mobile -->

Three columns:

<div class="layout-three-col">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Readable content container:

<div class="layout-readable center">
  <p>Optimal line length for readability</p>
  <div class="full-bleed">Breaks out to full width!</div>
</div>

<!-- Variants: .center, .end -->

Holy Grail layout:

<div class="layout-holy-grail">
  <div style="width: 200px">Left sidebar</div>
  <div>Main content</div>
  <div style="width: 200px">Right sidebar</div>
</div>

Stack (vertical spacing):

<div class="stack">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Cluster (horizontal wrapping):

<div class="cluster">
  <span>Tag 1</span>
  <span>Tag 2</span>
  <span>Tag 3</span>
</div>
<!-- Perfect for tags, pills, breadcrumbs -->

Carousel (horizontal scroll-snap):

<div class="carousel">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>
<!-- CSS scroll-snap, no JavaScript required -->

Reel (vertical scroll-snap):

<div class="reel" style="--reel-height: 400px">
  <div>Panel 1</div>
  <div>Panel 2</div>
  <div>Panel 3</div>
</div>
<!-- Vertical scrolling with CSS scroll-snap -->

Mobile Patterns

App Shell (iOS-safe):

<div class="app-shell">
  <header>Sticky Header</header>
  <main>Scrollable Content</main>
  <footer>Sticky Footer</footer>
</div>
<!-- Uses 100dvh, respects safe-area-inset-* for notch/home indicator -->

Bottom Navigation:

<nav class="bottom-nav">
  <a href="/" aria-current="page">
    <svg><!-- icon --></svg>
    <span>Home</span>
  </a>
  <a href="/search">
    <svg><!-- icon --></svg>
    <span>Search</span>
  </a>
</nav>
<!-- Fixed bottom tab bar, respects safe-bottom -->

Bottom Sheet:

<aside class="bottom-sheet">
  <h3>Sheet Title</h3>
  <p>Content with drag handle at top.</p>
</aside>

Mobile Utilities:

<div class="safe-top">Padding for notch</div>
<div class="safe-bottom">Padding for home indicator</div>
<div class="hide-scrollbar">Hide scrollbar</div>
<div class="momentum-scroll">iOS-style scrolling</div>

Utilities

Display utilities:

<div class="flex">Flexbox with gap</div>
<div class="grid">Grid with gap</div>
<div class="split">Space-between flex</div>

Box styles:

<div class="box-1">Subtle box</div>
<div class="box-2">Semi-gloss box</div>

Callout boxes:

<!-- Default info callout (blue) -->
<div class="callout">
  <h3>Information</h3>
  <p>This is an informational message.</p>
</div>

<!-- Warning callout (yellow) -->
<div class="callout warning">
  <h3>Warning</h3>
  <p>Please be careful!</p>
</div>

<!-- Error callout (red) -->
<div class="callout error">
  <h3>Error</h3>
  <p>Something went wrong!</p>
</div>

<!-- Success callout (green) -->
<div class="callout success">
  <h3>Success</h3>
  <p>Operation completed successfully!</p>
</div>

<!-- Ghost callout (gray) -->
<div class="callout ghost">
  <h3>Note</h3>
  <p>A neutral message.</p>
</div>

<!-- Hard variant with thick left border -->
<div class="callout warning hard">
  <h3>Important</h3>
  <p>This has a thick left border accent.</p>
</div>

Table wrapper:

<div class="table">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
        <td>Data 3</td>
      </tr>
      <tr>
        <td>Data 4</td>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
    </tbody>
  </table>
</div>
<!-- Responsive with horizontal scroll on small screens -->

Aspect ratio utilities:

<div class="aspect-square">1:1</div>
<div class="aspect-video">16:9</div>
<div class="aspect-4-3">4:3</div>
<div class="aspect-21-9">21:9</div>
<!-- Or use custom: aspect-ratio: var(--aspect-ratio) -->

Form validation states:

<input class="error" />
<small class="error">Error message</small>

<input class="success" />
<small class="success">Success message</small>

<input class="warning" />
<small class="warning">Warning message</small>

Other utilities:

<ul class="no-list">
  Clean list
</ul>
<div class="visually-hidden">Screen reader only</div>
<button class="circle">Icon</button>

CSS Variables

Customize layouts:

<div class="layout-card" style="--min-card-width: 250px; --gap: 1rem;">
  <!-- Cards with custom min-width and gap -->
</div>

Use design tokens:

.custom-box {
  padding: var(--pad-m);
  border-radius: var(--br-s);
  box-shadow: var(--shadow-3);
  background: var(--fg-05);
}

Available variables:

Spacing: --vs-s, --vs-base, --vs-m, --vs-l, --vs-xl
Border radius: --br-xs, --br-s, --br-m, --br-l
Borders: --border-05, --border-1, --border-2
Padding: --pad-xs, --pad-s, --pad-m, --pad-l
Line heights: --lh-tight, --lh-normal, --lh-loose
Shadows: --shadow-1 through --shadow-6
Easing: --ease-smooth, --ease-bounce, --ease-emphasized
OKLCH Colors (1-9 scales, base color = scale 5):
- Yellow: --yellow, --yellow-1 through --yellow-9
- Amber: --amber, --amber-1 through --amber-9
- Orange: --orange, --orange-1 through --orange-9
- Red: --red, --red-1 through --red-9
- Pink: --pink, --pink-1 through --pink-9
- Purple: --purple, --purple-1 through --purple-9
- Indigo: --indigo, --indigo-1 through --indigo-9
- Blue: --blue, --blue-1 through --blue-9
- Teal: --teal, --teal-1 through --teal-9
- Green: --green, --green-1 through --green-9
- Lime: --lime, --lime-1 through --lime-9
- Highlighter: --highlighter, --highlighter-1 through --highlighter-9
- Brown: --brown, --brown-1 through --brown-9
- Gray: --gray-1 through --gray-9
- Slate: --slate, --slate-1 through --slate-9
Theme: --fg, --bg, --fg-05, --fg-1

Features

Fluid Typography: Automatically scales between min/max viewport sizes using clamp() and pow()
Container Queries: Typography can respond to container width with .fc class
OKLCH Color System: Perceptually uniform colors with automatic 1-9 scales using relative color syntax
Auto Dark Mode: Uses light-dark() with color-scheme for automatic theming
CSS Scroll-Snap Layouts: Carousel and reel patterns with no JavaScript required
Form Validation States: Built-in error, success, and warning styles
Modern Layout Patterns: Cluster, carousel, reel, holy grail, and more
Design Tokens: Comprehensive spacing, shadows, colors, line heights, and easing functions
Logical Properties: Full RTL/LTR support throughout
Minimal & Composable: Small footprint, mix and match classes
Modular Architecture: Optional separate import for @drop-in/decks component styles

Browser Support

Graffiti uses modern CSS features and requires recent browser versions:

Minimum versions:

Chrome 123+ (March 2024)
Safari 17.5+ (May 2024)
Firefox 128+ (July 2024)
Edge 123+ (March 2024)

Key features requiring modern browsers:

OKLCH color space with relative color syntax
light-dark() function for automatic theming
Container queries for responsive typography
linear() easing functions
Logical properties for RTL/LTR support

Graceful degradation: While these features enhance the experience, basic layout and typography will work in older browsers. Consider using @supports queries if you need to support older browsers:

@supports (color: oklch(0.5 0.2 180)) {
  /* OKLCH color styles */
}

Documentation

Full documentation: https://drop-in-graffiti.netlify.app/

License

ISC

FAQs

What is @drop-in/graffiti?

Is @drop-in/graffiti well maintained?

Package last updated on 20 Mar 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@drop-in/graffiti

Graffiti