Reference

IAMTHANA Design System

Tokens, scales, and primitives that compose the IAMTHANA interface — used as the single source of truth for color, type, spacing, and motion.

Semantic tokens

text/primary

#0f172a

text/muted

#64748b

bg/base

#ffffff

bg/elev

#f8fafc

border/subtle

#e2e8f0

accent/info

#3d74b6

accent/warn

#db6a1f

accent/success

#059669

Inter400–800

The quick brown fox jumps over the lazy dog

Noto Sans Thai400–700

เรียนรู้ สร้างสรรค์ และทำงานได้อย่างมีประสิทธิภาพ

JetBrains Mono400–600

const welcome = () => "hi"

Display

Hero headline

text-5xl md:text-6xl font-extrabold tracking-tight

Page title

text-4xl font-extrabold tracking-tight

Section title

text-2xl md:text-3xl font-bold

Card title

text-xl font-semibold

Body-lg

Intro / lede

text-lg leading-relaxed

Body

Article body

text-base leading-relaxed

Body-sm

Secondary copy / descriptions

text-sm leading-relaxed text-gray-600 dark:text-gray-400

Caption

Labels and eyebrows

text-xs uppercase tracking-wider text-gray-500

Mono

Code / tokens / keyboard

text-sm

Spacing scale (px)

Radius

sm · 4px

md · 6px

lg · 8px

xl · 12px

2xl · 16px

full · 999px

Elevation

brand

Surfaces

surface/card

Default card, subtle 1px border, no elevation.

surface/elevated

Lifted — used on hover and for modals.

surface/page

The app background — soft blue + orange gradients, noise overlay.

arrow-right

rocket

sun

moon

rss

wrench

pencil

tag

clipboard

calendar

eye

code

palette

key

braces

globe

sparkles

github

motion/fast150ms

ease-out · hover states, toggles

motion/base250ms

ease-out · modals, nav, cards

motion/slow400ms

ease-out · page transitions, heroes

Text input

With label + hint 0 chars

With icon required

Sizes

Variants

States

Mono style

Preferred for hex, tokens, IDs, cron expressions

Textarea

Default 0 chars

Code style font-mono

Select

Pick a framework

Checkbox & Switch

Remember me

Enable notifications

Chip selector

Choose a sizeM

<AppChip> · Used for: QR size/ECC, Regex flags, BCrypt rounds, UUID version, Lorem content type

Number input

Minutes0-59

Powerwatts

Price (THB)step 0.1

Used for: Cron fields, Electricity watts/hours, Printer minutes, Bcrypt rounds

Grouped input (prefix / suffix)

Regex pattern /gm

//gm

<AppGroupedInput> · Used for: Regex pattern `/…/gm`, and any token input that needs inline delimiters

Coordinate input box

Positionxyz

<AppCoordInput> · Used for: Nether portal coordinates, grid inputs, triple-value entry

Styled checkbox (brand fill)

Character sets

Uppercase A-ZKTLQLowercase a-zmxpzNumbers 0-99248Symbols !@#$$#@!

<AppCheckbox> · Used for: Password charset list — prefer over UCheckbox when you need a denser mono-aligned list

Color picker

Swatch + hex #3B82F6

picker

Fg · Bg (dual)

#1E344F#FFFFFF

<AppColorPicker> · Used for: Color Palette base color, QR code foreground / background

File upload

Image upload (optional)

<AppFileUpload> · Used for: QR code logo overlay, banner image upload

Field label anatomy

Input label 128 chars

• Label — `text-sm font-semibold`
• Hint — `font-mono text-[11px] text-gray-400`
• Baseline-aligned, `mb-2` gap to input