Internal Reference

Design System

Referensi tunggal untuk warna, tipografi, aset, dan komponen yang dipakai di seluruh situs. Setiap nilai di halaman ini terhubung langsung ke style yang sama seperti yang dipakai di produksi, jadi developer bisa langsung memakainya tanpa menebak.

01 — Colors

Semantic Tokens

Pakai token semantik ini untuk semua elemen baru. Nilai mentah hanya dipakai bila benar-benar tidak ada token yang cocok.

Semantic/Primary

rgb(0, 85, 255)

Aksi utama, tombol primer, link aktif

Semantic/Primary Hover

rgb(8, 66, 197)

State hover dari aksi utama

Semantic/Text Primary

rgb(9, 9, 9)

Judul dan teks utama

Semantic/Text Body

rgb(97, 99, 105)

Paragraf dan body copy

Semantic/Text Muted

rgb(162, 164, 169)

Caption, eyebrow, teks sekunder

Semantic/Surface

rgb(255, 255, 255)

Permukaan kartu dan panel

Semantic/Surface Alt

rgb(244, 244, 245)

Permukaan sekunder, area terang

Semantic/Surface Ink

rgb(9, 10, 11)

Section gelap dan kontras tinggi

Semantic/Border

rgb(228, 229, 231)

Garis pemisah dan outline kartu

Blue Ribbon

Palet aksen utama. 700 dipakai sebagai Primary.

237 246 255

100

214 234 255

200

181 219 255

300

131 198 255

400

72 167 255

500

30 131 255

600

6 102 255

700

0 85 255

800

8 66 197

900

13 60 155

950

14 38 93

Shuttle Gray

Palet netral untuk teks, permukaan, dan border.

250 250 250

100

244 244 245

200

228 229 231

300

212 213 216

400

162 164 169

500

114 116 121

600

97 99 105

700

64 65 69

800

39 40 42

900

24 25 27

950

9 10 11

02 — Typography

Type Scale

Ukuran ditulis dalam format Desktop / Tablet / Phone. Semua ukuran sudah responsif otomatis, jadi cukup pakai nama style-nya.

Aa Bb Cc 0123

Cal Sans

Display & Heading

Semua heading, label tombol, dan nav link.

Aa Bb Cc 0123

Plus Jakarta Sans

Body & UI Text

Paragraf, label, caption, dan teks antarmuka.

Display/H1

Cal Sans · 400

90 / 56 / 40

Design System

Display/H2

Cal Sans · 400

64 / 44 / 32

Section Heading

Display/H3

Cal Sans · 400

48 / 34 / 28

Subsection Heading

Display/H4

Cal Sans · 400

32 / 28 / 24

Card Title Heading

Display/H5

Cal Sans · 400

24 / 22 / 20

Small Heading

Display/H6

Cal Sans · 400

20 / 19 / 18

Micro Heading

Text/Body Large

Plus Jakarta Sans · 400

22 / 18 / 16

Intro paragraph untuk pembuka section.

Text/Body

Plus Jakarta Sans · 400

16 / 15 / 15

Body copy standar untuk paragraf isi halaman.

Text/Body Small

Plus Jakarta Sans · 400

14 / 14 / 13

Teks pendukung yang lebih rapat.

Text/Label

Plus Jakarta Sans · 500

14 / 14 / 13

Label Field

Text/Eyebrow

Plus Jakarta Sans · 500

13 / 12 / 12

Eyebrow Label

Text/Caption

Plus Jakarta Sans · 400

12 / 12 / 12

Caption dan metadata kecil.

Text/Button Label

Cal Sans · 400

18 / 15 / 12

Button Label

Text/Nav Link

Cal Sans · 400

17 / 15 / 12

Nav Link

03 — Components

Core Components

Instance asli dari library proyek. Pakai komponen ini apa adanya dan atur lewat properti yang tersedia; jangan membuat versi baru untuk kebutuhan yang sama.

Let’s Collaborate

Primary Button

Variant: Primary, Secondary, Mobile, Huge Primary. Properti: Title, Background, Text Color, Link, Padding.

View Work

Primary Button — Secondary

Varian sekunder untuk aksi pendamping.

Get in touch

Primary Button 2

Tombol kontak. Variant: Primary, Secondary, Mobile.

PDF Portfolio

Button

Tombol unduh dokumen. Variant: Dekstop, Tablet, Mobile.

Landing Page

Header Tag

Tag judul dengan ikon. Variant: Primary, Secondary, Huge.

Hey, Still Curious

Highlighter Tag

Penanda teks untuk menyorot frasa penting.

One dedicated creative, 20 hrs a week

Bullet Point

Item daftar dengan ikon. Variant: Primary, Secondary, Tertiary.

Home

Navigation Item

Item navigasi yang dipakai di Nav Bar.

04 — Assets

Icon Sets & Link Styles

Ikon selalu diambil dari salah satu set di bawah, bukan dari karakter teks. Gaya tautan memakai preset agar state hover dan halaman aktif konsisten.

Phosphor

1512 ikon · Set utama untuk UI dan aksi.

Toolstack Icons

47 logo tools untuk section tech stack.

Stylokit

512 ikon alternatif untuk aksen kecil.

Link/Primary

Tautan utama di dalam paragraf dan CTA teks.

Lihat halaman pekerjaan

Link/Quiet

Tautan halus untuk footer dan teks sekunder.

Kebijakan privasi

Link/Nav Pill

Tautan navigasi berbentuk pill dengan state halaman aktif.

Beranda

05 — Layout

Breakpoints & Spacing

Semua halaman memakai layout template yang sama, sehingga navigasi dan footer identik di setiap breakpoint.

Ultrawide

2880px dan ke atas

Base font 16px

Desktop

1440px – 2879px

Base font 16px · breakpoint utama

Mini Desktop

1200px – 1439px

Base font 16px

Tablet

810px – 1199px

Base font 14px

Phone

hingga 809px

Base font 12px · navigasi memakai drawer

Content width

1080px

Lebar maksimum semua section.

Section padding

80px / 40px

Vertikal 80px, horizontal 40px.

Grid gap

16px

Jarak antar kartu di grid.

Stack gap

32px / 10px

Antar blok besar dan antar teks.

Card radius

16px

Kartu, panel, dan tabel.

Inner radius

10px

Elemen di dalam kartu.

06 — Assets

Asset Library

Seluruh gambar, grafis vektor, dan media yang terpakai di situs ini: 98 gambar, 6 vektor, dan 3 berkas media. Angka di bawah setiap aset menunjukkan berapa kali aset itu dipakai.