Brand identity, color palette, typography, dan komponen — single source of truth untuk konsistensi visual.
Logo radar sinyal — mendeteksi peluang market. Amber→emerald gradient: dari aksi ke pertumbuhan.
Primary — horizontal lockup
Mark only — favicon, app icon
Monochrome — single-color contexts
Size scale — 48px → 16px (favicon)
Amber = brand primary (fire, energy, action). Emerald = brand secondary (growth, gain, BD accent). Gradient = signature journey from action to result.
Gradient start, accent light
Primary brand, CTAs, logo anchor
Hover states, depth
Gradient end, success light
Secondary brand, BD accent, gain
Hover, depth
Gain, positive, confirmed
Caution, accumulation, neutral
Loss, error, sell signal
Informational, links
App background (dark)
Card background, elevated
Borders, dividers
Muted text, captions
Body text (light)
Primary text (dark)
Three families: Outfit (headings — geometric, professional),Inter(body — readable, neutral),Space Grotesk(wordmark — distinctive).
| Role | Sample | Usage |
|---|---|---|
| Display | Bandarmologi | Hero headlines, page titles |
| H1 | Analisis IDX | Section headers |
| H2 | Fitur Unggulan | Subsection headers |
| H3 | Broker Activity | Card titles |
| Body Large | Chat dengan AI analyst | Hero subtext |
| Body | BD singkatan dari Bandar | Default text |
| Body Small | Data EOD, update harian | Secondary text |
| Caption | Sumber: sistem KataBD | Labels, timestamps |
| Wordmark | KataBD | Logo wordmark only |
Border radius scale and grid system.
0.375rem
0.5rem
0.625rem
0.875rem
1.125rem
1.375rem
max-w-6xl (1152px)
px-6 (24px)
py-24 (96px)
Core UI patterns using brand tokens.
Daily buy/sell flow dengan avg prices
Trading signal detection realtime
Market cap, PE, P/B, financial data
Bahasa trader lokal — direct, confident, data-driven. Bukan AI generic.
Analisis bandarmologi, teknikal, & fundamental — dari sudut pandang bandar.
KataBD Design System · Living document · Updated with brand