Live Docs

Navigation

Foundations /

stable

Typography

Plus Jakarta Sans untuk semua teks UI, JetBrains Mono untuk kode & angka. Scale berdasarkan kelipatan 1.125 (perfect fourth).

Font Families

Dua keluarga font self-hosted via next/font.

--font-sans

Plus Jakarta Sans

Geometris, profesional, optimized untuk screen. Dipakai untuk semua text UI: body, heading, label, button.

--font-mono

JetBrains Mono

Monospace tinggi-readability. Dipakai untuk kode, angka tabular, timestamp, ID/UUID.

Type Scale

10 ukuran dari xs sampai 6xl. Pakai Heading/Text komponen, jangan hard-code ukuran.

6xl
Naraya 6xl

3.75rem · Hero display, marketing headline

5xl
Naraya 5xl

3rem · Page-level hero title

4xl
Naraya 4xl

2.25rem · h1 utama dalam aplikasi

3xl
Naraya 3xl

1.875rem · h2 section

2xl
Naraya 2xl

1.5rem · h3 subsection

xl
Naraya xl

1.25rem · h4, lead text

lg
Naraya lg

1.125rem · Subtitle, intro paragraph

base
Naraya base

1rem · Body text default

sm
Naraya sm

0.875rem · Secondary text, help label

xs
Naraya xs

0.75rem · Caption, micro-copy, badge

Font Weights

Lima weights. Hindari pakai weight 100/300/900 karena tidak terdapat di file self-hosted.

Aa
regular

400

Body text default

Aa
medium

500

Label, emphasis ringan

Aa
semibold

600

Heading h3-h6, button text

Aa
bold

700

Heading h1-h2

Aa
extrabold

800

Hero display (jarang)

Line Height

Line-height auto match ke font-size scale. Tightening dipakai pada heading 5xl/6xl.

Paragraf body (1.43)

Naraya Design System adalah library komponen production-ready untuk ekosistem digital Naraya — dibangun untuk Next.js + Tailwind CSS dengan estetika cyber-enterprise yang matang dan profesional.

Lead paragraph (1.55)

Setiap komponen mengikuti prinsip yang sama: mature, accessible, dan customizable via token CSS variables.

Usage Components

Pakai komponen text utility, jangan tag HTML mentah.