Taskk Design System

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

Production tokensAttio system study · MobbinLast reviewed 20 Aug 2026

Brand identity

The supplied vector artwork is canonical. The colour artwork belongs on light surfaces; the white artwork belongs on dark surfaces.

Primary wordmark

taskk-logo.svg

Inverse wordmark

taskk-logo-white.svg

App icon

taskk-app-icon.svg

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. Pure white, fine grey rules and near-black actions do the structural work; blue and warm signals communicate focus or status.

light theme

Paper workspace

Default

Canvas--color-paperoklch(100% 0 0)

Quiet canvas--color-paper-2oklch(98.4% 0.002 255)

Surface--color-surfaceoklch(100% 0 0)

Primary ink--color-inkoklch(14.5% 0.004 260)

Secondary ink--color-ink-2oklch(38% 0.008 254)

Rule--color-ruleoklch(90.8% 0.004 254)

Action--color-accentoklch(18% 0.006 260)

Focus--color-focusoklch(63.35% 0.122 253.18)

dark theme

Graphite workspace

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

Inter carries every live interface role through one semantic scale. Geist Mono is reserved for scores, dates and inspectable data; tabular figures prevent metrics from shifting.

Display · boldKnow what to do next.--type-display-size

Page title · semiboldToday's plan--type-page-title-size

Section · semiboldPlanning details--type-section-heading-size

Body · regular

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

--type-body-size

Label · semiboldEstimated duration--type-label-size

Caption · regularShown only in your private workspace.--type-caption-size

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

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

Buttons name one action on one line. Prefer “Save task” to “Submit”, and keep supporting copy outside the control.

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

Spacing and layout

A four-point scale, an 82rem 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

82rem

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 and labels stay on one line
768px	Tablet grid; compact navigation	Button, tab and menu labels do not wrap or clip
900px	Desktop rail begins	Reading order matches visual order
1440px	82rem 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.375rem

Card--radius-card · 0.5rem

Panel--radius-panel · 0.625rem

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 neutral rules. Cards, controls, callouts, banners and email sections never use accent, gradient, glow or coloured single-edge borders for emphasis. Focus, validation, selection and compact status indicators remain the functional exceptions.

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. Every conventional control keeps one concise label on one line; supporting copy sits outside it. 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. Full task records extend this contract with labelled search and select filters, a compact two-up planning cell, and edit or delete actions on the lower row.

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

Goal contract

/app/goals

BodyRecurring cadence

Build consistent physical strength

Success rule: 3× per week
Evidence: A completed workout is recorded in the activity log.
Next action: Book the first three sessions.

The pattern pairs a readable outcome with a deterministic rule and observable evidence. The next action is reviewable text, never an automatic instruction.

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.

Completed: 8
Active days: 7
Daily average: 0.6

7 / 14 days had completion activityPeak day: 2 tasks

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 and labels stay on one line

768px

Tablet grid; compact navigation

Button, tab and menu labels do not wrap or clip

900px

Desktop rail begins

Reading order matches visual order

1440px

82rem 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.