v1.0 · Diperbarui Nov 2026

Design System

Token dan komponen di balik portofolio Sabil: warna, tipografi, spasi, radius, dan komponen.

Typeface
Instrument Serif, Inter, Caveat
Colors
18 colors
Spacing
19 values in use
Components
5 sets · 12 items
01Warna
Surface
bg
#FFFFFF
surface
#F9F8F6
surface-2
#F2F1EF
ink
#0A0A0A
Text
text-primary
#0A0A0A
text-secondary
#0A0A0A99
text-tertiary
#0A0A0A4D
text-on-ink
#FFFFFF
text-on-ink-muted
#FFFFFF99
Line & status
border
#0A0A0A14
border-subtle
#0A0A0A0F
success
#28C840
success-soft
#28C84033
Button & grid
button-top
#2B2B30
button-bottom
#111114
button-stroke
#000000D9
grid-mark
#00000029
grid-line
#0000000E
02Tipografi
DisplayInstrument Serif 40
Flyzio
TitleInstrument Serif 36
Projects
SectionInstrument Serif 28
Selected work
Lead16 / 400
A flight booking app that feels calm.
Body & UI
Body strong18 / 500
Download portfolio
Body18 / 400
I design intuitive products.
Name16 / 500
UI Designer
Text16 / 400
Turn insights into user flows.
Label15 / 500
Overview
Label muted15 / 400
Selected work
Link15 / 400
Download CV
Small14 / 400
Mobile app · Flight booking
Caption13 / 400
Role
Meta12 / 400
Today’s muraja’ah
Numeric 14Inter 14 · tabular
01 02 03
Numeric 13Inter 13 · tabular
04 projects
Numeric 12Inter 12 · tabular
#0D99FF
Figma tag10-11 / 500
288 × 80 · Keepr / Cover
Not tokenised yet · contact section
HeadlineInstrument Serif 72 · shown 32
have a product idea?
ButtonInter 17 / 500
Let’s talk
HandwritingCaveat 22
it starts with a hello
Grid marksInter 11
+ + +
03Spasi & Radius
Gap & padding values in use
2
4
5
6
8
10
12
14
16
18
20
24
28
40
48
56
72
80
88
Corner radius values in use
3
4
8
10
11
12
16
20
50
full
04Komponen
❖ Button
Hubungi Saya Galeri
❖ Pill
Semua 04 Aplikasi Mobile 01
❖ Link
Unduh CV
❖ Identity
Sabilul Muttaqin
❖ Figma accents
288 × 80 20 80