Skip to main content

​
Display

See how your mini app is displayed in the Base app in our Figma sepcification file.

​
Layout

  • Keep core actions visible near the top or middle of the screen — not hidden behind scrolls.
  • Limit the number of buttons. Make it obvious what users should do first.
  • Use clear primary calls to action (e.g., “Create”, “Start Game”, “Deposit”).
  • Design for small viewports and portrait orientation.
  • Optimize for thumb reach and one-handed use.
  • Most mini apps should include a bottom navigation bar.
Bottom navigation bar example
  • A side menu can also be an intuitive place to put settings and user profile information. Side navigation menu example
  • Always include labels under icons so users understand each tab.
  • Test on multiple device sizes to ensure buttons are not cut off.

​
Colors

Use color to communicate clearly, express your brand, and create cohesive mini app experiences.

​
Color Palette

  • Primary: Brand color for CTAs and key interactions.
  • Secondary: Complements primary; use for accents or secondary actions.
  • Neutral: For text, backgrounds, and structure with strong contrast.

​
Themes

  • Support light and dark modes:
  • Maintain contrast and brand consistency.
  • Respect system preference but allow manual toggle.
  • Use smooth transitions between themes.
  • 💡Tip: Use semantic color tokens (e.g., --color-primary, --color-background) with light/dark theme overrides for maintainability and flexibility.

​
Typography

  • Ensure the fonts you use are easy to read. Our team recommends Inter.
  • Ensure sufficient contrast between text and background colors to make reading easy under various lighting conditions.
  • Stick to regular, bold, and italic as needed. Decorative or script fonts should be reserved for accents, not body text.

​
Spacing

  • Groups related elements together.
  • Consistent spacing: Creates visual rhythm and predictability with consistent spacing.
  • Give content room to breathe with white space.
  • Avoid cramped layouts.
  • Base Unit: Start with a base spacing unit (typically 4px or 8px) and maintain consistency throughout:
    • 4px base: More granular control, better for mobile.
    • 8px base: Easier mental math, good for desktop.

​
Touch Interactions

  • Ensure all touch targets are at least 44px.
  • Support common gestures (tap, swipe, pinch) where appropriate.
  • Don’t rely on hover states — they don’t exist on touch screens.
⌘I