---
title: "Design System | iamthana"
description: "IAMTHANA design tokens — color, type, spacing, radius, elevation, icons, and motion."
canonical_url: "https://iamthana.com/design-system"
meta:
  "og:description": "IAMTHANA design tokens — color, type, spacing, radius, elevation, icons, and motion."
  "og:title": "Design System | iamthana"
---

> Index of every page on this site: [llms.txt](https://iamthana.com/llms.txt)

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.

**Anuphan**400–700

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

**Anuphan — Latin**400–700

The quick brown fox jumps over the lazy dog

**JetBrains Mono**400–700

const welcome = () => "hi"

Display

**Hero headline**

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

H1

**Page title**

text-4xl font-extrabold tracking-tight

H2

**Section title**

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

H3

**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

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/fast**150ms

ease-out · hover states, toggles

**motion/base**250ms

ease-out · modals, nav, cards

**motion/slow**400ms

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**

**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 size**M

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

### **Number input**

**Minutes**0-59

**Power**watts

**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**

**Position**xyz

X

Y

Z

`<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

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://iamthana.com/#website","@type":"WebSite","inLanguage":"th-TH","name":"iamthana","url":"https://iamthana.com/","publisher":{"@id":"https://iamthana.com/#identity"},"workTranslation":[]},{"@id":"https://iamthana.com/design-system#webpage","@type":"WebPage","description":"IAMTHANA design tokens — color, type, spacing, radius, elevation, icons, and motion.","name":"Design System","url":"https://iamthana.com/design-system","isPartOf":{"@id":"https://iamthana.com/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://iamthana.com/design-system"]}]},{"@id":"https://iamthana.com/#identity","@type":"Person","name":"iamthana","url":"https://iamthana.com","sameAs":["https://github.com/iamthana"]}]}
```

## Sitemap

See the full [sitemap](https://iamthana.com/sitemap.md) for all pages.