Timebox

Overview

Timebox is a spatial task management platform that reimagines productivity through a "Visual-Spatial Minimalism" aesthetic. The brand merges the precision of a modern task list with the intuitive depth of 3D visualization, creating an interface that feels both technically sophisticated and emotionally approachable. The UI celebrates clarity through high contrast (pure black #000000 backgrounds with vibrant accent purples #8079d5 and soft pastels #daabe3, #e3abc2), allowing users to focus on what matters: their tasks. The design language is "Functional Elegance"—every pixel serves a purpose, and every interaction feels deliberate.

The voice is direct, encouraging, and human-centered. Timebox speaks to creatives and makers who think spatially and value speed. The tone avoids corporate jargon; instead, it uses conversational language with subtle wit. Example: "Your tasks don't live in a list—they live in a space." The brand personality balances technical confidence with approachability, treating complex 3D interactions as natural extensions of how people already think.

Colors

The Timebox color system is built on a dark-first philosophy: a pure black canvas (#000000) provides the stage, while a carefully curated accent palette adds energy and meaning. Primary (#8079d5, a muted periwinkle-violet) is the signature brand accent—used on all primary CTAs ("Sign up and try for free"), focus states, and interactive highlights. This purple is neither neon nor washed-out; it sits at a precise saturation (RGB 128, 121, 213) that reads as premium and calm simultaneously. Secondary colors—a soft mauve (#daabe3) and dusty rose (#e3abc2)—are used for task tags, status indicators, and supporting UI elements, creating a cohesive pastel accent family that feels contemporary without being trendy. Tertiary (#b0abe3) and neutral grays (#dddddd, #666666, #333333) round out the palet

Typography

Timebox employs a two-typeface system: Concert One (a geometric, playful display font from Google Fonts) anchors headlines and the brand identity, while Roboto (a neutral, highly legible sans-serif) handles body text and UI labels. This pairing communicates "creative yet professional." Display and headline levels (64px down to 36px) use Concert One with tight letter-spacing (-0.02em to -0.01em) to create visual impact and brand recognition; body and label levels use Roboto at 18px, 16px, 14px, and 12px with standard letter-spacing (0.01em to 0.02em) for optimal readability. Font weights are deliberately limited: Concert One uses only 700 (bold), while Roboto uses 400 (regular), 500 (medium), and 600 (semibold) to avoid visual noise. On small labels over busy task backgrounds, apply a subtl

Layout

Timebox uses a fluid 12-column grid with a maximum container width of 1200px, allowing the interface to scale gracefully from mobile to desktop. The hero section ("Your Tasks. Visualized.") spans full width with 40px (lg spacing) top and bottom margins, creating breathing room around the 3D visualization canvas. Section separation uses lg spacing (40px) consistently, while internal component spacing uses md (24px) for cards and sm (12px) for list items. The gutter (24px) is applied to all horizontal padding within containers, ensuring consistent left-right margins. The 3D workspace canvas itself is responsive, scaling its width and height proportionally while maintaining aspect ratio. White space is treated as a design material, not wasted space—the dark background makes generous margins f

Elevation & Depth

Depth in Timebox is achieved through a restrained shadow system and strategic use of the surface-container stack. The design avoids heavy shadows; instead, it uses soft, diffuse shadows to separate layers subtly. Standard cards and interactive elements use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift from the background. Elevated states (hover, focus, modals) escalate to 0 8px 24px rgba(0, 0, 0, 0.2), a more pronounced shadow that signals importance or interaction. The surface stack itself provides the primary depth cue: surface-container-low (#0f0f0f) is used for input fi

Shapes

Timebox employs "Soft-Technical" border-radius philosophy: sharp enough to feel modern and precise, soft enough to feel approachable. Buttons use 10px (lg radius) for a slightly rounded, friendly appearance that avoids the harshness of sharp corners or the softness of full-rounded pills. Input fields and smaller interactive elements use 6px (DEFAULT radius) for a tighter, more technical feel. Cards and modals use 20px (xl radius) to create a sense of containment and importance. The 3D canvas itself has no border-radius (0px), emphasizing its role as a distinct, immersive space. Task items use

Components

Action Elements Buttons are the primary interaction mechanism. The primary button (Sign up and try for free) uses background-color: rgb(128, 121, 214), padding: 12px 24px, height: 48px, border-radius: 10px, and font-weight: 600. On hover, the background shifts to the primary-fixed-dim (#8079d5 → slightly darker), with a 200ms cubic-bezier(0.2, 0, 0.38, 0.9) transition for smooth feedback. Secondary buttons (Open Demo Playground, Contact Us) use a transparent background with a 1px solid border (color: #666666), padding: 10px 20px, height: 40px, and border-radius: 6px. On hover, the background becomes surface-container-high (#2a2a2a) and the text color shifts to primary (#8079d5), creating a clear interactive affordance. All buttons use Roboto at 14px font-size with 600 font-weight for l

Do's and Don'ts

**Do**

• Do use primary (#8079d5) exclusively for CTAs, focus states, and key interactive elements—never dilute it with secondary uses.
• Do maintain high contrast between text and background (white on black, or dark text on light surfaces) for accessibility and readability.
• Do apply transitions (200ms cubic-bezier timing) to all interactive state changes (hover, focus, active) to signal interactivity without jarring jumps.
• Do use the surface-container stack (low, mid, high) to create depth through background color shifts, not color overlays or filters.
• Do keep border-radius consistent within component families: buttons at 10px, inputs at 6px, cards at 20px—no exceptions.
• Do use Roboto for all body and label text; reserve Concert One for headlines and brand moments only.

**Don't**

• Don't use the secondary palette (#daabe3, #e3abc2) as primary CTAs—these are accent colors for tags and supporting UI only.
• Don't apply shadows heavier than 0 8px 24px rgba(0, 0, 0, 0.2)—Timebox is a flat, modern interface, not a skeuomorphic one.
• Don't mix border-radius values within the same component type (e.g., don't use 8px on some buttons and 12px on others).
• Don't use system-ui or generic sans-serif fallbacks—always specify Roboto or Concert One with explicit font-family declarations.
• Don't add color overlays or tints to the black background; instead, use the surface-container stack to create visual hierarchy.
• Don't animate transitions faster than 150ms or slower than 300ms—the interface should feel responsive, not sluggish or frenetic.