WePlanner Design System

v1.0.0 — Production-ready tokens, components & patterns

ReactTailwindCSSshadcn/ui

1. Design Principles

The foundational guidelines that shape every decision in the WePlanner design system.

Clarity First

Clean interfaces that reduce cognitive load. Every element earns its place on screen, eliminating noise so users can focus on what matters.

Consistent & Scalable

Token-based design ensures consistency across all modules — from campaigns and briefs to approvals and reports.

Role-Aware

The UI adapts to Client, Manager, and Collaborator roles, surfacing the right actions and information for each context.

Action-Oriented

Every screen drives toward a clear action. Primary CTAs are always visible, and workflows guide users to completion.

Accessible

WCAG 2.1 AA compliant with full keyboard navigation, proper contrast ratios, and screen-reader support built in from day one.

Responsive

Desktop-first design that gracefully adapts to tablet and mobile viewports without sacrificing usability or information density.

2. Color System

Token-based color system with Orange as the primary brand color. Supports light and dark modes.

Brand Orange Scale

100

200

300

400

500

600

700

800

900

Semantic Colors

Primary

--primary

Secondary

--secondary

Accent

--accent

Destructive

--destructive

Success

--success

Warning

--warning

Info

--info

Surface & Background

Background

--background

Card

--card

Popover

--popover

Muted

--muted

Text Colors

Foreground

--foreground

Card FG

--card-foreground

Muted FG

--muted-foreground

Primary FG

--primary-foreground

Border & Ring

Border

--border

Input

--input

Ring

--ring

3. Typography

Font: Inter. A complete type scale from Display to Overline with defined sizes, weights, and line heights.

Display

Display Heading

3.5rem / 56pxBoldLH 1.1

Heading One

2.25rem / 36pxBoldLH 1.2

Heading Two

1.875rem / 30pxSemiboldLH 1.3

Heading Three

1.5rem / 24pxSemiboldLH 1.4

Heading Four

1.25rem / 20pxSemiboldLH 1.4

Heading Five

1.125rem / 18pxMediumLH 1.5

Heading Six

1rem / 16pxMediumLH 1.5

Body LG

Body text large for paragraphs and descriptions.

1.125rem / 18pxNormalLH 1.6

Body

Body text for general content and UI elements.

1rem / 16pxNormalLH 1.6

Body SM

Small body text for secondary content.

0.875rem / 14pxNormalLH 1.5

Caption

Caption text for labels and metadata

0.75rem / 12pxMediumLH 1.4

Overline

Overline Text

0.75rem / 12pxSemiboldLH 1.4

Tailwind Classes Reference

Token	Tailwind Classes
Display	text-[3.5rem] font-bold tracking-tight leading-[1.1]
H1	text-4xl font-bold tracking-tight leading-[1.2]
H2	text-3xl font-semibold tracking-tight leading-[1.3]
H3	text-2xl font-semibold leading-[1.4]
H4	text-xl font-semibold leading-[1.4]
H5	text-lg font-medium leading-[1.5]
H6	text-base font-medium leading-[1.5]
Body LG	text-lg leading-[1.6]
Body	text-base leading-[1.6]
Body SM	text-sm leading-[1.5]
Caption	text-xs font-medium leading-[1.4]
Overline	text-xs font-semibold uppercase tracking-widest leading-[1.4]

4. Design Tokens

Foundational values that drive consistency: spacing, radii, shadows, layering, motion, and opacity.

Spacing Scale

0px

0.5

2px

4px

1.5

6px

8px

12px

16px

20px

24px

32px

40px

48px

64px

80px

96px

Border Radius

sm0.375rem

md0.5rem

lg0.625rem

xl0.875rem

2xl1.125rem

full9999px

Shadow Scale

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

Z-Index

Token	Value	Usage
z-0	0	Base
z-10	10	Dropdown
z-20	20	Sticky
z-30	30	Modal backdrop
z-40	40	Modal
z-50	50	Toast

Motion & Duration

Duration

fast100ms

normal200ms

slow300ms

slower500ms

Easing

ease-in-outMost transitions

ease-outElements entering view

ease-inElements leaving view

Opacity Scale

100

5. Layout System

Grid, breakpoints, containers, and spacing rules for consistent layouts.

Breakpoints

Name	Min Width	Typical Device
sm	640px	Mobile landscape
md	768px	Tablet
lg	1024px	Laptop
xl	1280px	Desktop
2xl	1536px	Large desktop

Container Widths

max-w-sm

640px

max-w-md

768px

max-w-lg

1024px

max-w-xl

1280px

max-w-5xl

1024px

(Content)

max-w-7xl

1280px

(Page)

12-Column Grid

Common Layout Patterns

Sidebar + Content

256px

Fluid

Centered Content

max-w-5xl mx-auto

Spacing Rules

Context	Tailwind
Page padding	px-4 sm:px-6 lg:px-8
Section gap	space-y-8 or space-y-12
Card grid gap	gap-4 or gap-6
Card padding	p-4 sm:p-6

6. Component Library

Core UI components built with shadcn/ui and Radix UI primitives. All components support theming and are accessible by default.

6.1 Buttons

Variants

Sizes

Loading State

6.2 Inputs

Text Input

Textarea

Enable notifications

Auto-assign tasks

6.3 Badges

DefaultSecondaryOutlineDestructiveSuccessWarningInfo

6.4 Cards

Active Tasks

+12% this week

Credits Used

1,240

-5% this week

Completion Rate

89%

+3% this week

6.5 Navigation

Dashboard overview content

Breadcrumb

Home/Dashboard/Tasks

6.6 Data Display

Task	Status	Assignee	Due Date
Redesign landing page	In Progress	ML	Mar 15
Write blog post	To Do	AS	Mar 18
Social media campaign	Review	JD	Mar 20
Email newsletter	Completed	ML	Mar 10

Progress65%

6.7 Feedback

Info

Your credit balance is running low. Contact your manager to request more credits.

Error

Task upload failed. File exceeds 20 MB limit.

6.8 Avatars

XSSMMDLG

Avatar Group (overlapping)

MLASJDRK

6.9 Task Management Components

Task Status Badges

Em abertoPara FazerAprovacao internaAprovacao ClienteAjustesConcluido

Color Info Pills — clique no card para ver o modal animado

March 09 — 16WeeklyZoomHerengracht 133, Amst...Participants12:00 — 13:00

Task Card (clicável — abre popup com animação)

High12 Jan 2024 at 09pm

Create comprehensive wireframe

Discuss with UX Designer to develop the concept into comprehensive and effective wireframe

# Design# UI

AAArman Aditya

6.10 Dashboard KPI Widgets

Total Tasks

+12% from last week

Credits Used

1,240

-5% from last week

Completion Rate

89%

+3% from last week

7. Interaction States

Visual reference for every interactive state a component can have.

Button States

Default

Hover

Active

Focus

Disabled

Error

Success

Input States

Default

Focus

Error

This field is required.

Disabled

Loading Skeleton

8. Accessibility Guidelines

WCAG 2.1 AA compliance standards and implementation guide.

Color Contrast

Normal Text: 4.5:1

All text under 18px (or 14px bold) must have at least 4.5:1 contrast ratio against its background.

Large Text: 3:1

Text at 18px+ (or 14px+ bold) requires at least 3:1 contrast ratio.

Primary on White — Pass

Foreground on BG — Pass

Focus Management

All interactive elements have visible focus rings (ring-2 ring-ring ring-offset-2)
Tab order follows logical reading flow (top to bottom, left to right)
Focus trap in modals and dialogs (handled by Radix UI primitives)
Focus returns to trigger element when modal closes

Keyboard Navigation

Key	Action
`Tab`	Move focus forward
`Shift + Tab`	Move focus backward
`Enter / Space`	Activate focused element
`Escape`	Close modal, dropdown, or popover
`Arrow Keys`	Navigate within tabs, menus, selects
`Home / End`	Jump to first/last item

ARIA Best Practices

Use semantic HTML: <button>, <nav>, <main>
aria-label for icon-only buttons
aria-describedby for form validation messages
role="status" for toast notifications
Radix UI primitives provide built-in ARIA — avoid overriding them

Screen Reader Considerations

Meaningful alt text for all images and icons
Use sr-only class for visually hidden but accessible labels
Live regions (aria-live) for dynamic content updates

9. Responsive Rules

Desktop-first responsive strategy with graceful degradation to mobile.

Breakpoint Behavior Matrix

Device	Range	Sidebar	Grid	Navigation	Modals
Desktop	>=1280px	Fixed sidebar	3-4 columns	Topbar + Sidebar	Centered overlay
Laptop	>=1024px	Collapsible	2-3 columns	Topbar + Collapsible sidebar	Centered overlay
Tablet	>=768px	Hidden / Drawer	2 columns	Hamburger menu	Centered overlay
Mobile	<768px	Hidden	1 column	Hamburger + Bottom nav	Full-screen sheet

Typography Scaling

Token	Desktop	Mobile
Display	3.5rem (56px)	2.5rem (40px)
H1	2.25rem (36px)	1.75rem (28px)
H2	1.875rem (30px)	1.5rem (24px)
Body	1rem (16px)	1rem (16px)

Spacing Adjustments

Context	Desktop	Mobile
Page padding	px-8	px-4
Section spacing	space-y-12	space-y-8
Card padding	p-6	p-4
Grid gap	gap-6	gap-4

Component Responsive Behavior

Data Tables: Horizontal scroll on mobile, or transform into stacked card layout
KPI Grid: grid-cols-1 sm:grid-cols-2 lg:grid-cols-4
Sidebar: Fixed 256px on desktop, sheet/drawer overlay on mobile
Dialogs: Centered overlay on desktop, full-screen bottom sheet on mobile
Task Cards: Full-width stack on mobile, grid on desktop

10. UI Patterns

Example layouts for the main platform views, demonstrating how components compose together.

10.1 Dashboard Pattern

Active Tasks

+12%

Credits Available

1,240

-5%

Completed This Month

+8%

Recent Activity

Maria completed "Social media campaign"2 min ago

Client approved "Landing page redesign"15 min ago

New task assigned: "Email newsletter Q2"1h ago

João uploaded deliverables for "Blog post"3h ago

10.2 Task Management (Kanban)

To Do(3)

Write blog post

ASMar 18

Design email template

JDMar 20

In Progress(2)

Redesign landing page

MLMar 15

Completed(4)

Social media campaign

MLMar 10

Brand guidelines v2

RKMar 8

10.3 Client View

Welcome back,

Acme Corp

Credit Balance

1,240

620 of 1,000 used this month

Recent Tasks

Landing page redesignAprovacao Cliente

Social media Q2Em andamento

Email newsletterConcluido

10.4 Manager View

Total Tasks

128

Overdue

Avg. Completion

3.2 days

Team Performance

Maria Lima15/18

Ana Silva10/12

Joao Dias9/14

Credit Usage by Client

Acme Corp620/1000

TechStart340/500

DesignCo180/800

10.5 Collaborator View

My Tasks

Redesign landing page

Acme Corp

High

Mar 15

Write blog post

TechStart

Medium

Mar 18

Social media assets

DesignCo

Low

Mar 22