Taskopad

Overview

Taskopad is a productivity-focused task management platform designed for teams and individuals seeking clarity and efficiency in their workflows. The design system embraces a "Functional Minimalism" aesthetic—a philosophy that prioritizes usability and information hierarchy over decorative elements, using a clean white canvas (#ffffff) as the foundation and a vibrant cyan accent (#33ccff) to guide user attention toward actionable elements. The interface evokes a sense of calm focus, where every pixel serves a purpose: the generous whitespace (24px gutters, 40px section spacing) prevents cognitive overload, while the Manrope typeface (200–800 weight range) provides warmth and approachability without sacrificing legibility. The brand personality is direct, encouraging, and pragmatic—it speaks to users as capable professionals who value their time. Example voice: "Mark this task complete and move forward—your progress matters."

Colors

The color system is built on a light-first, high-contrast foundation optimized for extended screen time and accessibility. Primary (#33ccff, a bright cyan) is the signature accent used exclusively on call-to-action buttons, active states, links, and focus indicators—it commands attention without aggression. Secondary (#6c757d, a neutral gray) provides supporting hierarchy for disabled states, secondary buttons, and metadata text. Tertiary (#ffc107, a warm amber) highlights warnings, notifications, and time-sensitive information. The error color (#dc3545, a red) is reserved for destructive actions and validation failures. The surface stack progresses from pure white (#ffffff, surface) through increasingly darker grays (surface-container-low #f1f3f5, surface-container #e9ecef, surface-contai

Typography

The type system uses Manrope, a geometric sans-serif from Google Fonts, across all weights (200–800) to create a cohesive, modern voice. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major page titles; Headline-lg (40px, 600 weight) introduces primary sections; Headline-md (28px, 600 weight) breaks content into digestible chunks; Title-lg (20px, 600 weight) labels cards and subsections; Body-lg (18px, 400 weight) and Body-md (16px, 400 weight) carry primary content with 1.5 line-height for comfortable reading; Label-md (14px, 600 weight, 0.01em tracking) and Label-sm (12px, 500 weight, 0.05em tracking) handle UI labels, badges, and metadata. The 600-weight is reserved for emphasis and interactive elements; 400-weight is used for body copy to maximize readability. W

Layout

The layout system uses a 12-column grid with a maximum container width of 1320px, scaling fluidly on smaller viewports via CSS media queries. The page rhythm is established through consistent spacing: 24px gutters separate grid columns, 40px (lg spacing) separates major sections, and 12px (sm spacing) groups related elements within cards. The white-space philosophy prioritizes breathing room—cards are padded with 24px (md spacing) on all sides, creating a 48px gap between adjacent cards. Container max-width is enforced at 1320px to prevent line-length from exceeding 80 characters on ultra-wide displays, maintaining readability. Sections use 64px (xl spacing) vertical separation to create distinct visual chapters. The grid is responsive: on tablets (768px+), columns adjust to maintain the 2

Elevation & Depth

Depth in Taskopad is achieved through a restrained shadow system that avoids visual heaviness while maintaining clear layer hierarchy. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle card borders and hover states, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and dropdowns, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and overlays. Cards at rest use a 1px solid border in outline-variant (#dee2e6) with sm shadow; on hover, the shadow upgrades to md and the background shifts to surface-container-low (#f1f3f5), creating a subtle lift effect. Mo

Shapes

The shape system follows a "Soft-Technical" philosophy: rounded corners are used strategically to soften the interface without sacrificing clarity or appearing playful. Buttons use 0.5rem (8px) border-radius (lg token), creating a subtle roundness that feels contemporary while remaining professional. Cards and containers use 0.75rem (12px, md token) to distinguish them from buttons and create a visual hierarchy. Input fields use 0.375rem (6px, DEFAULT token), the smallest radius, to maintain a structured, form-like appearance. Modals and large overlays use 1rem (16px, xl token) for a more prom

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use a cyan background (#33ccff), black text (#000000), 12px vertical and 24px horizontal padding, 48px height, and 0.5rem border-radius. On hover, the background darkens to #0099cc with a 150ms transition; on active/focus, the background becomes #006680 and a 0.25rem rgba(51, 204, 255, 0.25) ring appears. Secondary buttons (button-secondary) use a transparent background with a 1px outline-variant border, cyan text, and the same padding and height; on hover, the background fills with surface-container-high (#dee2e6). All buttons use Manrope 600 weight (label-md) for text, ensuring consistent visual weight across the interface.

Containers & Surfaces Cards (card) are the primary content co

Do's and Don'ts

**Do**

• Do use cyan (#33ccff) exclusively for primary CTAs, active states, and focus indicators—never use it for backgrounds or decorative elements.
• Do maintain 24px gutters and 40px section spacing to prevent visual clutter and support cognitive load management.
• Do apply Manrope 600 weight to all interactive labels and headlines; use 400 weight for body text to maximize readability.
• Do use the sm shadow (0 1px 2px rgba(0, 0, 0, 0.06)) for cards at rest and upgrade to md shadow on hover to signal interactivity.
• Do apply a 0.25rem rgba(51, 204, 255, 0.25) focus ring around all interactive elements and set outline: none to prevent browser defaults.
• Do use 150ms ease-in-out transitions for all state changes (hover, focus, active) to feel responsive without appearing jarring.
• Do maintain a 15:1 contrast ratio between text and background colors to exceed WCAG AAA accessibility standards.
• Do use the full 12-column grid with 24px gutters; never hardcode pixel widths for layout—use grid-column and flex utilities instead.

**Don't**

• Don't use cyan (#33ccff) as a background color or for body text—it's reserved exclusively for interactive elements and accents.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) to avoid creating a heavy, dated appearance.
• Don't mix Manrope weights within a single line of text; use consistent weight for each typographic role (e.g., 600 for labels, 400 for body).
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); custom radii break the system's coherence.
• Don't apply focus rings with outline: auto or browser defaults—always use the 0.25rem rgba(51, 204, 255, 0.25) ring and set outline: none.
• Don't use transitions longer than 200ms for state changes; faster interactions feel snappier, while slower ones feel sluggish.
• Don't place text smaller than 12px on busy backgrounds without applying text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) for legibility.
• Don't exceed 1320px container width on ultra-wide displays; line-length should stay under 80 characters for comfortable reading.