Geist
$font-sansABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !?&@#$%()→
- Regular 400
- Medium 500
- Semibold 600
DISPLAY, HEADINGS, BODY, BUTTONS
01 — COLOR
Ink, paper, ember.
Most of the interface is near-black ink on white and warm paper. Text and borders use ink at fixed alpha steps. Ember is the only loud color. Use it for one thing per screen.
Brand palette
PRIMITIVES
- Ink#0A0A0A$bg-inverse
- Paper#FFFFFF$bg
- Bone#F9F8F6$bg-subtle
- Stone#F2F1EF$bg-muted
- Ember#FF6308$accent
- Violet#BC97FF$violet
Ink alpha scale
USED FOR TEXT, BORDER, OVERLAY
- 4%HOVER
- 6%—
- 8%BORDER
- 10%—
- 25%DISABLED
- 30%OVERLAY
- 60%SECONDARY
- 100%PRIMARY
Semantic tokens
LIGHT / DARK
Light mode
mode: lightBACKGROUND
- $bg#FFFFFF
- $bg-subtle#F9F8F6
- $bg-muted#F2F1EF
- $bg-inverse#0A0A0A
- $bg-hover#0A0A0A0A
TEXT
- $text-primary#0A0A0A
- $text-secondary#0A0A0A99
- $text-tertiary#7D8187
- $text-disabled#0A0A0A40
- $text-inverse#FFFFFF
BORDER
- $border#0A0A0A14
- $border-subtle#0A0A0A0A
- $border-strong#0A0A0A40
- $overlay#0A0A0A4D
ACCENT
- $accent#FF6308
- $accent-subtle#FF63081A
Dark mode
mode: darkBACKGROUND
- $bg#0A0A0A
- $bg-subtle#111110
- $bg-muted#1A1A19
- $bg-inverse#FFFFFF
- $bg-hover#FFFFFF0B
TEXT
- $text-primary#FFFFFF
- $text-secondary#FFFFFF99
- $text-tertiary#8D867E
- $text-disabled#FFFFFF40
- $text-inverse#0A0A0A
BORDER
- $border#FFFFFF14
- $border-subtle#FFFFFF0B
- $border-strong#FFFFFF40
- $overlay#00000099
ACCENT
- $accent#FF6308
- $accent-subtle#FF630826
Status
- Success#28C840
- Warning#FEBC2E
- Danger#FF5F57
Product spectrum
- red-ember #E04A26
- accent #FF6308
- violet #BC97FF
- blue #88A6FF
- teal #29C6BE
- green #91C17A
CODE SYNTAX · DARK
const faiz = "design engineer" // portfolio v2- code-text #E1E1E1
- code-keyword #F7768E
- code-string #9ECE6A
- code-function #93ADFF
- code-number #FF9E64
- code-comment #8D867E
02 — TYPOGRAPHY
Tight, calm, exact.
Geist for all interface text. Geist Mono for code, dates, and small labels. Headings use weight 500 and negative tracking of 1% of the size. Body text uses weight 400 and open line height.
Geist Mono
$font-monoABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 !?&@#$%()→
- Regular 400
- Medium 500
- Semibold 600
CODE, METADATA, LABELS, NUMBERS
| TOKEN | SIZE / LINE / TRACK / WEIGHT | SPECIMEN |
|---|---|---|
| display-xl | 60 / 1 / -0.6 / 400 | Design Engineer who ships |
| display-lg | 48 / 1 / -0.48 / 500 | Index of work |
| heading-xl | 30 / 1.2 / -0.3 / 500 | What people say after we ship. |
| heading-lg | 24 / 1.33 / -0.24 / 500 | Speaking & events |
| heading-md | 16 / 1.38 / -0.16 / 500 | Cursor for Non-IT |
| body-lg | 18 / 1.63 / 0 / 400 | I design and build digital products, end to end. |
| body-md | 16 / 1.5 / 0 / 400 | Hands-on workshops and talks about building with AI. |
| label | 14 / 1.43 / 0 / 500 | Discuss a Project |
| body-sm | 14 / 1.43 / 0 / 400 | Pay-as-you-go pricing for product teams. |
| caption | 13 / 1.63 / 0 / 400 | Cara gue iterasi desain UI bareng Claude Code |
| micro | 12 / 1.33 / 0 / 400 | Isometricon · 2024 — Now |
| code | 13 / 1.85 / 0 / 400 · mono | faiz.ship("your next product") |
| mono-label | 11 / 1.63 / -0.11 / 400 · mono | PORTFOLIO V2 · FOUNDATIONS |
03 — SPACING
A 4px rhythm.
All space is a step of 4, with 2 and 6 for tight inline parts. Small steps group items. Large steps (64 and up) separate sections.
- $space-0-52px
- $space-14px
- $space-1-56px
- $space-28px
- $space-312px
- $space-416px
- $space-520px
- $space-624px
- $space-832px
- $space-1040px
- $space-1248px
- $space-1664px
- $space-2080px
- $space-2496px
COMMON USES
- Section padding (y)
- 96
- Container gutter
- 24
- Section title → content
- 40
- Card padding
- 16 / 24
- Card grid gap
- 16
- Button padding
- 10 × 18
- Small button padding
- 6 × 12
- Icon → label
- 8
- Meta row gap
- 6
04 — RADIUS
Soft, never round.
Small parts get small radii. Cards and media use 16. Buttons, tags, and the prompt bar are full pills. Chat bubbles cut one corner to 6 to point at the speaker.
- radius-xs3px · KBD, CODE CHIP
- radius-sm6px · INPUTS, SWATCHES
- radius-md8px · MENUS, SMALL CARDS
- radius-lg12px · PANELS, POPOVERS
- radius-xl16px · CARDS, MEDIA, CODE
- radius-full9999px · BUTTONS, TAGS, PILLS
- bubble16·16·16·6 · CHAT BUBBLE
05 — ELEVATION
Borders first, glass on media.
Most depth comes from a 1px ink border, not a shadow. Use the float shadow only for windows that sit over a page. Use glass for controls that sit on photos or color.
- Flat
Flat
LEVEL 01px $border, no shadow
- Subtle
Subtle
LEVEL 1$bg-subtle fill, no border
- Float
Float
LEVEL 20 0 1 #0000000F, 0 18 16 #0F172A2E
- Glass
Glass
ON MEDIA#FFFFFF1A, blur 12, inner highlight
06 — ICONOGRAPHY
Thin line, one size up.
Use Lucide outline icons with a 1.33px look. Default size is 16 next to 13–14px text and 20 in the nav. Icons take the text color of their label. Do not fill icons, and do not use color for decoration.
- arrow-up-right
- arrow-right
- chevron-down
- copy
- check
- x
- search
- menu
- mic
- image
- video
- code
- terminal
- globe
- sparkles
- paperclip
- audio-lines
- file-text
- book-open
- external-link
- plus
- settings
- github
- send
- 12pxINLINE META, KBD
- 16pxBUTTONS, LINKS, LISTS
- 20pxNAV, TOOLBAR
- 24pxFEATURE, EMPTY STATE
07 — LAYOUT GRID
One centered column.
Content sits in a 1280px container with 24px side padding, so the text width is 1232px. Use 12 columns with a 24px gap. Sections stack with 96px of vertical space.
CONTAINER 1280 · PADDING 24VIEWPORT 1440
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
- 10
- 11
- 12
- COLUMNS
- 12
- GUTTER
- 24px
- CONTENT
- 1232px
- SECTION Y
- 96px
- HEADER
- 64px, sticky
- base≥ 0px
- 1 column. Nav becomes a menu. Display text drops to 36–40.
- sm≥ 640px
- 2 columns for cards.
- md≥ 768px
- Product rows go side by side.
- lg≥ 1024px
- Full nav. 4-column news grid.
- xl≥ 1280px
- Container is at max width.