CSS Utility Classes¶

Pre-built CSS classes for creating neumorphic UI components quickly.

Important (March 2026): All shared-styles component CSS is now defined in src/utilities/*.css files. These CSS classes are the only way to style shared components — Tailwind utility classes must not be used in shared-styles (they silently fail in consuming apps). See CONTRIBUTING.md for details.

CSS files: neumorphic.css, inputs.css, alerts.css, dropdowns.css, effects.css, typography.css, icons.css, radius.css, shadows.css, status-tones.css, infra-card.css, detail-header.css, button.css, content-width.css

Semantic Heading Classes¶

These classes live in typography.css and encapsulate the correct font-size, weight, line-height, and color for each heading role. Always use these instead of composing raw type-h* + font-weight utility classes.

<!-- Page-level title (h3 scale, weight 200, --primary-text) -->
<h2 class="screen-title">Organizations</h2>

<!-- Dashboard section heading with icon (h3 scale, weight 700) -->
<h3 class="heading-3-strong">Usage Overview</h3>

<!-- Modal header / wizard step title (h4 scale, weight 500) -->
<h4 class="heading-4">Set Up Your Organization</h4>

<!-- Card label / form sub-section (h5 scale, weight 600) -->
<h4 class="heading-5">Two-Factor Authentication</h4>

Class	Font Size	Weight	Color	Built-in spacing
`screen-title`	`--type-size-h3` (24px)	200	`--primary-text`	`margin-bottom: 0.5rem`
`heading-3-strong`	`--type-size-h3` (24px)	700	`--text-primary`	—
`heading-4`	`--type-size-h4` (19px)	500	`--text-primary`	—
`heading-5`	`--type-size-h5` (15px)	600	`--text-primary`	—

Neumorphic Cards¶

.neu-card¶

Raised card with neumorphic shadow effect.

<div class="neu-card p-4 rounded-2xl">
  Card content
</div>

Properties: - box-shadow: var(--neu-1) - background: linear-gradient(135deg, var(--card-face-overlay), transparent), var(--bg) - border-radius: var(--radius-default) - transition: var(--transition-default)

.neu-card-inset¶

Recessed/pressed card style.

<div class="neu-card-inset p-4 rounded-xl">
  Inset content
</div>

Properties: - box-shadow: var(--neu-inset) - background: var(--bg) - border-radius: var(--radius-default)

.neu-flat¶

Flat card that elevates on hover.

<div class="neu-flat p-4 rounded-2xl">
  Flat content that raises on hover
</div>

.cat-glow¶

AI assistant glow effect (for CAT components).

<div class="cat-glow p-4 rounded-2xl">
  AI-powered feature
</div>

.neu-sm¶

Small neumorphic element (reduced shadow intensity).

<div class="neu-sm p-2 rounded-lg">
  Small raised element
</div>

Buttons¶

.neu-button¶

Interactive button with hover and active states.

<button class="neu-button px-4 py-2 text-[var(--primary-text)]">
  Click me
</button>

States: - Normal: box-shadow: var(--neu-1) - Hover: box-shadow: var(--neu-2) - Active: box-shadow: var(--neu-inset) - Disabled: opacity: 0.5; cursor: not-allowed

Button with icon:

<button class="neu-button px-4 py-2 flex items-center gap-2">
  <svg>...</svg>
  Save Changes
</button>

Color variants:

<!-- Primary (default) -->
<button class="neu-button text-[var(--primary-text)]">Primary</button>

<!-- Success -->
<button class="neu-button text-[#02736b]">Success</button>

<!-- Warning -->
<button class="neu-button text-[#f2c744]">Warning</button>

<!-- Error -->
<button class="neu-button text-[#f28d35]">Delete</button>

Size variants:

<!-- Small -->
<button class="neu-button px-3 py-1.5 text-xs">Small</button>

<!-- Default -->
<button class="neu-button px-4 py-2 text-sm">Default</button>

<!-- Large -->
<button class="neu-button px-6 py-3 text-base">Large</button>

Inputs¶

.neu-input¶

Text input with neumorphic inset style.

<input
  type="text"
  class="neu-input"
  placeholder="Enter text..."
/>

States: - Focus: Blue ring effect - Disabled: Reduced opacity

Using neu-card-inset for inputs¶

Alternative approach using card classes:

<input
  type="text"
  class="neu-card-inset w-full px-4 py-2.5 rounded-xl text-[var(--primary-text)]"
  placeholder="Enter text..."
/>

Error state¶

<input
  type="text"
  class="w-full px-4 py-2.5 rounded-xl"
  style="
    background-color: rgba(242, 141, 53, 0.08);
    box-shadow: inset 2px 2px 4px rgba(242, 141, 53, 0.15),
                inset -1px -1px 3px rgba(255, 255, 255, 0.5);
  "
/>
<p class="text-xs text-[#f28d35]">Error message</p>

Checkboxes¶

.neu-checkbox¶

Custom checkbox with neumorphic styling.

<label class="flex items-center gap-2 cursor-pointer">
  <input type="checkbox" class="neu-checkbox" />
  <span class="text-sm text-[var(--primary-text)]">Checkbox label</span>
</label>

States: - Unchecked: Inset shadow - Checked: Primary accent background with checkmark - Disabled: Reduced opacity

Toggle / Switch¶

.neu-toggle¶

Toggle switch component.

<label class="flex items-center gap-3 cursor-pointer">
  <input type="checkbox" class="neu-toggle" />
  <span class="text-sm">Enable feature</span>
</label>

`.neu-select-trigger`, `.neu-select-content`, `.neu-select-item`¶

Raised/convex utilitarian dropdown trigger with styled menu content.

<button class="neu-select-trigger">Select option</button>
<div class="neu-select-content ux-shadow-popover">
  <div class="neu-select-viewport">
    <div class="neu-select-item">Option 1</div>
    <div class="neu-select-item">Option 2</div>
  </div>
</div>

Use the React NeuSelect component for utilitarian dropdowns; it applies these classes automatically.

Alerts¶

.neu-alert¶

Alert/notification component.

<div class="neu-alert neu-alert-success">
  <span class="neu-alert-icon">
    <svg><!-- check icon --></svg>
  </span>
  <div class="neu-alert-content">
    <h4 class="neu-alert-title">Success!</h4>
    <p class="neu-alert-message">Your changes have been saved.</p>
  </div>
</div>

Variants: - .neu-alert-success - Green left border - .neu-alert-info - Blue left border - .neu-alert-warning - Yellow left border - .neu-alert-error - Orange left border

Dismissible:

<div class="neu-alert neu-alert-info neu-alert-dismissible">
  <!-- content -->
  <button class="neu-alert-close">×</button>
</div>

Effects¶

Glow Effects¶

<div class="glow-primary">Primary glow</div>
<div class="glow-success">Success glow</div>
<div class="glow-warning">Warning glow</div>
<div class="glow-error">Error glow</div>

Animations¶

<div class="animate-fade-in">Fades in</div>
<div class="animate-slide-up">Slides up</div>
<div class="animate-slide-down">Slides down</div>
<div class="animate-slide-left">Slides left</div>
<div class="animate-slide-right">Slides right</div>
<div class="animate-pulse-glow">Pulsing glow</div>
<div class="animate-spin">Spinning</div>

Skeleton Loading¶

<div class="skeleton h-4 w-full"></div>
<div class="skeleton h-12 w-24 rounded-full"></div>

Focus Ring¶

<button class="focus-ring">
  Accessible focus state
</button>

Range Slider¶

Range inputs are automatically styled:

<input type="range" min="0" max="100" value="50" />

Features: - Neumorphic track - Primary accent thumb - Hover glow effect - Active press state