COLORS

SURFACE

surface-container-lowest

#ffffff

bg-surface-container-lowesttext-surface-container-lowest

surface-container-low

#f3f3f4

bg-surface-container-lowtext-surface-container-low

surface-container

#eeeeef

bg-surface-containertext-surface-container

surface-container-high

#e8e8e9

bg-surface-container-hightext-surface-container-high

surface-container-highest

#e2e2e3

bg-surface-container-highesttext-surface-container-highest

surface-dim

#dadadb

bg-surface-dimtext-surface-dim

ON-SURFACE

on-surface

#1a1c1d

bg-on-surfacetext-on-surface

on-surface-variant

#444657

bg-on-surface-varianttext-on-surface-variant

inverse-surface

#2f3132

bg-inverse-surfacetext-inverse-surface

inverse-on-surface

#f0f1f2

bg-inverse-on-surfacetext-inverse-on-surface

PRIMARY

primary

#0033ff

bg-primarytext-primary

primary-deep

#0024c1

bg-primary-deeptext-primary-deep

on-primary

#ffffff

bg-on-primarytext-on-primary

primary-fixed

#dfe0ff

bg-primary-fixedtext-primary-fixed

primary-fixed-dim

#bcc3ff

bg-primary-fixed-dimtext-primary-fixed-dim

OUTLINE

outline

#747689

bg-outlinetext-outline

outline-variant

#c4c5da

bg-outline-varianttext-outline-variant

STATUS

secondary

#5f5e61

bg-secondarytext-secondary

secondary-container

#e4e1e6

bg-secondary-containertext-secondary-container

tertiary

#3f4048

bg-tertiarytext-tertiary

error

#ba1a1a

bg-errortext-error

error-container

#ffdad6

bg-error-containertext-error-container
TYPOGRAPHY
text-headline-xl

Manrope 800 · clamp(40–64px) · lh 1.05 · ls −0.04em

Grow Your Brand
text-headline-lg

Manrope 700 · clamp(32–48px) · lh 1.2 · ls −0.03em

Digital Placement
text-headline-md

Manrope 700 · 32px · lh 1.3 · ls −0.02em

Blog Content Placement
text-body-lg

Manrope 400 · 18px · lh 1.6 · ls −0.01em

Platform backlink & promosi digital untuk brand Indonesia.
text-body-md

Manrope 400 · 16px · lh 1.6

Hubungkan brand dengan blogger, KOL, dan media pilihan.
text-label-md

Space Grotesk 500 · 14px · lh 1.4 · ls 0.05em

BLOG PLACEMENT
text-label-sm

Space Grotesk 500 · 12px · lh 1.4 · ls 0.08em

COMING SOON
BUTTONS
primary
secondary
ghost
outline
CARDS
feature

Card content placeholder untuk variant feature.

Gunakan untuk fitur utama dengan hover border.

elevated

Card content placeholder untuk variant elevated.

Gunakan untuk konten yang menonjol di atas surface.

flat

Card content placeholder untuk variant flat.

Gunakan untuk konten sekunder / background ringan.

BORDER RADIUS
rounded-sm

0.125rem / 2px

rounded

0.25rem / 4px

rounded-md

0.375rem / 6px

rounded-lg

0.5rem / 8px

rounded-xl

0.75rem / 12px

rounded-2xl

1rem / 16px

rounded-3xl

1.5rem / 24px

rounded-full

9999px