Design System & Principles

Tasquera is designed around the philosophy of “Warm Editorial Dark” and “Daylight Light”: capturing the focused, tranquil feeling of writing in a quality paper planner under a warm desk lamp.

The Three-Hue Palette

Backgrounds come from Paper, text from Ink, and interactive state from Pine. Extend via tints and shades—never decorative rainbow gradients.

Token	Dark Mode	Light Mode (Daylight)	Role
`paper-50`	`#131211`	`#fbf9f5`	Main page background (warm near-black / warm cream)
`paper-100`	`#1a1816`	`#f3eee6`	Surface shift for inputs, navigation dock, hover rows
`paper-200`	`#25221e`	`#e7dfd2`	Buttons, keyboard tags (`<kbd>`), sliders, and track fills
`paper-300`	`#36312a`	`#d6ccbc`	Deepest surface and subtle borders
`ink-900`	`#f3eee7`	`#1a1816`	Primary high-contrast text (warm ivory)
`ink-700`	`#cfc6b8`	`#4b443b`	Secondary text and labels
`ink-500`	`#93897b`	`#74695c`	Metadata, timestamps, and completed tasks
`ink-400`	`#685f52`	`#93897b`	Placeholders and faint affordances
`pine-700`	`#1b5239`	`#143d2b`	Pressed solid button states
`pine-600`	`#2b8256`	`#2b8256`	Primary interactive accent, checked states, logo mark
`pine-500`	`#38a16c`	`#26774e`	Progress bars and active highlights
`pine-100`	`#183628`	`#e0ece5`	Subtle tint on hover or row selection
`pine-50`	`#132b20`	`#f2f7f4`	Softest surface tint

Semantic Colors

Fourth-plus hues are strictly reserved for meaning (urgency, status, errors):

Token	Hex	Meaning & Application
`terra-600`	`#d95a3f`	Urgent priority, destructive actions, overdue indicators
`terra-50`	`#331713`	Destructive hover and error banner backgrounds
`amber-600`	`#d99b26`	High priority, in-progress board cards, warnings
`slateblue-600`	`#4e93b8`	Low priority, informative badges

Typography

Display & Voice — Instrument Serif (italic): Used for wordmark accents, calendar month headers, and empty state moments. Serif italics provide a handwritten planner warmth that standard sans-serif fonts cannot replicate.
Body & UI — Figtree Variable: Clean, readable geometric sans-serif for task titles, notes, keyboard tags, and button labels.
Scale Hierarchy: List items are set at a legible 17px, secondary metadata at 15px/13px, and main reading columns are capped at 600px (~60–70 characters per line) for optimal reading comfort.

Layout & Spatial System

8pt Spatial Grid: All dimensions, gaps, and paddings are multiples of 4 (with 8 as the base unit).
Borderless Cards: Surfaces separate via whitespace and a subtle 3–5% lightness shift (paper-50 vs paper-100), avoiding heavy clunky border outlines.
Quiet Navigation: Inactive navigation items stay muted (ink-500); active views use a solid paper-50 chip with a bold pine-600 icon.

Purposeful Motion

Micro-Interactions: Snappy 150–200ms animations using custom ease-out curves (cubic-bezier(0.16, 1, 0.3, 1)).
Self-Drawing Checkmarks: When checking off a task, the SVG checkmark path draws itself smoothly using stroke-dashoffset.
Reduced Motion: Full support for prefers-reduced-motion media queries, immediately collapsing all transitions for users who prefer static UI.