Mode Designs

Overview

Mode Designs is a premium mechanical keyboard manufacturer that embodies **Architectural Minimalism**—a design philosophy that prioritizes precision, material honesty, and spatial clarity. The brand serves discerning creators, professionals, and enthusiasts who view their keyboard as both a functional instrument and a desktop sculpture. The UI evokes a sense of refined craftsmanship: deep forest-green surfaces (#1c291f) paired with crisp cyan-blue accents (#1990c6) create visual tension between restraint and precision. The emotional response is one of quiet confidence—users feel they're engaging with a product designed by people who obsess over every detail, from keystroke acoustics to pixel-perfect typography.

Mode's voice is direct, unadorned, and technically literate. The brand speaks in concrete terms: "tuned for how they sound, feel and look on your desk" rather than vague marketing speak. Vocabulary favors precision over poetry—"mechanical switches," "stabilizer design," "typing experience"—grounding the brand in tangible reality. The tone is conversational but authoritative, never breathless or hyperbolic. Example sentence in Mode's voice: "The Encore's stabilizers are hand-tuned to eliminate rattle while preserving the natural resonance of each keystroke."

Colors

Mode's color system reflects industrial precision tempered by human warmth. The primary accent—Cyan-Blue (#1990c6)—is the signature brand color, appearing on all interactive CTAs, focus states, and key navigation elements. This is not a corporate blue; it's a deliberate, slightly desaturated cyan that reads as both technical and approachable. The surface stack uses a deep forest-green base (#1c291f for surface, #0f1714 for surface-dim, #303d37 for surface-container-highest) that evokes the precision of machined metal and the calm of a focused workspace. Secondary accent Teal (#136f99) supports status indicators and secondary actions, creating a cohesive cool-toned palette. Tertiary Cyan (#338fb1) is reserved for highlights and tertiary CTAs. The on-surface text color is a soft off-white (#

Typography

Mode's type system balances editorial elegance with technical clarity. Display and Headline levels use Ivyora Display (a geometric serif from Adobe Fonts), a typeface that conveys precision and craft—its thin weight (300) and generous letter-spacing (-0.04em to -0.015em) create an airy, confident presence. Body text uses PP Neue Montreal (a humanist sans-serif), which is warm and legible at small sizes (16px–18px with 24–28px line-height). Monospace labels use PP Neue Montreal Mono for technical specifications and code-like content, reinforcing the brand's technical credibility. The type hierarchy is strict: H1 uses 80px/88px (display), H2 uses 56px/64px (headline-lg), H3 uses 40px/48px (headline-md). Body copy is consistently 16px–18px with 1.5x line-height (24–28px) for readability. On s

Layout

Mode's layout follows a 12-column grid system with a 1280px max-width container, maintaining a 24px gutter on desktop and 12px on mobile. The page rhythm is generous: major sections are separated by 40px (lg spacing) vertical margins, while internal component spacing uses 24px (md spacing) for breathing room. The grid is fluid on mobile (100% width with 12px side padding) and fixed on desktop, ensuring content never feels cramped. Whitespace is treated as a design material—empty space around the hero CTA and product grids creates visual hierarchy and guides the eye. The container-max-width of 1280px prevents text lines from becoming uncomfortably long (optimal line length is 50–75 characters). Responsive breakpoints use 40rem (640px) as the primary mobile threshold, with typography scaling

Elevation & Depth

Depth in Mode's system is achieved through subtle layering and precise shadow placement, not through dramatic darkness shifts. Level 1 (Base): The background surface (#1c291f) provides the foundation with a subtle grain texture (optional, 1–2% opacity). Level 2 (Standard Cards): Cards use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) with a 1px border in surface-variant (#4a5550), creating a soft separation from the background. Level 3 (Elevated/Modals): Modals and floating elements use box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1) with a 1px border in outline (#7f8b83), signaling higher prominence.

Shapes

Mode's shape philosophy is **Technical Precision**—rounded corners are used sparingly and purposefully, never decoratively. Buttons use 1rem (16px) border-radius, a subtle softness that feels refined without being playful. Cards and containers use 0.75rem (12px) for a slightly sharper appearance, reinforcing their role as content vessels. Input fields use 0.5rem (8px), the tightest radius, to signal functional purpose. Badges and pills use 9999px (full) for maximum softness, creating visual distinction from structural elements. The rationale: larger, more prominent interactive elements (button

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use a solid background in primary cyan (#1990c6) with white text, 48px height, 12px vertical / 32px horizontal padding, and 1rem border-radius. On hover, the background shifts to primary-container (#0d5a8a) with a 200ms transition. Secondary buttons are transparent with a 1px border in primary, text in primary, and the same dimensions; on hover, they gain a surface-container-high background (#26332b). Both button variants use label-md typography (14px, 600 weight, 0.02em letter-spacing). Active/pressed states darken further to inverse-primary (#338fb1). All buttons include a 200ms cubic-bezier(0.4, 0, 0.2, 1) transition for smooth state changes.

Containers & Surfaces Cards are the primary content containe

Do's and Don'ts

**Do**

• Do use primary cyan (#1990c6) exclusively for CTAs and focus states—it's the brand's signature accent and must remain visually distinct.
• Do maintain the 24px gutter and 40px section spacing to preserve the generous, focused aesthetic that defines Mode's design language.
• Do apply the full type hierarchy (display → headline-lg → headline-md → body-lg → body-md) to create clear information architecture; never skip levels.
• Do use the surface-container stack (surface-dim through surface-container-highest) to create visual depth without introducing new colors.
• Do pair Ivyora Display with PP Neue Montreal for maximum impact—the serif/sans contrast reinforces the brand's precision-meets-warmth positioning.

**Don't**

• Don't use pure white (#ffffff) or pure black (#000000) as text or background colors; Mode's palette is intentionally desaturated and warm.
• Don't apply border-radius greater than 1rem to buttons or cards—the brand's technical aesthetic requires restraint in rounding.
• Don't use shadows larger than 0 8px 25px rgba(0, 0, 0, 0.1); deeper shadows feel heavy and contradict the refined, minimalist aesthetic.
• Don't introduce secondary or tertiary colors into CTAs—primary cyan is non-negotiable for all primary actions to maintain brand consistency.
• Don't use transitions longer than 300ms or easing functions other than cubic-bezier(0.4, 0, 0.2, 1); Mode's interactions should feel precise and responsive, never sluggish or bouncy.