Cooldock

Overview

Cooldock is a macOS utility that embodies 'Refined Minimalism'—a design philosophy that strips away visual noise while maintaining functional richness. The brand serves power users and Mac enthusiasts who value productivity and aesthetic coherence, delivering a second Dock experience that feels native to the operating system. The UI evokes a sense of calm precision: every widget, button, and interaction is purposeful, with no decorative flourishes. The emotional response is one of quiet confidence—users trust that Cooldock will integrate seamlessly into their workflow without demanding attention.

The brand voice is direct, technical yet approachable, and never marketing-heavy. Cooldock speaks in the language of features and outcomes, not aspirations. Vocabulary emphasizes utility ('live widgets', 'customizable', 'one-time purchase') and clarity ('beautiful', 'useful', 'smart'). The tone avoids hyperbole; instead, it lets the product's simplicity speak. Example sentence in brand voice: 'Your music, todos, and calendar live in one beautiful Dock beside your original—no clutter, no compromise.'

Colors

The Cooldock color system operates on a principle of 'Monochromatic Clarity with Accent Precision.' The primary surface palette (#edeceb, #f7f7f7, #ffffff) creates a neutral, distraction-free canvas that mirrors macOS's design language. Primary accent (#0099ff) is reserved exclusively for interactive elements—buttons, links, focus states—ensuring that every use of the accent color signals actionability. Secondary (#2b2b2b) provides dark contrast for text and UI elements, while tertiary (#5f61ed) is deployed sparingly for secondary actions or status indicators. The outline tokens (#8a8a8a, #c4c4c4) define subtle borders and dividers that organize content without visual weight. Usage rules: apply primary (#0099ff) only to CTAs and interactive states; use secondary (#2b2b2b) for body text and

Typography

The typography system pairs Inter Display (headings, 600–700 weight) with Inter (body, 400–500 weight), creating a clear visual hierarchy that guides users through information architecture. Display and headline-lg sizes (64px, 48px) are reserved for hero statements and major section titles; headline-md (32px) anchors subsections; title-lg (22px) labels feature blocks. Body-lg (18px) and body-md (16px) carry descriptive copy and widget content, while label-md (14px) and label-sm (12px) annotate UI controls and metadata. The system uses negative letter-spacing (-0.03em to -0.01em) on large display sizes to tighten visual rhythm, while body text maintains +0.01em spacing for legibility. Line heights are generous (1.4–1.5 ratio) to ensure comfortable reading on screens. Apply text-shadow: 0 1p

Layout

Cooldock uses a 12-column fluid grid with a 1200px container max-width, allowing content to breathe on desktop while remaining responsive on smaller viewports. The spacing scale (8px unit, 12px sm, 24px md, 40px lg, 64px xl) is applied consistently: section separation uses lg spacing (40px), component padding uses md spacing (24px), and internal element spacing uses sm spacing (12px). The gutter width is fixed at 24px, creating consistent margins around the viewport edge. White-space philosophy emphasizes 'breathing room'—negative space is treated as a design element, not wasted real estate. Hero sections use xl spacing (64px) above and below to create visual pause; feature cards are separated by lg spacing (40px) to establish distinct content blocks. The container-max-width of 1200px ensu

Elevation & Depth

Cooldock employs a subtle shadow system that conveys depth without introducing visual heaviness. The elevation scale uses three levels: sm (0 2px 4px rgba(0, 0, 0, 0.06)) for resting card states and subtle UI elements, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hover and interactive states, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for modals and floating panels. Cards and buttons at rest use sm elevation; on hover, they transition to md elevation over 200ms, signaling interactivity. The header component uses a frosted-glass effect (backdrop-filter: blur(12px), background: rgba(255, 255, 255, 0.8)

Shapes

The shape system follows 'Functional Geometry'—each radius value serves a specific purpose in the visual hierarchy. Buttons use full radius (9999px) to signal primary actions and create a distinctive, friendly affordance; secondary buttons and inputs use lg radius (1rem / 16px) for a softer, more approachable feel than sharp corners. Cards and containers use xl radius (1.5rem / 24px) to create breathing room and visual softness while maintaining a modern aesthetic. Smaller UI elements—badges, tags, secondary buttons—use md radius (0.75rem / 12px) to maintain visual consistency without overwhel

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses primary color (#0099ff) with full radius (9999px), 48px height, and 12px 32px padding, creating a distinctive, clickable target. On hover, the background transitions to #0080cc (a 20% darker shade) over 200ms with ease-out timing, providing immediate feedback. The button-secondary component uses secondary color (#2b2b2b), lg radius (1rem), 40px height, and 8px 16px padding for tertiary actions. Button-ghost uses transparent background with a 1px outline-variant border, allowing for subtle secondary actions without visual weight. All buttons use label-md typography (14px, 600 weight, 0.02em letter-spacing) for consistent labeling.

Containers & Surfaces Cards are the primary container co

Do's and Don'ts

**Do**

• Do use primary (#0099ff) exclusively for interactive elements—buttons, links, focus states—to maintain accent clarity and user expectation.
• Do apply md spacing (24px) between major content sections and lg spacing (40px) between distinct feature blocks to create visual rhythm and breathing room.
• Do use Inter Display (600–700 weight) for headlines and Inter (400–500 weight) for body text to establish clear typographic hierarchy without introducing new typefaces.
• Do transition hover states over 200ms with ease-out timing to provide responsive feedback without appearing jarring.
• Do maintain the 1200px container max-width on desktop to ensure content remains scannable and not stretched across ultra-wide displays.
• Do use full radius (9999px) exclusively on primary buttons to create a distinctive, instantly recognizable CTA affordance.

**Don't**

• Don't use secondary (#2b2b2b) or tertiary (#5f61ed) as primary accent colors—reserve primary (#0099ff) for all interactive elements to maintain visual consistency.
• Don't apply shadows heavier than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12))—the design relies on subtle depth, not dramatic drop shadows.
• Don't introduce new typefaces or font families beyond Inter Display and Inter; the system's clarity depends on typographic restraint.
• Don't use outline-variant (#c4c4c4) borders on interactive elements; use primary (#0099ff) or outline (#8a8a8a) to signal state changes.
• Don't exceed xl spacing (64px) for section separation on desktop; the design prioritizes compact, scannable layouts over expansive white space.
• Don't apply radius smaller than md (0.75rem) to primary buttons or major interactive elements—maintain the lg/xl radius hierarchy for visual consistency.