taskk Design System

The canonical visual, interaction and implementation reference for a calm, compact and deliberately premium workspace.

Production tokensPaper GraphiteLast reviewed 25 Jul 2026

Brand identity

The wordmark is the default signature. The mark is reserved for compact, square and browser contexts; neither is redrawn or recoloured.

Primary wordmark

components/wordmark.tsx

Inverse wordmark

inverse

App icon

taskk-icon.png

Favicon

favicon.svg

Use

Wordmark on navigation, auth and public surfaces.
Mark alone below 96px of available width.
Original artwork on light and approved inverse artwork on dark.

Avoid

Stretching, rotating, outlining or adding a shadow.
Placing the wordmark inside a pill or decorative container.
Using the mark as an unlabeled product action.

Colour

Opaque OKLCH role tokens keep hierarchy stable across themes. Warm paper and graphite do the structural work; colour communicates focus or status.

light theme

Paper workspace

Default

Canvas--color-paperoklch(97.6% 0.004 85)

Quiet canvas--color-paper-2oklch(95.8% 0.005 85)

Surface--color-surfaceoklch(99.2% 0.002 85)

Primary ink--color-inkoklch(19% 0.008 270)

Secondary ink--color-ink-2oklch(43% 0.008 270)

Rule--color-ruleoklch(87.5% 0.006 270)

Action--color-accentoklch(27% 0.012 270)

Focus--color-focusoklch(52% 0.045 255)

dark theme

Graphite workspace

System or user choice

Canvas--color-paperoklch(11.5% 0.012 270)

Quiet canvas--color-paper-2oklch(16% 0.014 270)

Surface--color-surfaceoklch(18.5% 0.015 270)

Primary ink--color-inkoklch(96% 0.004 85)

Secondary ink--color-ink-2oklch(76% 0.007 270)

Rule--color-ruleoklch(27.5% 0.012 270)

Action--color-accentoklch(68% 0.19 264)

Focus--color-focusoklch(72% 0.16 264)

SuccessSaved, complete, ready--color-success-strong

WarningDeadline, attention, risk--color-warning-strong

ErrorFailed, invalid, destructive--color-danger-strong

InfoContext, neutral guidance--color-work-strong

Semantic colour is always paired with an icon or text. Use the matching -soft surface and -border token; never tint a whole page.

Typography

Manrope carries product language; Geist Mono is reserved for scores, dates and inspectable data. Tabular figures prevent metrics from shifting.

Display · 650Know what to do next.--text-display

Page title · 650Today's plan--text-2xl

Section · 620Planning details--text-xl

Body · 480

Shape the commitment, timing and context before deciding what comes next.

--text-md

Label · 650Estimated duration--text-sm

Caption · 480Shown only in your private workspace.--text-xs

Numeric · mono084 · 25 Jul · 14dfont-variant-numeric: tabular-nums

Labels name the field. Placeholder text is an example, not the label.

Buttons name the action. Prefer “Save task” to “Submit”.

Errors explain recovery. Say what failed, what was saved, and what to do next.

Spacing and layout

A four-point scale, an 80rem work surface and deliberate separators create density without crowding. Mobile is a first-class layout, not a compressed desktop.

3xs0.25rem--space-3xs

2xs0.5rem--space-2xs

xs0.75rem--space-xs

sm1rem--space-sm

md1.5rem--space-md

lg2rem--space-lg

xl3rem--space-xl

2xl4.5rem--space-2xl

3xl7rem--space-3xl

Content

48rem

Long-form copy, legal and focused reading.

Workspace

80rem

Task planning, settings and analytics.

Control

44px

Minimum touch height for buttons and fields.

123456789101112

Responsive checks and expected behaviour
Viewport	Layout rule	QA check
320–414px	One column, mobile rail, reduced task metadata	No horizontal scroll; actions stay 44px
768px	Tablet grid; compact navigation	Labels do not wrap or clip
900px	Desktop rail begins	Reading order matches visual order
1440px	80rem maximum work surface	Whitespace grows; content does not over-stretch

Borders, radius and elevation

One-pixel rules organise content. Radius follows function, and shadow is reserved for content that genuinely floats above the workspace.

Control--radius-control · 0.5rem

Card--radius-card · 0.65rem

Panel--radius-panel · 0.85rem

Flat1px rule, no shadow

Raised--shadow-card

Floating--shadow-preview

Do not nest bordered cards. Group related rows inside one surface and separate them with rules.

Components

These specimens render production primitives and expose their labels, states and implementation hooks for visual QA.

Buttons

components/ui/button.tsx

Primary actions are specific and scarce. Loading buttons keep their label, remain disabled and expose the ongoing action in text.

Forms

components/ui

Text input

Persistent label, 44px target and a shared text inset.

Task titleText starts at --control-padding-inline.

Compound input

Addons describe units without becoming editable text.

Estimated cost

AUD

Use a compound field only when the parts form one value.

Dropdown field

The native control owns keyboard, screen-reader and mobile-picker behaviour.

ShowFilters the current view without changing task data.

Validation state

The error stays beside its field and does not change control geometry.

WorkspaceChoose a workspace to continue.

Textarea

Longer context starts with a label and a useful character or privacy note.

Details and notesUp to 4,000 characters. Stored in the private task record.

Badges and status

text + icon + colour

BusinessPersonalFinanceReadyNeeds review84

Table

components/task-plan-table.tsx

Today’s recommended task plan

01	Review the project briefDo first · Impact 5 · Fixed	5	45 min	26 July 2026Fixed	86
02	Prepare the next-step noteSchedule · Impact 4	3	30 min	29 July 2026	66
03	Book the annual appointmentSchedule · Impact 3	2	10 min	No date	43

Headers remain keyboard-sortable, the rank stays stable, and lower-priority columns progressively hide instead of forcing horizontal scroll.

Navigation, tabs, icons and modal

interactive QA

Navigation

Tabs

Selection stays visible, Arrow keys move focus, and each trigger names the panel it controls.

Task saved

The selected state and its result remain clear without colour alone.

Overlay

Modal

A native modal dialog owns focus, closes with Escape, and returns focus to the trigger.

Icon labels

Actions name themselves

Prefer icon plus text. Icon-only controls need a persistent accessible name and a familiar symbol.

aria-label="Open settings"

Motion

Quiet state change

Use opacity and transform with the shared easing. Reduced motion keeps the content and removes travel.

Page heading

Decision surface

Next action

Open full product navigation preview

Charts and data visualisation

Charts answer a decision in under three seconds. Every visual keeps a plain-language heading, direct values and an accessible data table or progress label.

Momentum

Completion activity

8 completed in the last 14 days, 8 more than the previous 14 days.

Window

7 days14 days30 days

4Current streak

4Best streak

Completion timing uses the latest update on tasks currently marked done.

Workload

Active work by area

Use a doughnut only for a small proportion set.

24active

Comparison

Top subcategories

Horizontal bars keep labels and values direct.

24active

AreaChange over time; 7, 14 or 30-day windows.

BarRanked comparison with direct values.

DoughnutThree to five parts of a whole.

ProgressOne bounded completion measure.

Loading, empty and error states

A state is part of the component contract. Loading preserves shape, empty states explain the next useful action, and errors say what happened without exposing provider detail.

Keep the page shape

Announce the operation once. Reduced motion makes the indicator static.

Empty

Offer a next step

Nothing here right now

Capture the next commitment, or check another view.

Error

Protect trust

We couldn’t save that change

Nothing was changed. Check your connection and try again.

Support reference: DS-1042

Request IDs are safe to share. Provider payloads, user IDs and task content are not.

Ready

Loading

Calculating planning health…

Empty

No activity yet

Add detail to active tasks to begin measuring planning health.

Error

Planning health unavailable

We couldn’t display planning health. Your task data is still safe.

Motion

Motion confirms state and preserves orientation. It never delays access to content or turns routine work into theatre.

120msMicro feedback--dur-micro

150msHover response--dur-hover

180–240msLocal state change--dur-short / medium

560msOne-time reveal--dur-reveal

680msProduct preview--dur-mockup

Animate only opacity and transform.
Use cubic-bezier(0.22, 1, 0.36, 1).
Stagger only a few meaningful surfaces; keep dense rows still.
Remove travel, scale, stagger and looping under reduced motion.
Keep loading structure visible when animation stops.

Accessibility contract

Accessibility is implemented with the component, tested at its boundaries and visible in this reference—not deferred to a final audit.

Contrast

Body copy reaches 4.5:1; large text and essential graphics reach 3:1 in both themes.

Labels

Every field and icon control has a persistent, programmatic name. Placeholder text never stands alone.

Focus

Keyboard focus is never removed. The shared three-pixel ring uses --color-focus.

Keyboard

Native controls come first. Custom widgets document Arrow, Escape, Enter and Space behaviour.

State

Colour is supplemented by text, icon, aria-invalid, aria-live or native state.

Reduced motion

Content remains complete with prefers-reduced-motion: reduce; motion falls back to ≤100ms opacity.

Press Tab to inspect the production focus ring.

Implementation guide

Design decisions become durable only when the token, component, documentation and QA reference change together.

Canonical sources
Concern	Source	Rule
Visual tokens	`tokens.css`	Production values; light and dark remap by role.
Design rationale	`design.md`	Update with any material system change.
Primitives	`components/ui/*`	Expose semantic state through props and data attributes.
Application patterns	`components/*`	Compose primitives; avoid route-specific copies.
Motion	`lib/motion.ts`	Reuse shared variants and reduced-motion behaviour.
Visual QA	`app/design`	Add the real component and all applicable states.

01
Start with the semantic element.
Prefer button, link, input, select, table and dialog before adding behaviour.
02
Compose production tokens.
No route-local colour, radius or spacing values when a role token exists.
03
Expose state.
Use native attributes plus stable data-slot and data-state hooks.
04
Document the boundaries.
Include default, hover, focus, disabled, loading, empty, error and success where relevant.
05
Verify both themes and widths.
Check 320, 375, 414, 768, 900 and 1440px, keyboard flow and reduced motion.

Definition of done

A shared component is not complete until its public API, visible states, keyboard behaviour, responsive rules and failure recovery are represented here.

Responsive checks and expected behaviour

Viewport

Layout rule

QA check

320–414px

One column, mobile rail, reduced task metadata

No horizontal scroll; actions stay 44px

768px

Tablet grid; compact navigation

Labels do not wrap or clip

900px

Desktop rail begins

Reading order matches visual order

1440px

80rem maximum work surface

Whitespace grows; content does not over-stretch

Review the project briefDo first · Impact 5 · Fixed

45 min

26 July 2026Fixed

Prepare the next-step noteSchedule · Impact 4

30 min

29 July 2026

Book the annual appointmentSchedule · Impact 3

10 min

No date

Canonical sources

Concern

Source

Rule

Visual tokens

tokens.css

Production values; light and dark remap by role.

Design rationale

design.md

Update with any material system change.

Primitives

components/ui/*

Expose semantic state through props and data attributes.

Application patterns

components/*

Compose primitives; avoid route-specific copies.

Motion

lib/motion.ts

Reuse shared variants and reduced-motion behaviour.

Visual QA

app/design

Add the real component and all applicable states.