Voyeur Vérité

Overview

Voyeur Vérité is an artist-founded creative studio specializing in documentary filmmaking, branded storytelling, and original content that explores the human experience through truth, humility, grit, and evolution. The design system embodies **Cinematic Brutalism**—a visual language that prioritizes raw authenticity and uncompromising contrast. The brand aesthetic merges the visceral intensity of documentary cinema with the precision of architectural design: deep blacks (#211f1f) provide the canvas, warm off-whites (#f5f2ed) serve as primary text, and a bold red accent (#ee3335) punctuates moments of call-to-action and emotional intensity. The UI evokes the feeling of watching a film unfold—deliberate pacing, high contrast, and moments of visual silence that amplify the impact of key elements.

The brand voice is direct, unadorned, and intellectually rigorous. Vocabulary favors concrete nouns over abstractions: "truth" over "authenticity," "grit" over "resilience," "observation" over "insight." The tone is never breathless or hyperbolic; instead, it speaks with the calm authority of a documentarian. Example: "We capture the moments that matter—the ones that reveal who people really are."

Colors

The color system operates on a principle of **maximum contrast with strategic accent**. The primary surface is a near-black (#211f1f), chosen for its depth and cinematic quality—it recalls the black of a film frame and the darkness of a theater. Against this, the on-surface color (#f5f2ed) provides 96% contrast, ensuring legibility and visual clarity. The primary accent color (#ee3335) is a bold, saturated red that appears on all interactive elements: primary buttons, focus states, and brand moments. This red is not decorative; it signals action and urgency, drawing the eye with the same intensity as a cut in film editing. Secondary colors include a warm gray (#d4d0cb) for supporting text and a technical blue (#3898ec) for tertiary actions or status indicators. The surface stack progresses

Typography

The type system is built on a single typeface family—Review, a bold, geometric sans-serif that commands attention and reflects the studio's uncompromising aesthetic. The display level (121.6px, weight 900) is reserved for hero headlines and is set with aggressive negative letter-spacing (-0.04em) to create visual density and impact. Headline levels (56px–40px, weights 700–600) are used for section titles and maintain the tight tracking to preserve the brand's visual intensity. Body text (18px–16px, weight 400) is set with generous line-height (28px–24px) to ensure readability over the dark background; the slight positive letter-spacing (0.01–0.02em) prevents the text from feeling cramped. Labels and UI text (14px–12px, weights 600–500) use tighter line-height (20px–16px) and increased lett

Layout

The layout system uses a fluid 12-column grid with a maximum container width of 1440px, allowing the design to scale responsively across devices while maintaining visual control. The spacing scale is semantic and hierarchical: unit (8px) is the base increment, with sm (12px), md (24px), lg (40px), and xl (64px) used for progressive separation of content blocks. The gutter width is set to 32px, providing breathing room between columns without excessive whitespace. Section separation uses lg spacing (40px) for major content shifts and md spacing (24px) for subsection breaks, creating a clear visual rhythm. The design favors generous whitespace—negative space is treated as an active design element, not wasted real estate. Container padding follows the gutter width (32px on desktop, reduced to

Elevation & Depth

Depth in this system is achieved through **layered contrast and shadow**, not through bright highlights or glassmorphism. The base elevation (Level 1) is the surface itself (#211f1f), which serves as the primary canvas. Level 2 (standard cards and containers) sits at surface-container (#211f1f) with a 1px border in outline-variant (#555050) and a subtle shadow (0 3px 8px rgba(0, 0, 0, 0.15)) that separates it from the background. Level 3 (elevated modals, dropdowns, and overlays) uses surface-container-high (#2d2b2b) with a stronger shadow (0 8px 24px rgba(0, 0, 0, 0.2)) to create clear visual

Shapes

The shape system follows **Architectural Minimalism**—sharp, precise corners with minimal rounding. The default border-radius is 0.25rem (4px), used on buttons, inputs, and small interactive elements. Cards and larger containers use 0.75rem (12px) for a subtle softening that prevents the design from feeling harsh. Modals and overlays use 1rem (16px) for a slightly more generous curve. The full radius (9999px) is reserved for badges and pill-shaped elements. This conservative approach to rounding reflects the brand's documentary aesthetic: the UI should feel like a tool, not a toy. Sharp corner

Components

Action Elements Primary buttons use the brand red (#ee3335) as the background with off-white text (#f5f2ed), set in label-md typography (14px, weight 600). The button height is fixed at 48px with 12px vertical and 24px horizontal padding, ensuring adequate touch targets and visual presence. On hover, the background shifts to primary-container (#c41c1e) and the element scales to 1.05 (transform: scale(1.05)) over 150ms, creating a tactile sense of lift. On active/press, the scale reduces to 0.98, simulating a button press. The transition timing is 0.2s ease for background-color and 0.15s ease for transform, providing snappy feedback without feeling jarring. Secondary buttons are transparent with a 1px border in the primary red, text in primary red, and the same 48px height. On hover, th

Do's and Don'ts

**Do**

• Do use the red accent (#ee3335) exclusively on interactive elements—buttons, links, focus states—to maintain its signal strength and prevent visual dilution.
• Do maintain high contrast between text and background; the 96% contrast ratio between on-surface (#f5f2ed) and surface (#211f1f) is non-negotiable for accessibility and brand integrity.
• Do apply generous spacing (lg: 40px) between major content sections to create visual breathing room and emphasize the cinematic pacing of the interface.
• Do use the Review typeface at large sizes (display, headline) with tight letter-spacing (-0.04em to -0.01em) to create visual density and impact.
• Do transition interactive elements smoothly (0.2s–0.3s ease) to signal state changes without feeling sluggish or unresponsive.

**Don't**

• Don't use the red accent (#ee3335) on non-interactive elements; reserve it exclusively for CTAs, focus states, and brand moments to preserve its visual authority.
• Don't introduce new colors outside the defined palette; the system is intentionally limited to black, off-white, red, gray, and blue to maintain visual coherence.
• Don't round corners beyond 1rem (16px); the brand aesthetic demands sharp, architectural precision, not soft, rounded forms.
• Don't use soft, diffuse shadows; all shadows must be sharp and defined (0 3px 8px, 0 8px 24px) to maintain the high-contrast, cinematic aesthetic.
• Don't apply text-shadow or glow effects to body text; reserve these techniques for small labels over busy backgrounds where legibility is at risk.