LogoIAMTHANA

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.

01 · Foundations / Color

Color system

Capybara brown drives identity and action — taken from the mascot. Mint green comes from its cap and stays rare, reserved for success and marks. The neutral ramp is warm ink rather than a cool gray, so nothing on the page reads blue.

Brand — capybara brown

--color-brand-{step}
brand-50
brand-100
brand-200
brand-300
brand-400
brand-500
brand-600 base
brand-700
brand-800
brand-900
brand-950

Secondary — mint

--color-secondary-{step}
secondary-50
secondary-100
secondary-200
secondary-300
secondary-400
secondary-500 base
secondary-600
secondary-700
secondary-800
secondary-900
secondary-950

Neutral — warm ink

--color-gray-{step}
gray-50
gray-100
gray-200
gray-300
gray-400
gray-500
gray-600
gray-700
gray-800
gray-900
gray-950

Semantic tokens

text/primary
--color-gray-900
text/muted
--color-gray-500
bg/base
--color-white
bg/elev
--color-gray-50
border/subtle
--color-gray-200
accent/brand
--color-brand-600
accent/mint
--color-secondary-500
accent/success
--color-emerald-500

02 · Foundations / Type

Typography

Anuphan carries both Thai and Latin in one warm-toned family, so mixed-script lines share a baseline. JetBrains Mono is reserved for code, slugs, and token labels. Noto Sans Thai stays loaded as the fallback.

Anuphan400–700

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

Anuphan — Latin400–700

The quick brown fox jumps over the lazy dog

JetBrains Mono400–700

const welcome = () => "hi"

Display
Hero headline
H1
Page title
H2
Section title
H3
Card title
Body-lg
Intro / lede
Body
Article body
Body-sm
Secondary copy / descriptions
Caption
Labels and eyebrows
Mono
Code / tokens / keyboard

03 · Foundations / Space & Shape

Spacing, radius & elevation

Spacing scale (px)

2
4
6
8
12
16
20
24
32
40
48
64

Radius

sm · 4px
md · 6px
lg · 8px
xl · 12px
2xl · 16px
full · 999px

Elevation

sm
md
lg
xl
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 — flat white, warm near-black in dark mode.

04 · Foundations / Iconography & Motion

Icons & motion

Heroicons (outline) is the primary icon family, sized at 16/18/20/24. Motion is subtle — quick ease-out transitions, no bounces.

search
arrow-right
rocket
sun
moon
rss
wrench
pencil
tag
clipboard
calendar
eye
code
palette
key
braces
qr
globe
menu
sparkles
github
motion/fast150ms
ease-out · hover states, toggles
motion/base250ms
ease-out · modals, nav, cards
motion/slow400ms
ease-out · page transitions, heroes

05 · Primitives / Inputs

Inputs

Text inputs, textareas, selects, and field labels. All respect the brand focus ring and share the same rounded-lg border treatment.

Text input

0 chars
required

Preferred for hex, tokens, IDs, cron expressions

Textarea

0 chars
font-mono

Select

Checkbox & Switch

Chip selector

M

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

Number input

0-59
watts
step 0.1

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

Grouped input (prefix / suffix)

/gm
//gm

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

Coordinate input box

xyz
X
Y
Z

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

Styled checkbox (brand fill)

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

Color picker

#3B82F6

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

File upload

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

Field label anatomy

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

Copyright © 2026