Apolo

Apolo is Bipa's Design System, a set of guidelines that help our teams build our products consistently and efficiently. This design system provides a robust foundation of components and patterns that ensure a cohesive user experience across all Bipa's current and future applications.

Components Checklist

Foundation

• Colors
  • Core brand colors (Blue, Violet, Red, Orange, Yellow, Green, Aqua, Pink)
  • Core neutral colors (Black, White, Gray scales)
  • Light/Dark variants

Typography

• Font Family
  • ABC Ginto (Regular, Medium, Bold)
• Text Styles
  • SuperLargeTitle
  • ExtraLargeTitle
  • ExtraLargeTitle2
  • Title1-3
  • Headline
  • Body
  • Callout
  • Subheadline
  • Footnote
  • Caption1-2

Iconography

• SF Symbols
• Noto Emoji
• Custom icon sets

Layout & Spacing

• Base unit (4px)
• Spacing scales
  • Zero (0px)
  • Extra Extra Small (4px)
  • Extra Small (8px)
  • Small (12px)
  • Medium (16px)
  • Large (20px)
  • Extra Large (32px)
  • Extra Extra Large (40px)

Border Radius

• Zero (0)
• Small (8)
• Medium (12)
• Large (20)

Atoms

• Buttons
  • Primary
  • Secondary
  • Ghost
  • Icon buttons
• Toggles
  • Switch
  • Radio
  • Checkbox
• Avatar
  • User avatars
  • Placeholder avatars
• Tags
  • Status tags
  • Label tags
• Duration Button
• Charts
• Background styles

Brand Assets

• Bipa Symbol
• Bipa Logo Horizontal
• Bipa Vertical
• Bipa Premium variants
• Logo guidelines