Platform styleguide

Design tokens & component reference

Colors

OKLCH colors that adapt between light/dark themes.

Brand / Semantic

Primary
--color-primary
Secondary
--color-secondary
Accent
--color-accent
Neutral
--color-neutral

Functional

Info
--color-info
Success
--color-success
Warning
--color-warning
Error
--color-error

Base surfaces

Base 100
--color-base-100
Base 200
--color-base-200
Base 300
--color-base-300
Base content
--color-base-content

Typography

System font stack. Use Tailwind text utilities.

text-4xl font-bold

Page heading

text-2xl font-bold

Section heading

text-xl font-semibold

Subsection heading

text-lg font-medium

Card title

text-base

Body text — the quick brown fox jumps over the lazy dog.

text-sm

Small text — descriptions, helper text, table contents.

text-xs opacity-60

Caption — timestamps, metadata, auxiliary labels.

font-mono text-sm

Monospace — code snippets, file names, IDs

Buttons

daisyUI button variants. Always include btn base class.

Variant hierarchy

btn-accent → btn-primary → btn-secondary → btn-outline → btn-ghost → btn-link

Semantic

Sizes

States & icons

Form inputs

daisyUI form classes for consistent styling.

input input-bordered

select select-bordered

textarea textarea-bordered

file-input file-input-bordered

Validation states

Please enter a valid email address

Looks good

Cards

Use bg-base-100 rounded-lg border border-base-300.

Basic card

A simple card with title and description.

With icon

Feature highlight

Cards with icon headers for feature lists and dashboards.

Colored card

Use sparingly for high-emphasis CTAs or stats.

Badges

Inline labels for status, categories, and counts.

Solid

Primary Secondary Accent Neutral Info Success Warning Error

Soft (recommended for status)

Active Approved Pending Rejected Draft

Sizes

XS SM MD LG

Alerts

Tables

Name Status Category Installs
Weather widget Published Utilities 12,450
Analytics dashboard In review Analytics 8,230
Social feed Active Social 34,100
Payment processor Rejected Finance 0

Modals

Sizes: max-w-4xl (wide), max-w-lg (narrow), max-w-sm (confirm).

Modal title

Used for forms, editors, settings panels. Default: max-w-4xl. Use max-w-lg for simple forms.

Delete app?

This action cannot be undone.

Loading states

Spinners

Skeleton

Tooltips & dropdowns

Dropdown

Actions

Design tokens

TokenValuePurpose
--radius-selector 6px Checkboxes, toggles, radios
--radius-field 6px Inputs, selects, textareas
--radius-box 8px Cards, modals, alerts
--border 1px Default border width
--depth 0 Flat design, no elevation
--noise 0 No noise overlay

Avatars

A
B
C
D
E

Usage guidelines

Do

  • Use daisyUI color tokens for all UI elements
  • Follow button hierarchy (accent > primary > secondary > outline)
  • Use badge-soft for status indicators
  • Use sentence case for all UI text
  • Design mobile-first
  • Test in both light and dark themes

Don't

  • Hardcode hex colors — use theme tokens
  • Use btn-accent for non-revenue actions
  • Create custom border radii — use design tokens
  • Use Title Case (use sentence case)
  • Add shadows or depth (flat design)
  • Use raw date strings — always format them