Graffiti

github

Elements

UI components or custom elements with just a class or two.

These are common, non-complex UI elements that can be done with mostly a single class and minimal html. You shouldn't have to bring in a whole JavaScript framework component for the things many of us do. It can be so much more simple.

Horizontal scroll with CSS scroll-snap (no JavaScript required)

.carousel

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Code 
<div class="carousel" style="background: var(--fg-05); padding: 1rem">
  <div class="box" style="min-width: 250px; height: 200px">Slide 1</div>
  <div class="box" style="min-width: 250px; height: 200px">Slide 2</div>
  <div class="box" style="min-width: 250px; height: 200px">Slide 3</div>
  <div class="box" style="min-width: 250px; height: 200px">Slide 4</div>
  <div class="box" style="min-width: 250px; height: 200px">Slide 5</div>
</div>

.reel

Vertical scroll with CSS scroll-snap (customizable height with --reel-height)

Reel Layout

Panel 1
Panel 2
Panel 3
Panel 4
Code 
<div class="reel" style="--reel-height: 300px;">
  <div class="box" style="min-height: 150px">Panel 1</div>
  <div class="box" style="min-height: 150px">Panel 2</div>
  <div class="box" style="min-height: 150px">Panel 3</div>
  <div class="box" style="min-height: 150px">Panel 4</div>
</div>

Boxes

.box
Simple
.box.glow
Subtle
.box.semi-gloss
Semi Gloss
.box.ghost
Ghost
You can make a custom box with CSS variables box-shadow: var(--box), var(--shadow-5);

.avatar

Circular avatar for user images or initials. Supports multiple sizes and optional border.

Avatar Variants

User avatar User avatar User avatar User avatar User avatar
A BC JD ST XL
User avatar AB User avatar CD
Team member Team member Team member Team member Team member
Code 
<div class="stack">
	<!-- Size variants with images -->
	<div class="cluster">
		<span class="avatar xs">
			<img src="https://i.pravatar.cc/150?u=1" alt="User avatar" />
		</span>
		<span class="avatar s">
			<img src="https://i.pravatar.cc/150?u=2" alt="User avatar" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=3" alt="User avatar" />
		</span>
		<span class="avatar l">
			<img src="https://i.pravatar.cc/150?u=4" alt="User avatar" />
		</span>
		<span class="avatar xl">
			<img src="https://i.pravatar.cc/150?u=5" alt="User avatar" />
		</span>
	</div>

	<!-- Initials fallback (no image) -->
	<div class="cluster">
		<span class="avatar xs">A</span>
		<span class="avatar s">BC</span>
		<span class="avatar">JD</span>
		<span class="avatar l">ST</span>
		<span class="avatar xl">XL</span>
	</div>

	<!-- Bordered variant -->
	<div class="cluster">
		<span class="avatar bordered">
			<img src="https://i.pravatar.cc/150?u=6" alt="User avatar" />
		</span>
		<span class="avatar bordered">AB</span>
		<span class="avatar l bordered">
			<img src="https://i.pravatar.cc/150?u=7" alt="User avatar" />
		</span>
		<span class="avatar l bordered">CD</span>
	</div>

	<!-- Row of avatars side by side -->
	<div class="cluster">
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=10" alt="Team member" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=11" alt="Team member" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=12" alt="Team member" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=13" alt="Team member" />
		</span>
		<span class="avatar">
			<img src="https://i.pravatar.cc/150?u=14" alt="Team member" />
		</span>
	</div>
</div>

.button

Button styling for links and non-button elements

Button Variants

Code 
<div class="stack">
  <!-- Default and semantic variants -->
  <div class="cluster">
    <button>Default</button>
    <button class="primary">Primary</button>
    <button class="success">Success</button>
    <button class="warning">Warning</button>
    <button class="error">Error</button>
    <button class="ghost">Ghost</button>
    <button class="minimal">Minimal</button>
  </div>

  <!-- Mini size variants -->
  <div class="cluster">
    <button class="mini">Default</button>
    <button class="mini primary">Primary</button>
    <button class="mini success">Success</button>
    <button class="mini warning">Warning</button>
    <button class="mini error">Error</button>
    <button class="mini ghost">Ghost</button>
    <button class="mini minimal">Minimal</button>
  </div>
</div>

.table

A wrapping div for overflow scrolling, but also generic tables styles defined by default without the wrapping claas.

HiHellosup✅ Icon or emoji in thisYo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo
HiHellosupSome data in this cell that might be a bit long I don't know.Yo

.callout

An informational callout

Callout Variants

Default callout for general information and tips.

.fill to fill bg color. Warning callout for important notices that need attention.

Error callout for critical issues or destructive actions.

Success callout for confirmations and positive feedback.

Ghost callout for subtle, neutral messages.

Add .hard to any variant for a stronger left border accent.

Warning with the hard modifier for extra emphasis.

Callouts support multiple elements

Use .stack fo children with consistent spacing.

Code 
<div class="stack">
  <!-- Default callout (blue) -->
  <div class="callout">
    <p>Default callout for general information and tips.</p>
  </div>

  <!-- Warning variant -->
  <div class="callout warning fill">
    <p>
      .fill to fill bg color. Warning callout for important notices that need
      attention.
    </p>
  </div>

  <!-- Error variant -->
  <div class="callout error">
    <p>Error callout for critical issues or destructive actions.</p>
  </div>

  <!-- Success variant -->
  <div class="callout success">
    <p>Success callout for confirmations and positive feedback.</p>
  </div>

  <!-- Ghost variant -->
  <div class="callout ghost split">
    <p>Ghost callout for subtle, neutral messages.</p>
    <button class="mini">With Button</button>
  </div>

  <!-- Hard modifier (stronger left border) -->
  <div class="callout hard">
    <p>
      Add <code>.hard</code> to any variant for a stronger left border accent.
    </p>
  </div>

  <div class="callout warning hard">
    <p>Warning with the hard modifier for extra emphasis.</p>
  </div>

  <!-- Multi-element callout -->
  <div class="callout success stack">
    <h5>Callouts support multiple elements</h5>
    <p>Use .stack fo children with consistent spacing.</p>
  </div>
</div>

Forms

Toggle Switch

Accessible toggle/switch input using native checkbox semantics

Toggle Variants

Code 
<div class="stack">
  <!-- Basic toggles -->
  <div class="cluster">
    <input type="checkbox" class="toggle" />
    <input type="checkbox" class="toggle" checked />
    <input type="checkbox" class="toggle" checked style="--toggle-color: var(--green)" />
  </div>

  <!-- Disabled states -->
  <div class="cluster">
    <input type="checkbox" class="toggle" disabled />
    <input type="checkbox" class="toggle" checked disabled />
  </div>

  <!-- Compact variant -->
  <div class="cluster">
    <input type="checkbox" class="toggle compact" />
    <input type="checkbox" class="toggle compact" checked />
  </div>

  <!-- With labels -->
  <div class="stack">
    <label class="cluster">
      <input type="checkbox" class="toggle" />
      <span>Enable notifications</span>
    </label>
    <label class="cluster">
      <input type="checkbox" class="toggle" checked />
      <span>Dark mode</span>
    </label>
  </div>
</div>

Form Validation States

Built-in styles for error, success, and warning states

Please enter a valid email address
Username is available!
Password is weak. Consider using a stronger password.