Cosmos

Overview

Cosmos is a visual inspiration platform designed for creative professionals—designers, photographers, architects, and artists—who seek a refined, distraction-free space to discover, curate, and organize visual ideas. The aesthetic centers on **Refined Minimalism with Warmth**: a light, neutral canvas (surface #f9f7f3, a soft off-white with warm undertones) paired with a distinctive burnt-orange primary accent (#d1543e) that evokes both energy and sophistication. The interface philosophy is "clarity through restraint"—every element serves discovery, with generous whitespace, subtle borders at rgba(204, 199, 193, 1), and a typography system that balances elegance (cosmosOracle at 300–400 weight) with precision (basisMono for technical labels). The emotional response is one of calm focus: users feel they are entering a gallery, not a feed.

The brand voice is curatorial and conversational—never corporate, never breathless. Cosmos speaks as a knowledgeable friend who understands that inspiration is personal. Vocabulary favors precision over hype: "Search the way you think," "Know what you're looking at," "Every search opens a new world." Tone is confident but unhurried; sentences are short and direct. Example: "Organize your ideas into collections. Tag, filter, and share—or keep them private." The brand personality values intention, quality, and the craft of visual thinking.

Colors

The color system is anchored in a warm, light neutral palette that prioritizes readability and visual calm. **Primary (#d1543e)** is a burnt-orange accent used exclusively on call-to-action buttons, active navigation states, and key interactive elements—it commands attention without aggression. **On-Primary (#ffffff)** ensures maximum contrast (WCAG AAA) on all primary-colored surfaces. **Surface (#f9f7f3)** is the dominant background: a soft off-white with warm undertones that reduces eye strain and conveys premium, gallery-like quality. The surface stack progresses through subtle increments: surface-container-low (#f7f5f3) for slightly recessed areas, surface-container (#f1eeeb) for cards and panels, and surface-container-high (#e8e6e4) for hover states and elevated containers. **On-Surf

Typography

The type system pairs **cosmosOracle** (a custom serif with light weight 300–400) for all display, headline, and body text, creating a cohesive, editorial aesthetic that signals quality and intentionality. **basisMono** is reserved for technical labels, numerical data, and UI chrome (buttons, tags, captions). Display (60px, weight 300, -0.04em tracking) anchors hero sections with elegant restraint; headline-lg (40px, weight 300, -0.02em) is used for section titles and major headings. Body-lg (18px, weight 400, -0.02em) is the primary reading size for long-form content, set at 28px line-height for comfortable scanning. Body-md (16px, weight 400) is used for secondary content and descriptions. Label-md (14px, weight 600, 0.01em) is applied to buttons and interactive labels to ensure clarity

Layout

The layout system uses a 12-column grid with a max-width of 1200px, centered on the viewport. Page rhythm is governed by the spacing scale: **lg (40px)** separates major sections (hero, featured collections, footer), **md (24px)** creates breathing room between cards and components, and **sm (12px)** is used for internal component padding and tight groupings. The gutter is consistently 24px on desktop, reducing to 12px on tablet and 8px on mobile. Whitespace is treated as a design material—generous margins around content blocks and cards create a sense of calm and prevent cognitive overload. Container max-width is 1200px for desktop, ensuring that long-form content remains readable (optimal line length ~65 characters). The grid is fluid on mobile (single column with 12px gutters) and expan

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids harsh contrast. **Level 1 (Base)**: no shadow; elements sit flush on the surface (#f9f7f3). **Level 2 (Cards, Inputs)**: box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)—a barely perceptible lift that defines the edge without drawing attention. **Level 3 (Hover, Elevated Cards)**: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08)—a soft, diffuse shadow that suggests depth and interactivity. **Level 4 (Modals, Popovers)**: box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12)—a pronounced shadow that clearly separates the modal from the background. All s

Shapes

The shape philosophy is **Architectural Softness**: rounded corners are used sparingly and purposefully to balance the geometric precision of the grid with organic, approachable forms. **Buttons and interactive elements** use rounded.md (0.75rem / 12px) to signal interactivity while maintaining a refined, professional appearance. **Cards and containers** use rounded.lg (1rem / 16px) for a slightly softer, more inviting feel. **Input fields** use rounded.DEFAULT (0.5rem / 8px) to maintain visual hierarchy and distinguish them from larger containers. **Badges and tags** use rounded.full (9999px)

Components

Action Elements **Button-Primary** is the hero CTA: background {colors.primary} (#d1543e), text {colors.on-primary} (#ffffff), 44px height, 12px vertical / 24px horizontal padding, rounded.md (12px), label-md typography (14px, weight 600). On hover, background shifts to #c0452f over 0.2s; on active, scale 0.98 and shadow shifts to md-level (0 4px 12px rgba(0, 0, 0, 0.08)). Focus state adds a 3px outline in rgba(209, 84, 62, 0.3) with 2px offset. **Button-Secondary** is a ghost variant: transparent background, 1px border in {colors.outline-variant} (#ccc7c1), text {colors.primary}, same padding and height as primary. On hover, background becomes {colors.surface-container-high} (#e8e6e4) and border darkens to #a4a38f. Transition: 0.15s cubic-bezier(0.4, 0, 0.2, 1).

Containers & Surf

Do's and Don'ts

**Do**

• Do use {colors.primary} (#d1543e) exclusively for primary CTAs, active states, and key interactive elements—it is the visual anchor of the brand.
• Do maintain generous whitespace (lg spacing, 40px) between major sections to create a gallery-like sense of calm and prevent cognitive overload.
• Do apply smooth transitions (0.2s cubic-bezier(0.4, 0, 0.2, 1)) to all interactive state changes—hover, focus, active—to signal interactivity without jarring the user.
• Do use cosmosOracle serif typography for all display and body text to reinforce the premium, editorial aesthetic and brand identity.
• Do layer shadows subtly: sm (0 1px 2px) for cards, md (0 4px 12px) for hover states, lg (0 16px 40px) for modals—never exceed 12% opacity.
• Do ensure all text meets WCAG AAA contrast ratios: on-surface (#1d1717) on surface (#f9f7f3) is 13.5:1; on-primary (#ffffff) on primary (#d1543e) is 5.2:1.

**Don't**

• Don't use primary color (#d1543e) for body text, backgrounds, or non-interactive elements—reserve it for CTAs and active states only.
• Don't apply border-radius greater than 1.5rem (xl) on any component; excessive rounding undermines the refined, architectural aesthetic.
• Don't use harsh black shadows (rgba(0, 0, 0, 1)) or shadows with opacity >12%; all shadows must be soft and diffuse to maintain the light, airy feel.
• Don't mix serif (cosmosOracle) and monospace (basisMono) typography in the same text block; use basisMono only for labels, captions, and technical data.
• Don't reduce spacing below {spacing.sm} (12px) between major components; whitespace is a design material and must be respected.
• Don't apply animations longer than 0.3s for micro-interactions (hover, focus); keep motion snappy and intentional to avoid sluggishness.