Things

Overview

Things is a personal task management application that embodies the aesthetic of "Purposeful Minimalism"—a design philosophy that strips away unnecessary complexity while maintaining sophisticated functionality. The brand serves professionals, creatives, and goal-oriented individuals who demand both clarity and elegance in their productivity tools. The UI evokes a sense of calm focus: clean typography, generous whitespace, and a restrained color palette anchored by a vibrant cobalt blue (#2576eb) that signals actionability without visual noise. The emotional response is one of confidence and control—users feel empowered to organize their thoughts and execute their plans.

Things speaks in a voice that is direct, encouraging, and unpretentious. The vocabulary avoids jargon and marketing hyperbole; instead, it uses concrete, action-oriented language. The brand personality is professional yet approachable, never condescending. Example sentence in the brand voice: "Get everything out of your head and into Things—then focus on what matters today."

Colors

The color system is anchored by a primary cobalt blue (#2576eb), the signature accent used on all interactive elements—buttons, links, focus states, and the app icon. This blue is neither too dark nor too bright; it reads as trustworthy and energetic simultaneously. The surface palette consists of a light, neutral foundation (#f2f5f7 for body background, #ffffff for cards and inputs) with carefully calibrated container variants (#eff6ff, #eceef0, #e9ecef) that create subtle visual hierarchy without relying on heavy shadows. Secondary and tertiary colors are drawn from the same blue family (#5c9cf5, #26344a) to maintain chromatic unity; there is no competing accent color. The on-surface text is a near-black (#303336) for maximum readability at 18px body size, with a secondary gray (#6c757d)

Typography

The type system uses a single font family—ui-sans-serif with fallbacks to -apple-system, BlinkMacSystemFont, and Roboto—ensuring consistent rendering across Apple and Android platforms. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines and major section titles, commanding attention through size and negative letter-spacing that tightens the letterforms. Headline-lg (40px, 700 weight) and headline-md (28px, 700 weight) create a two-tier heading hierarchy for page sections and subsections. Body-lg (18px, 400 weight, 28px line-height) is the default reading size, chosen for comfortable scanning on screens; body-md (16px, 400 weight) is used in compact contexts like form labels and secondary copy. Label-md (14px, 600 weight) and label-sm (12px, 500 weight) are re

Layout

The layout uses a fluid 12-column grid with a maximum container width of 1024px, ensuring content remains readable on desktop while adapting gracefully to tablet and mobile viewports. The page rhythm is built on a spacing scale: xs (4px) for micro-adjustments, sm (12px) for tight grouping, md (24px) for standard section padding and component spacing, lg (40px) for major section separation, and xl (64px) for hero and full-width section breaks. The gutter width is 24px, applied consistently to container padding and grid gaps. Whitespace is treated as a first-class design element; sections are separated by lg spacing (40px) to create visual breathing room and reduce cognitive load. The container max-width of 1024px prevents lines of body text from exceeding 70–80 characters, maintaining optim

Elevation & Depth

Depth in Things is conveyed through subtle shadows and container backgrounds rather than dramatic layering. The elevation system defines three levels: Level 1 (Base) uses no shadow, relying on the light background (#f2f5f7) and surface-container variants to establish baseline surfaces. Level 2 (Standard Cards and Inputs) applies a soft shadow (0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.1)) combined with a 1px border at rgba(0, 20, 49, 0.08) inset, creating a subtle lift without visual heaviness. Level 3 (Modals, Popovers, Dropdowns) uses a stronger shadow (0 8px 32px rgba(0, 0, 0

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are present but restrained, avoiding the extreme roundness of playful designs while rejecting sharp corners that feel cold or austere. Buttons and primary interactive elements use lg rounding (1rem, or 16px), creating a friendly, approachable appearance that still reads as professional. Cards and containers use lg rounding (1rem) to echo button styling and create visual consistency. Input fields use a tighter rounding (6.4px, derived from the computed style) to signal their functional, form-like nature. Badges and pills use full rounding

Components

Action Elements Buttons are the primary call-to-action mechanism. The button-primary component uses the primary blue (#2576eb) background with white text, 48px height, 12px vertical and 24px horizontal padding, and lg rounding (1rem). The typography is label-md (14px, 600 weight). On hover, the background darkens to #1e5db8 and the shadow increases to lg elevation (0 4px 12px rgba(37, 118, 235, 0.2)), creating a tactile sense of lift. On active/pressed, the background drops to #114691 and the shadow returns to md elevation. Transitions between states use a 200ms ease-out timing function. The button-secondary variant uses a transparent background with a 1px primary-colored border and primary text; on hover, it fills with the primary-container color (#5c9cf5) and shifts text to on-primar

Do's and Don'ts

**Do**

• Do use the primary blue (#2576eb) exclusively for interactive elements—buttons, links, focus states, and the app icon—to create a consistent, recognizable brand presence.
• Do maintain generous whitespace (lg spacing: 40px) between major sections to reduce cognitive load and guide the user's eye through the page hierarchy.
• Do apply the label-md typography (14px, 600 weight) to all button text and UI labels to ensure consistent visual weight and readability.
• Do use the soft md shadow (0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 16px rgba(0, 0, 0, 0.1)) on cards and inputs to create subtle depth without visual heaviness.
• Do pair headline-lg (40px, 700 weight) with body-lg (18px, 400 weight) for maximum contrast and readability in hero sections.

**Don't**

• Don't introduce competing accent colors; the blue family (#2576eb, #5c9cf5, #26344a) is the complete palette—avoid reds, greens, or purples for primary actions.
• Don't use sharp corners (0px border-radius) on any interactive element; maintain lg rounding (1rem) on buttons and cards to preserve the Soft-Technical aesthetic.
• Don't apply heavy shadows (blur > 32px or spread > 0px) to standard components; reserve lg elevation (0 8px 32px rgba(0, 0, 0, 0.1)) for modals and popovers only.
• Don't exceed the container max-width of 1024px on desktop; this ensures body text remains in the 70–80 character range for optimal readability.
• Don't mix font families; ui-sans-serif with fallbacks to -apple-system, BlinkMacSystemFont, and Roboto is the only approved typeface stack.