Skip to main content

🎨 UKI Design System

The UKI Design System provides the foundations, components, and patterns that bring consistency, scalability, and quality to all Flutter UKI products.

It is maintained in Figma and organised into different libraries and files, grouped by stability (Stable vs Beta).

🔑 Where to Find Things​

🏛 Foundations (STABLE)​

Core properties that define the UKI brand’s look and feel:

  • Colours → palettes & semantic tokens
  • Typography → type scales & tokens
  • Spacing → spacing tokens & layout grid

👉 See the Foundations section for detailed guidelines.

🧩 Components​

Reusable building blocks for products.

  • Stable Components (Shared file)

    • Collection of fully tested components (e.g., Primary Button, Collapse).
    • Ready to use in production work.

  • Beta Components (One component per file)

    • Components under testing/iteration.
    • Use with caution and provide feedback to the DS team.

👉 See Components & Patterns for guidelines.

📐 Templates (BETA)​

Pre-assembled component groups for common use cases.
Examples: Coupons, Markets.

📄 Pages (BETA)​

Pre-assembled page structures for core flows.
Examples: Homepage, Sports Page.

📚 Additional Resources​

  • Resources → Utilities to help document design work
  • Sandbox → Free space for design explorations
  • Retrospectives → Team or feature reviews
  • Admin → Hiring & non-design related files
  • Presentations → DS presentations
  • Workshops → Inputs and outcomes from team workshops
  • Planning → Roadmaps and planning diagrams
  • Processes → DS team workflows and rituals

✅ Best Practices​

  • Prefer Stable files whenever possible.
  • Use Beta files only if approved by your squad or DS lead.
  • When in doubt, reach out in #design-system Slack channel.