Spotlight

Overview

Spotlight is a contemporary editorial design system built for tech-lifestyle publishing. It serves content creators, tech reviewers, and lifestyle journalists who demand visual clarity without sacrificing sophistication. The aesthetic is 'Minimalist Journalism'—a refined approach that prioritizes legibility and content hierarchy through a restrained monochromatic palette (near-black #09090b, off-white #fafafa, and carefully calibrated grays) paired with precision typography. The UI evokes authority and trustworthiness: every element is intentional, every color choice purposeful. Users experience a calm, focused reading environment where content takes center stage and interface elements recede into the background.

The brand voice is direct, informed, and conversational—never breathless or hyperbolic. Spotlight speaks to readers who value substance over sensation. Example sentence: 'These smart glasses combine optical clarity with practical health tracking, making them the first wearables worth the investment.' The tone avoids marketing jargon; instead, it uses precise technical language grounded in real-world utility. Typography is set in Inter, a geometric sans-serif that balances warmth with neutrality, reinforcing the brand's position as both accessible and authoritative.

Colors

The color system is anchored in a high-contrast, achromatic foundation that reflects editorial design principles. Primary (#09090b) is the near-black used for body text, headlines, buttons, and interactive elements—it is the brand's signature accent and the most frequently clicked color on the page. On-primary (#ffffff) provides maximum contrast for text and icons on dark backgrounds. The surface stack progresses from surface-bright (#ffffff, card backgrounds) through surface-container (#eeeeef, subtle dividers) to surface-dim (#e8e8eb, disabled states), creating a visual hierarchy without relying on color saturation. Secondary (#71717a) and secondary-container (#d4d4d8) are reserved for metadata, timestamps, and tertiary information—they recede visually while remaining legible. Tertiary (

Typography

The type system is built on a six-level hierarchy that maps to content semantics: Display (60px, 700 weight) for hero statements; Headline-lg (48px, 700) for article titles; Headline-md (32px, 700) for section breaks; Title-lg (20px, 700) for card headers; Body-lg (18px, 400) for article body copy; Body-md (16px, 400) for UI labels and metadata; Label-md (14px, 600) for buttons and interactive elements; Label-sm (12px, 500) for tags and captions. All headings use a consistent letter-spacing of -0.025em, creating a tight, editorial feel that emphasizes density and authority. Body copy maintains 1.5 line-height (24px for 16px text) to ensure readability across screen sizes. When displaying small labels over busy image backgrounds, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) and use a se

Layout

The layout system uses a 12-column grid with a fixed container max-width of 1240px, centered on the viewport. The main content area uses a two-column layout (main content + 300px sidebar) with 48px gap spacing (--gap: 3rem) between sections. Padding is applied symmetrically: 48px vertical, 0px horizontal at the container level, allowing full-width images and cards to extend edge-to-edge while text remains constrained. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing; sm (12px) for component internal padding; md (24px) for card padding and section margins; lg (48px) for major section breaks; xl (64px) for hero spacing. White-space is used aggressively—the design favors breathing room over density. Featured images use aspect-ratio: 16/10 (--base) for hero cards

Elevation & Depth

Depth in Spotlight is achieved through subtle shadows and surface color shifts rather than dramatic layering. The elevation system defines three levels: Level 1 (Base) uses no shadow and surface-bright (#ffffff) for primary content cards. Level 2 (Elevated) applies box-shadow: 0 20px 25px -5px rgba(9, 9, 11, 0.1), 0 8px 10px -6px rgba(9, 9, 11, 0.1) and shifts background to surface-container-low (#f4f4f5), used for hover states and secondary cards. Level 3 (Modal/Overlay) uses box-shadow: 0 20px 25px -5px rgba(9, 9, 11, 0.15) with surface-container (#eeeeef), reserved for modals and floating e

Shapes

The shape philosophy is 'Architectural Precision'—rounded corners are used sparingly and purposefully to soften hard edges without introducing organic or playful aesthetics. The rounded scale progresses from sm (0.125rem / 2px) for small UI elements like tags and badges, to DEFAULT (0.5rem / 8px) for buttons, inputs, and standard cards, to md (0.75rem / 12px) for slightly larger containers, to lg (1rem / 16px) for modals and prominent cards, to xl (1.5rem / 24px) for hero sections and full-width containers, to full (9999px) for circular avatars and pill-shaped badges. Buttons use DEFAULT (8px)

Components

Action Elements Buttons are the primary interactive element and come in two variants: primary (background: #09090b, color: #ffffff, height: 44px, padding: 0 24px, border-radius: 8px) and secondary (background: transparent, border: 1px solid #a1a1aa, color: #09090b). Both use label-md typography (14px, 600 weight). On hover, primary buttons shift to primary-container (#3f3f46) with opacity: 0.9, creating a subtle darkening effect. On focus, both variants display box-shadow: 0 0 0 2px rgba(9, 9, 11, 0.33) to indicate keyboard navigation. Buttons use transition: opacity 0.25s ease for smooth state changes.

Containers & Surfaces Cards are the primary content container: background: #ffffff, border-radius: 8px, padding: 24px, box-shadow: 0 1px 2px 0 rgba(9, 9, 11, 0.05). On hover, cards

Do's and Don'ts

**Do**

• Do use the primary color (#09090b) exclusively for CTAs, active states, and interactive elements—it is the visual anchor that guides user attention.
• Do maintain the 8px border-radius as the default for buttons, inputs, and cards to create a cohesive, recognizable component language.
• Do apply the elevation shadow system (0 1px 2px for base, 0 20px 25px -5px for elevated) consistently to create depth without visual noise.
• Do use Inter typography exclusively across all text elements—the geometric proportions and consistent x-height reinforce editorial authority.
• Do leverage the full surface-container stack (#ffffff → #f4f4f5 → #eeeeef → #dcdcdf) to create visual hierarchy through subtle color shifts rather than saturation.
• Do apply letter-spacing: -0.025em to all headlines to create a tight, editorial feel that emphasizes density and authority.

**Don't**

• Don't introduce new accent colors outside the primary (#09090b) and secondary (#71717a) palette—the monochromatic aesthetic is the brand's defining characteristic.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—inconsistent rounding fragments the visual system.
• Don't apply shadows larger than the lg elevation (0 20px 25px -5px rgba(9, 9, 11, 0.15))—excessive shadow depth contradicts the minimalist editorial aesthetic.
• Don't mix typefaces or use system fonts as fallbacks—Inter is the only approved font family; if unavailable, degrade gracefully to sans-serif.
• Don't use opacity or transparency to create color variations—use the defined surface-container stack instead to maintain contrast and accessibility.
• Don't apply animations longer than 250ms or use easing functions other than ease or ease-in-out—fast, predictable transitions reinforce the brand's precision and clarity.