Phono

Overview

Phono is a premium electronics and audio accessories retailer that embraces **Architectural Minimalism** — a design philosophy centered on stark geometric clarity, high-contrast monochromatic palettes, and purposeful negative space. The brand evokes a sense of technological precision and refined restraint: every element serves a function, nothing is decorative. The UI communicates confidence through bold typography (Rajdhani at 700 weight for headlines), pure black (#000000) and white (#ffffff) as primary anchors, and strategic use of teal accents (#108474, #53dab6) for interactive moments. The emotional response is one of control and sophistication — users feel they are engaging with a curated, expert-level product experience.

Phono's voice is direct, technical, and uncompromising. The brand speaks in declarative statements: "CURVY BEVEL DUAL AUDIO," "HIGH QUALITY HD AUDIO." Vocabulary is product-focused and specification-driven, avoiding marketing fluff. Tone is calm and authoritative, never breathless or casual. Example sentence in brand voice: "The Zania Black Edition delivers dual-channel audio through precision-engineered drivers — engineered for clarity at any volume."

Colors

The Phono color system operates on a **high-contrast, tech-forward principle**: pure black (#000000) and white (#ffffff) form the structural backbone, with teal and cyan accents (#108474, #53dab6) reserved for interactive elements and secondary calls-to-action. Primary (#000000) dominates headers, navigation, and primary CTAs ("BUY NOW" buttons with white text on black background). Secondary (#108474) and Tertiary (#53dab6) are used sparingly on review stars, accent badges, and hover states to signal interactivity without overwhelming the minimalist canvas. Error states use a bold red (#eb001b) for payment alerts and validation warnings. Surface colors range from pure white (#ffffff) down through carefully calibrated grays (#f9f9f9, #eeeeee, #e9ecef) to create subtle depth without introduc

Typography

The Phono type system pairs **Rajdhani** (a geometric, high-contrast sans-serif) for all headings and display text with **Roboto** (a humanist sans-serif) for body copy and UI labels. This pairing creates visual hierarchy through family distinction rather than weight alone. Rajdhani headlines are set at 700 weight with tight letter-spacing (-0.04em for display, -0.02em for headline-lg) to maximize impact and create a sense of technical precision. Body text in Roboto uses 400 weight at 18px on desktop (16px on mobile) with 0.06rem letter-spacing to maintain legibility in the high-contrast environment. All interactive labels (buttons, inputs) use Roboto at 14px, 600 weight, with 0.01em letter-spacing for clarity. When small labels appear over busy product imagery, apply text-shadow: 0 2px 4p

Layout

Phono uses a **12-column CSS Grid system** with a fixed container max-width of 1280px (130rem), centered on the viewport with 4% full-width spacing on either side. The grid is fluid on mobile (single column) and expands to multi-column layouts on desktop (2-column, 3-column, 4-column, etc., defined via .dt-sc-column utility classes). Vertical spacing between sections is controlled by --spacing-sections-desktop (0px for flush layouts) and --grid-desktop-vertical-spacing (28px for card gaps). Horizontal gutter is 24px (md spacing token) between grid items. The page uses a 4-row grid template (header, hero, content, footer) with the content area set to 1fr to fill available space. White-space philosophy is minimal but intentional: product cards are separated by 28px gaps, section breaks use 4

Elevation & Depth

Depth in Phono is conveyed through **subtle shadow layering and border definition** rather than dramatic drop shadows. The elevation system uses three levels: Level 1 (Base) has no shadow; Level 2 (Cards, inputs) uses box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1) with a 1px solid border at rgba(0, 0, 0, 0.1) to define edges; Level 3 (Modals, popovers) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px border. Interactive elements (buttons, inputs) use a 2px solid border at {colors.primary} or {colors.outline-variant} to create tactile definition without shadow. On hover, cards transition to

Shapes

Phono employs a **Soft-Technical** shape philosophy: buttons and inputs use full-radius pill shapes (border-radius: 42px / 40px) to soften the otherwise austere black-and-white palette, while cards and containers use minimal or zero radius (0px to 4px) to maintain architectural sharpness. This contrast — soft interactive elements against hard structural containers — creates visual interest and guides user attention to actionable items. Badge elements use 50% border-radius (full pill) to denote secondary information. The rationale is functional: pill-shaped buttons are highly clickable and feel

Components

Action Elements Buttons in Phono use a distinctive **pill-button aesthetic** with 2px solid borders and full radius (42px). Primary buttons have backgroundColor: rgb(255, 255, 255), textColor: rgb(0, 0, 0), and a 2px black border; on hover, they transition to backgroundColor: rgb(35, 35, 35) with white text over 200ms ease-in-out. Secondary buttons ("Log in") invert this: backgroundColor: rgb(0, 0, 0), textColor: rgb(255, 255, 255), 2px white border. All buttons use Roboto at 16px, 400 weight, with padding: 0px 40px and height: 48px. The border is critical to the brand identity — it creates a "frame" effect that makes buttons feel premium and intentional.

Containers & Surfaces Cards use backgroundColor: rgba(0, 0, 0, 0) (transparent) with borderRadius: 0px and boxShadow: 0 1px 5px

Do's and Don'ts

**Do**

• Do use pure black (#000000) and white (#ffffff) as your primary color pair — they are the brand's signature and must dominate layouts.
• Do apply Rajdhani at 700 weight for all headlines and display text; it creates the technical, high-contrast aesthetic that defines Phono.
• Do use teal (#108474) and cyan (#53dab6) accents sparingly on interactive elements, review stars, and secondary CTAs to signal interactivity.
• Do maintain 2px solid borders on all buttons and interactive elements — the border is a critical brand identifier.
• Do use full-radius pill shapes (42px) for buttons and inputs to soften the austere monochromatic palette.
• Do apply subtle shadows (0 1px 5px rgba(0, 0, 0, 0.1)) to cards and containers for depth without drama.

**Don't**

• Don't use gradients or color blends — Phono's strength is in stark, unambiguous color separation.
• Don't apply rounded corners to product cards or structural containers; reserve radius for interactive elements only.
• Don't use Roboto for headlines; it lacks the geometric precision that Rajdhani provides.
• Don't introduce new accent colors beyond teal, cyan, and red — the palette is intentionally limited to maintain focus.
• Don't use drop shadows larger than 0 8px 32px rgba(0, 0, 0, 0.2); excessive shadow depth contradicts the minimalist aesthetic.
• Don't add decorative elements or illustrations — every visual element must serve a functional purpose.