Reference

Design System Tokens

All CSS custom properties, Tailwind utilities, and design decisions powering the component library. Defined via @theme inline in globals.css.

Colors

Brand

#F45A5A

Red

--color-primary

CTAs, accents, links

#D94040

Primary Dark

--color-primary-dark

Hover states

#FEF2F2

Primary Light

--color-primary-light

Tint backgrounds

Base Backgrounds

#000000

Background Dark

--color-bg-dark

Hero, Navbar, Footer

#F5F5F5

Background Light

--color-bg-light

Section backgrounds

#FEF0F0

Background Red

--color-bg-mint

Red feature sections

#FFFFFF

Background White

--color-bg-white

Default page bg

Text

#222222

Text Primary

--color-text-primary

Body text, headings

#555555

Text Secondary

--color-text-secondary

Subheadings, labels

#888888

Text Muted

--color-text-muted

Captions, placeholders

#FFFFFF

Text White

--color-text-white

On dark backgrounds

Semantic

#E53E3E

Error

--color-error

Danger states, form errors

#F59E0B

Warning

--color-warning

Caution, alerts

#3B82F6

Info

--color-info

Informational messages

#3FD4A0

Success

--color-success

Success states

#E5E7EB

Border

--color-border

Dividers, card borders

Primary — OKLCH Scale

Extended teal palette using OKLCH — perceptually uniform color space (new in Tailwind v4). oklch(L C H)

100

200

300

400

500

600

700

800

900

Usage

bg-primary-100text-primary-600border-primary-300hover:bg-primary-400

Tailwind usage

bg-primarytext-primaryborder-primaryring-primarybg-primary/10hover:bg-primary/90

Typography

Font Family

Prompt

Thai + Latin via next/font/google

--font-sans: var(--font-prompt)font-family: Prompt, Sarabun, system-ui

Class	Size	px	Line Height	Preview	Usage
text-xs	0.75rem	12px	1rem	Aa	Captions, tags
text-sm	0.875rem	14px	1.25rem	Aa	Labels, body small
text-base	1rem	16px	1.5rem	Aa	Body text
text-lg	1.125rem	18px	1.75rem	Aa	Lead text, card titles
text-xl	1.25rem	20px	1.75rem	Aa	Sub-section headings
text-2xl	1.5rem	24px	2rem	Aa	Section headings
text-3xl	1.875rem	30px	2.25rem	Aa	Page titles
text-4xl	2.25rem	36px	2.5rem	Aa	Hero sub-titles
text-5xl	3rem	48px	1	Aa	Hero main title
text-6xl	3.75rem	60px	1	Aa	Display / oversized

Global CSS helpers

.heading-hero

Hero Heading

clamp(2.25rem, 5vw, 3.75rem) · weight 800 · ls -0.02em

.heading-section

Section Heading

clamp(1.5rem, 3vw, 2.25rem) · weight 700

.heading-accent

Underline Accent

Adds a 56px × 4px teal underline via ::after pseudo-element

Spacing Scale

Token	Value	Tailwind
space-1	4px	p-1 / m-1
space-2	8px	p-2 / m-2
space-3	12px	p-3 / m-3
space-4	16px	p-4 / m-4
space-5	20px	p-5 / m-5
space-6	24px	p-6 / m-6
space-8	32px	p-8 / m-8
space-10	40px	p-10 / m-10
space-12	48px	p-12 / m-12
space-16	64px	p-16 / m-16
space-20	80px	p-20 / m-20
space-24	96px	p-24 / m-24
section	80px	--spacing-section custom

Border Radius

--radius-card

16px

rounded-2xl

Cards, panels

--radius-button

8px

rounded-lg

Buttons, inputs

--radius-badge

999px

rounded-full

Badges, pills

Shadows

--shadow-card

0 4px 24px rgba(0,0,0,0.08)

Cards, surfaces

--shadow-nav

0 2px 12px rgba(0,0,0,0.1)

Sticky navbar

--shadow-primary

0 4px 20px rgba(244,90,90,0.30)

Primary CTA glow

--shadow-floating

0 20px 60px rgba(0,0,0,0.15)

Floating panels, modals

Animations

Custom @keyframes defined inside @theme

--animate-tickeranimate-tickerHorizontal marquee scroll · 20s

--animate-fade-inanimate-fade-inOpacity 0→1 · 0.4s fluid

--animate-fade-in-upanimate-fade-in-upFade + slide up · 0.5s

--animate-fade-in-downanimate-fade-in-downFade + slide down · 0.4s

--animate-scale-inanimate-scale-inScale 0.85→1 + fade · bounce

--animate-slide-in-leftanimate-slide-in-leftSlide from left + fade

--animate-slide-in-rightanimate-slide-in-rightSlide from right + fade

--animate-pulse-glowanimate-pulse-glowRadial teal glow pulse · 2s

Live preview

✦ Design System ✦ Tailwind v4 ✦ React 19 ✦ Next.js 16✦ Design System ✦ Tailwind v4 ✦ React 19 ✦ Next.js 16✦ Design System ✦ Tailwind v4 ✦ React 19 ✦ Next.js 16✦ Design System ✦ Tailwind v4 ✦ React 19 ✦ Next.js 16✦ Design System ✦ Tailwind v4 ✦ React 19 ✦ Next.js 16✦ Design System ✦ Tailwind v4 ✦ React 19 ✦ Next.js 16✦ Design System ✦ Tailwind v4 ✦ React 19 ✦ Next.js 16✦ Design System ✦ Tailwind v4 ✦ React 19 ✦ Next.js 16

animate-fade-in-up

animate-scale-in

animate-slide-in-left

animate-pulse-glow

Custom Easing

--ease-fluid

cubic-bezier(0.3, 0, 0, 1)

General smooth animations

--ease-snappy

cubic-bezier(0.2, 0, 0, 1)

Quick UI responses

--ease-bounce

cubic-bezier(0.34, 1.56, 0.64, 1)

Springy reveal effects

--ease-in-expo

cubic-bezier(0.7, 0, 0.84, 0)

Exit animations

Tailwind v4 Features

New

@theme inline

All design tokens live in a single CSS file — no tailwind.config.js needed. Tailwind v4 reads CSS custom properties directly from @theme.

@theme inline {
  --color-primary: #F45A5A;
  --radius-card: 16px;
  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
}

@custom-variant dark

Manual dark mode toggled via a .dark class on the HTML element. Defined with @custom-variant — no plugin needed.

/* globals.css */
@custom-variant dark (&:where(.dark, .dark *));

/* Usage */
<div class="bg-white dark:bg-gray-900">

Light

bg-white text-gray-900

Dark (.dark)

bg-gray-900 text-white

Container Queries

Style elements based on their parent container's size — not the viewport. Use @container on the parent, then @md:flex-row on children.

<div class="@container">
  <div class="flex flex-col @md:flex-row gap-4">
    <img class="w-full @md:w-32" />
    <p>Content adapts to container size</p>
  </div>
</div>

Live demo — resize the box below

Container Query Demo

Layout changes when container ≥ 28rem (@md)

@md:ml-auto

CSS

bg-clip-text (Gradient Text)

Crop background to text shape with bg-clip-text text-transparent. Also available as the custom utility text-gradient-primary.

Gradient Text

Orange to Pink

Violet to Cyan

<p class="bg-clip-text text-transparent bg-linear-to-r from-primary to-blue-500">
  Gradient Text
</p>

Custom @utility

Define reusable CSS utilities with @utility. Works with all variants like hover:, focus:, lg:.

scrollbar-hidden

Hide scrollbars cross-browser

Noscrollbarvisibleevenwithoverflow

glow-primary

Teal glow box-shadow shortcut

Glow Effect

content-auto

content-visibility: auto (performance)

content-auto

text-gradient-primary

Teal→blue gradient text shortcut

Gradient via @utility

/* globals.css */
@utility scrollbar-hidden {
  scrollbar-width: none;
  &::-webkit-scrollbar { display: none; }
}

/* HTML */
<div class="overflow-x-auto scrollbar-hidden">

Breakpoint Ranges (max-*)

Stack a responsive variant with a max-* variant to apply styles only within a specific range.

<!-- Only applies between md and xl -->
<div class="md:max-xl:flex">...</div>

<!-- Only on sm exactly -->
<div class="sm:max-md:bg-yellow-100">...</div>

Tech Stack

21 packages

Frameworkv16.2.6

Next.js

App Router · Turbopack · Server Components · Streaming SSR

UI Runtimev19.2.4

React

Server Actions · Concurrent Features · use() · useOptimistic

Languagev5.x

TypeScript

strict mode · path aliases · full type-safety across all layers

Styling

Tailwind CSS

CSS-first config via @theme inline — no tailwind.config.js

tailwind-merge

^3.6

Conflict-free class merging

clsx

^2.1

Conditional className helper

Animation

Framer Motion

^12.40

Declarative animations, gestures, layout transitions

UI Primitives

Radix UI

^1–2.x

Accessible headless primitives (dropdown, dialog, menu…)

Lucide React

^1.16

1400+ crisp SVG icons, tree-shakeable

Sonner

^2.0

Opinionated toast notifications

cmdk

^1.1

Command palette — fast fuzzy search

vaul

^1.1

Drawer component with snap points

input-otp

^1.4

Accessible OTP / PIN input

Data & Tables

Recharts

^3.8

Composable chart library built on D3

TanStack Table

^8.21

Headless table with sort, filter, pagination

Forms & Dates

react-day-picker

^10.0

Date picker with range selection

date-fns

^4.3

Lightweight date utility functions

Components

Embla Carousel

^8.6

Lightweight touch-friendly carousel engine

react-resizable-panels

^4.11

Drag-to-resize panel layouts

canvas-confetti

^1.9

Canvas-based confetti burst effect

Dev Tools

prism-react-renderer

^2.4

Syntax highlighting for code blocks (Night Owl + vsLight)

Prompt — Google Fonts

Thai + Latin · weights 300–800 · loaded via next/font/google with zero layout shift

300400500600700800

Source

All tokens are defined in a single @theme inline block in:

src/app/globals.css

Tailwind v4 reads these CSS custom properties at build time and generates all utility classes automatically — no tailwind.config.js needed.