Domain:
UI / Design System / Frontend

Difficulty:
Advanced

Problem / steps to reproduce (for bugs)

• PULA currently lacks a cohesive design system.
• UI components are inconsistent across the app (buttons, text, links, tabs, colors, typography).
• To improve usability and consistency, the app should follow Wikimedia Codex Design System principles.
• Reference: Wikimedia Codex Documentation

Expected outcome / task:

• Design a complete design system for PULA in Figma, covering the following elements:

1. Buttons
   • Primary, secondary, outline, disabled states
   • Hover, active, focus states
   • Variants for small, medium, and large sizes

2. Text
   • Body text, headings, captions, labels
   • Font weights, line heights, letter spacing

3. Links
   • Standard links, hover, active, visited states
   • Underline, color, and accessibility considerations

4. Tabs
   • Active/inactive tabs
   • Hover and focus states
   • Variants for horizontal and vertical layouts

5. Colors
   • Primary, secondary, background, surface, error, warning, info, success
   • Accessibility contrast ratios
   • Tailwind-compatible color palette

6. Typography
   • Fonts for headings, body, and code
   • Sizes, line heights, and hierarchy
   • Consistent usage rules across the app

Deliverables:

• Figma file containing all components, variants, and tokens
• Documentation of usage guidelines (color, typography, spacing)
• Optional: export Tailwind configuration for colors, spacing, and fonts

Any links or references:

• Wikimedia Codex Documentation: https://doc.wikimedia.org/codex/main/using-codex/accessing-codex.html
• Figma Documentation: https://help.figma.com/hc/en-us
• Tailwind Design Tokens Reference: https://tailwindcss.com/docs/customizing-colors

Setup Steps (short):

1. Open a new Figma project for PULA design system.
2. Review Wikimedia Codex components and design tokens.
3. Create components in Figma for:
   • Buttons, Text, Links, Tabs, Colors, Typography
4. Add variants for different states (hover, focus, active, disabled).
5. Define a consistent color palette and typography hierarchy.
6. Document usage rules for developers to implement in Next.js + Tailwind.
7. Review for accessibility (contrast ratios, font sizes) and responsiveness.