Brand Guidelines

The complete Brand Guidelines are maintained in the root BRAND_GUIDELINES.md file.

→ View Full Brand Guidelines

---

Quick Reference

Visual Identity

Component Prefix: All components use the J prefix

• ✅ JButton, JAlert, JBadge
• ❌ Button, JokoButton, Btn

Pronunciation: Joko-UI is pronounced like "Jokowi" (JO-ko, rhyming with "cocoa"), not "yo-ko" or "jah-ko".

Color Philosophy

• Primary (Merah Presiden): #dc2626 — Authority, action, passion
• Secondary (Biru Pembangunan): #2563eb — Trust, stability, progress

Typography

• UI Font: Inter — Clean, modern, highly legible
• Heading Font: Poppins — Geometric, bold, confident
• Code Font: JetBrains Mono — Designed for code readability

Voice & Tone

1. Direct & Clear (Blusukan) — No jargon, active voice
2. Action-Oriented (Kerja) — Use verbs, focus on what users can DO
3. Progressive Yet Humble (Mental Revolusi) — Confident but not arrogant
4. Practical & Long-Term (Infrastructure) — Solutions that last

---

Key Sections in Full Document

The complete brand guidelines cover:

1. Brand Philosophy — The four pillars and their translation to design
2. Visual Identity — Logo, name usage, visual motifs
3. Color System — Complete palette with rationale
4. Typography — Font choices, type scale, weights
5. Voice & Tone — Brand voice attributes and writing examples
6. Usage Guidelines — Component naming, prop patterns, event naming
7. Digital Applications — Documentation, library structure, Storybook

---

Do's and Don'ts

Visual Design ✅ DO

• Use design tokens for all values
• Maintain consistent spacing (8px grid)
• Test with keyboard navigation
• Test with screen readers
• Use semantic HTML elements

Visual Design ❌ DON'T

• Hard-code colors or sizes
• Use arbitrary spacing values
• Rely only on color for information
• Use divs where buttons should be
• Sacrifice accessibility for aesthetics

Component Design ✅ DO

• Provide sensible defaults
• Make common cases easy
• Make complex cases possible
• Document edge cases
• Emit clear events

Component Design ❌ DON'T

• Require many props for basic usage
• Make simple things complicated
• Hide important options
• Leave behavior undocumented
• Mutate props

---

For Contributors

When contributing to Joko-UI, please review the full brand guidelines to ensure:

• Visual consistency with existing components
• Adherence to naming conventions
• Proper use of design tokens
• Alignment with brand voice
• Accessibility compliance

→ Read Full Brand Guidelines

---

Related Documents

• Philosophy — Understanding the four pillars
• Design Principles — Decision-making framework
• Design Tokens — Complete token reference