HypeMarket Styleguide

Platform design tokens & component reference

Colors

All colors are defined in OKLCH and adapt automatically between light and 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 for sizing.

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. This is the default paragraph size used throughout the platform.

text-sm

Small text — used for descriptions, helper text, and table contents.

text-xs opacity-60

Caption text — timestamps, metadata, and auxiliary labels.

font-mono text-sm

Monospace — code snippets, file names, IDs

Buttons

daisyUI button variants. Always include the btn base class.

Variant hierarchy (most to least prominent)

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

Semantic colors

Sizes

btn-xs → btn-sm → (default) → btn-lg

States

With icons

Full width (forms, modals)

Form inputs

Standard form elements. Use daisyUI form classes for consistent styling.

input input-bordered

select select-bordered

textarea textarea-bordered

checkbox checkbox-primary

radio radio-primary

Enable feature

toggle toggle-primary

range range-primary range-sm

file-input file-input-bordered

input-sm / (default) / input-lg

Validation states

Please enter a valid email address

Looks good

Cards

Content containers. Use bg-base-100 rounded-lg border border-base-300 for the standard card pattern.

Basic card

A simple card with a title and description. Use for grouping related content.

With icon

Feature highlight

Cards with icon headers work well for feature lists and dashboards.

Colored card

Use sparingly for high-emphasis content like CTAs or stats.

Badges

Inline labels for status, categories, and counts.

Solid

Primary Secondary Accent Neutral Info Success Warning Error

Outline

Primary Secondary Accent Info Success Warning Error

Soft (recommended for status)

Active Approved Pending Rejected Draft

Sizes

XS SM MD LG

Alerts

Feedback messages for user actions and system events.

Tables

Data tables with zebra striping and hover states.

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 & dialogs

Two sizes: max-w-4xl (wide, default) and max-w-lg (narrow).

Wide modal (max-w-4xl)

Used for forms with rich content: project editors, membership management, settings panels. This is the default size for most modals in the platform.

Narrow modal (max-w-lg)

Used for simple forms, search dialogs, and quick selection lists.

Delete app?

This action cannot be undone. All data associated with this app will be permanently removed.

Loading states

Spinners and skeleton placeholders for async content.

Spinners

Skeleton

Tooltips & dropdowns

Contextual overlays for actions and information.

Tooltips

Dropdown menu

Actions

Design tokens

Core values that define the visual language. Use these CSS custom properties in your app.

Token Value Purpose
--radius-selector 0.375rem (6px) Checkboxes, toggles, radio buttons
--radius-field 0.375rem (6px) Input fields, selects, textareas
--radius-box 0.5rem (8px) Cards, modals, alerts, dropdowns
--border 1px Default border width for all components
--depth 0 Shadow depth (flat design, no elevation)
--noise 0 Noise texture overlay (none)

Border radius examples

selector
field
box
full (avatar)

Avatars

User and organization avatar patterns with fallback initials.

Sizes

A
w-6
B
w-8
C
w-10
D
w-16
E
w-20 + ring

Avatar with name

JD

Jane Doe

Admin

HypeMarket Inc.

Organization

Usage guidelines

Rules for building apps on the HypeMarket platform.

Do

  • Use the provided daisyUI color tokens for all UI elements
  • Follow the button hierarchy (accent > primary > secondary > outline)
  • Use btn-accent only for revenue/conversion actions
  • Use sentence case for all UI text
  • Design mobile-first, then enhance for larger screens
  • Use badge-soft for status indicators
  • Use semantic alert variants (info, success, warning, error)
  • Test your app in both light and dark themes

Don't

  • Don't hardcode hex colors — use theme tokens
  • Don't use btn-accent for non-revenue actions
  • Don't create custom border radii — use the design tokens
  • Don't use Title Case for labels (use sentence case)
  • Don't add shadows or depth (the theme uses flat design)
  • Don't skip dark mode testing
  • Don't use raw date strings — always format them
  • Don't bypass the color system with inline styles