CIPHER

Overview

CIPHER is a cultural platform dedicated to counter-narratives and alternative perspectives, operating at the intersection of art, media, and critical discourse. The design system embodies 'Typographic Brutalism'—a movement that strips away decorative excess to expose the raw power of typography, contrast, and spatial tension. The interface prioritizes content through an austere black-and-white palette punctuated by precise geometric spacing, creating an intellectual, uncompromising aesthetic that demands active engagement rather than passive consumption. The brand personality is cerebral, provocative, and unapologetically direct: the UI speaks in declarative statements, uppercase labels, and high-contrast hierarchies that refuse to whisper. Voice example: 'Culture is not neutral. Neither is this platform.'

Colors

The color system operates on a principle of maximum contrast and intentional restraint. Primary (#ffffff) is deployed exclusively on interactive elements—navigation links, buttons, and focal points—creating visual anchors against the dominant black surface (#000000). The light neutral (#e9eae4) serves as the secondary text color and container background, introducing subtle warmth without compromising the austere aesthetic. Outline colors (#676767 for primary, #505050 for variant) define structural boundaries and disabled states with precision. The system rejects gradients and color blending; instead, it uses discrete, high-contrast pairs (black/white, dark/light) to establish hierarchy. Disabled states employ #6c757d with reduced opacity (50%), signaling unavailability through desaturation

Typography

The typographic system employs two custom variable fonts—Favorit for body and display text, Arizona for secondary labels and metadata—creating a dual-voice hierarchy that separates primary content from supporting information. Favorit's geometric precision and variable weight range (100–900) enable expressive hierarchy: display text uses 700 weight at 72px with -0.02em letter-spacing to create visual compression, while body text sits at 400 weight, 16px, with 24px line-height (1.5x) for comfortable reading. The label system uses 12px Favorit at 500 weight with 0.08em letter-spacing (uppercase context), creating visual separation from body content. Arizona, used sparingly for timestamps and metadata, operates at 10px with 0.1em tracking, establishing a tertiary information layer. Apply text-

Layout

The layout system operates on a 12-column grid with a fixed 1280px container max-width, maintaining consistent horizontal rhythm across breakpoints. The gutter width is 20.5px (matching the fixed navigation padding), creating a precise left-right margin that anchors all content. Vertical spacing follows the semantic scale: section separation uses lg spacing (40px), component grouping uses md spacing (24px), and internal padding uses sm spacing (12px). The navigation occupies a fixed header at 7px top padding with 20.5px horizontal padding, using mix-blend-mode: difference to remain visible across all background content. The page canvas is full-width (100vw) with 100svh (small viewport height) for immersive hero sections. White-space is weaponized: generous margins between content blocks cr

Elevation & Depth

Depth in CIPHER is conveyed through shadow and layering rather than color gradation. The elevation system uses three discrete levels: sm (0 1px 3px rgba(0, 0, 0, 0.12)) for subtle card separation, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard containers and modals, and lg (0 8px 24px rgba(0, 0, 0, 0.2)) for floating overlays and prominent modals. The fixed navigation uses mix-blend-mode: difference to float above content without requiring shadow, maintaining visual clarity through blend mode rather than depth. Interactive elements (buttons, links) do not employ shadows; instead, they use opa

Shapes

The shape philosophy is 'Minimal Geometry'—a deliberate rejection of rounded corners in favor of sharp, right-angled forms that evoke industrial design and print typography. Border-radius is limited to 4px (DEFAULT) for subtle softening on cards and inputs, with no radius exceeding 12px (xl). Buttons use 4px radius, creating a slight visual relief without compromising the angular aesthetic. Dividers and borders are 1px solid, using outline-variant (#505050) to define structure without visual noise. The cursor indicator (4px × 4px square) uses full border-radius to create a single organic accen

Components

Action Elements Navigation links use label-md typography (12px, 500 weight, 0.08em tracking) in uppercase, with 15px vertical padding and transparent background. Hover state reduces opacity to 50% over 0.2s ease-out, creating a subtle fade effect. Active links maintain full opacity and use primary color (#ffffff). The 'Contact' toggle employs the same styling, with pointer-events: auto to ensure interactivity despite the fixed nav's pointer-events: none parent.

Buttons follow a two-state system: primary buttons use #ffffff background with #000000 text, 44px height, 12px vertical / 24px horizontal padding, and 4px border-radius. Hover state transitions to primary-fixed-dim (#d0d0d0) over 0.2s. Secondary buttons use transparent background with 1px outline (#676767), maintaining the same

Do's and Don'ts

**Do**

• Do use uppercase for all navigation and button labels—it reinforces the declarative, uncompromising brand voice.
• Do maintain 1.5x line-height (24px on 16px body) for readability; the high-contrast palette demands generous vertical spacing.
• Do apply mix-blend-mode: difference to fixed UI elements (nav, cursor) to ensure visibility across all background content without adding shadows.
• Do use opacity transitions (0.2s ease-out) for interactive feedback rather than color shifts; it maintains the minimal aesthetic.
• Do preserve the 20.5px gutter width across all breakpoints—it's the structural anchor of the entire system.

**Don't**

• Don't add rounded corners exceeding 12px or use border-radius: 50% on non-circular elements; it compromises the brutalist geometry.
• Don't use color gradients or semi-transparent overlays; the system relies on discrete, high-contrast layers.
• Don't apply shadows to interactive elements (buttons, links); use opacity or border changes instead.
• Don't mix Favorit and Arizona in the same text block; maintain clear typographic separation between primary and secondary information.
• Don't reduce contrast below WCAG AA standards (4.5:1 for body text); the black-and-white palette is non-negotiable for accessibility and brand integrity.