Previous Border Radius Next Grid System

Shadow

Shadow tokens xs–xl, inner shadow, colored glow, and dark mode depth.

Elevation Scale

xs to xl — increasing depth for surfaces, cards, modals, and overlays.

xs shadow-xs Subtle lift — chip, tag, inline badge
sm shadow-sm Input field, avatar, table row hover
md shadow-md Card, panel, side sheet
lg shadow-lg Dropdown, popover, floating action
xl shadow-xl Modal, dialog, full-screen overlay
inner shadow-inner Input focus ring, inset well, trough

Token Reference

Click a row to copy the CSS variable name.

Token Value Use when…
var(--shadow-xs) 0 1px 2px 0 rgb(0 0 0 / 0.05) The element needs barely-there lift; e.g. badge, tag
var(--shadow-sm) 0 1px 3px … + 0 1px 2px … Small interactive elements; inputs on hover/focus
var(--shadow-md) 0 4px 16px … + 0 2px 6px … Cards and panels raised from the page surface
var(--shadow-lg) 0 20px 40px … + 0 8px 16px … Dropdowns, popovers, floating menus
var(--shadow-xl) 0 32px 64px -12px rgb(0 0 0 / 0.18) Modals and dialogs that sit above everything
var(--shadow-inner) inset 0 2px 4px 0 rgb(0 0 0 / 0.06) Input wells, troughs, pressed/active states

Dark Surface

Shadows remain subtle on dark backgrounds — the token values are unchanged; the surface contrast does the work.

xs shadow-xs Subtle lift — chip, tag, inline badge
sm shadow-sm Input field, avatar, table row hover
md shadow-md Card, panel, side sheet
lg shadow-lg Dropdown, popover, floating action
xl shadow-xl Modal, dialog, full-screen overlay
inner shadow-inner Input focus ring, inset well, trough

Colored Glow

Brand-colored glow built by composing box-shadow with a color utility. Not a token — compose inline with a Tailwind arbitrary value.

Primary box-shadow with brand color
Secondary box-shadow with brand color
Accent box-shadow with brand color
Error box-shadow with brand color
Success box-shadow with brand color
Warning box-shadow with brand color

Usage Context

Real UI patterns that map to each token — so you reach for the right depth, not just the next step up.

shadow-xs
New Featured Draft

Badge & chip — barely perceptible lift

shadow-sm

Input field on hover / focus

shadow-md

Product Card

Rp 299.000

Card raised from page surface

shadow-lg
Edit product
Duplicate
Delete

Dropdown / popover menu

shadow-xl

Confirm delete?

This action cannot be undone.

Modal dialog

shadow-inner
inset well

Pressed / active state, input trough

14

Color

Complete color palette: primary, secondary, accent, semantic, and dark mode.

Typography

Font scale, headings H1–H6, body, overline, caption, and code.

Spacing

Spacing scale, padding, margin, grid gap, and section rhythm.

Border Radius

Radius tokens xs–full for cards, inputs, buttons, and badges.

Grid System

12-column grid documentation, breakpoints, and layout rules.

Breakpoints

Responsive breakpoint scale: xs, sm, md, lg, xl, 2xl.

Animation

Keyframe animations: fade, slide, scale, bounce, and spin presets.

Transition

Duration, easing, and transition presets for UI animations.

Z-Index

Layer stacking context: base, dropdown, sticky, modal, tooltip.

Dark Mode

Dark theme system: tokens, toggle, and implementation strategy.

HSThemeSwitch

Design Tokens

Unified design token reference: color, spacing, radius, shadow, typography.

CSS Variables

CSS custom property definitions and usage patterns.

Theme Engine

Runtime theming system: token override, scoped themes, and cascade strategy.

Theme Presets

Ready-made theme presets: default, minimal, bold, earthy, and more.
Previous Border Radius Next Grid System