Design System
The ArshakUIX design language.
The tokens behind this site — the newspaper edition, live and documented.
01 — Color
Brand palette
Teal
#05735F
Teal Deep
#045C4C
Teal Ink
#033B33
Ink
#0B1320
Ink Soft
#16202F
Mint
#CCFBF1
Mint Soft
#E6FBF5
Paper
#FBFBF8
Newsprint Tint
#EFEAE0
Ink Rule
rgba(11,19,32,0.35)
Line
#E2E8F0
Body
#475569
Muted
#64748B
Token classes: bg-teal, text-ink, border-line — defined in tailwind.config.ts, with the newspaper layer in app/news-theme.css.
02 — Typography
The newspaper type system
Display
Playfair Display · text-hero
Design that ships value.
Headline
Playfair Display · text-h2
Projects shaped by real product thinking.
Card title
Playfair Display · text-project-title
ChakriPath — AI job preparation
Body prose
Newsreader · text-base
Interfaces should explain themselves. Clear hierarchy, honest states, and details that respect the user's time.
Interface
Plus Jakarta Sans · text-base
Buttons, navigation, forms and controls stay in the interface sans.
Labels & meta
Space Mono · text-sm
LAST UPDATED · OCTOBER 2026 · CONCEPT PROJECT, DEMO DATA
03 — Spacing & Radii
8px base scale
Spacing scale
Section rhythm: py-section — clamp(4rem, 9vw, 7.5rem).
rounded-card
4px — the press radius
shadow-card
Offset press shadow
shadow-card-hover
Hover this card
04 — Components
Live previews
Badge / pill
bg-teal pill · border-line outline pill · bg-mint-soft icon dot
Card
Preview
ChakriPath
AI-powered job preparation for Bangladesh — live product with real users.
ruled card · ink border · press shadow → hover lift
Every token on this page is defined in tailwind.config.ts and the newspaper layer in app/news-theme.css, rendered with the site's own classes — this page is its own documentation.