Subtopia

Overview

Subtopia is a Stockholm-based cultural production venue and incubator that houses television studios, circus residencies, urban art installations, and youth programming under a single roof. The design system embodies Scandinavian Brutalism—a movement that celebrates raw, unadorned geometry and high-contrast visual hierarchies—combined with vibrant accent colors (#e83363 pink, #ff6900 orange, #0693e3 cyan) that punctuate an austere black canvas (#000000). This aesthetic creates an energetic, rebellious atmosphere that reflects Subtopia's role as a hub for experimental cultural production. The interface feels intentionally stark and bold, rejecting softness in favor of clarity and impact.

The brand voice is direct, confident, and culturally engaged. Subtopia speaks to creative professionals, artists, and culturally curious audiences in Swedish and English with precision and enthusiasm. The tone avoids corporate jargon; instead, it uses concrete, action-oriented language. Example: 'Boka lokal' (Book a space) or 'Följ vår kalender' (Follow our calendar). Typography is set in Patron—a distinctive, geometric typeface that reinforces the Brutalist aesthetic—at substantial sizes (64px for headlines, 21px for body) to command attention and convey authority.

Colors

The color system operates on a principle of maximum contrast and intentional accent deployment. The primary surface is pure black (#000000), which serves as the dominant canvas and establishes visual weight. All interactive and brand-critical elements use the primary accent color, Subtopia Pink (#e83363), which appears on call-to-action buttons, active states, and key navigation elements. This vivid, saturated pink is the most recognizable brand identifier and should be reserved exclusively for primary interactions and brand moments.

Secondary and tertiary accent colors provide visual rhythm and functional differentiation: Secondary Blue (#0693e3) is used for informational elements, links, and secondary CTAs; Tertiary Green (#009d72) supports status indicators and success states. The oran

Typography

The typography system is anchored in Patron, a geometric sans-serif that communicates Subtopia's modern, design-forward identity. The type scale progresses from display (64px, 900 weight) for hero headlines through headline-lg (48px, 700 weight) for section titles, headline-md (36px, 700 weight) for subsections, and body-lg (21px, 400 weight) for primary content. This progression creates clear visual hierarchy without requiring color shifts; weight and size alone establish dominance. Body text is set at 21px with 400 weight and 32px line-height (1.52 unitless), ensuring readability on the dark background. Labels and UI text use 16px (label-md) or 14px (label-sm) with 600 weight to maintain prominence in interactive contexts. Letter-spacing is minimal (−0.02em on display, −0.01em on headlin

Layout

The layout system uses a fluid, full-width approach with a maximum container width of 1280px for content sections. The grid operates on 12 columns with a consistent gutter of 26px (matching the header padding observed in live styles). Spacing follows a semantic scale: xs (4px) for micro-adjustments, sm (12px) for compact grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for full-page rhythm. The hero section spans full-width with 64px vertical padding (matching h1 padding: 64px 0px), creating a commanding presence. Carousels and full-bleed content blocks extend to 100% viewport width, with internal padding managed via the gutter token. The page rhythm emphasizes breathing room: sections are separated by lg spacing (40px), while related e

Elevation & Depth

Depth in this system is achieved through minimal, high-contrast shadow and layering rather than blur or glassmorphism. The elevation scale defines three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle hover states on interactive elements, md (0 3px 8px rgba(0, 0, 0, 0.15)) for elevated cards and modals, and lg (0 0 2px 2px rgba(0, 0, 0, 0.6)) for the most prominent overlays and focus states. Carousel items and cards use md elevation on hover to signal interactivity. The dark background (#000000) means shadows are rendered as darker blacks rather than traditional drop shadows; this create

Shapes

The shape philosophy is 'Geometric Minimalism'—sharp, intentional corners that reflect the Brutalist aesthetic while maintaining functional clarity. Most interactive elements use minimal border-radius: buttons and inputs default to 4px (rounded.DEFAULT), creating a subtle softness without compromising the austere visual language. Cards and containers use 10px (rounded.md) for slightly more breathing room. Toggle switches and badges use full radius (9999px / rounded.full) to signal their distinct, self-contained nature. The 3px radius (rounded.sm) is reserved for very small UI elements like pag

Components

Action Elements Buttons are the primary interaction mechanism and must use the primary accent color (#e83363) for all primary CTAs. The button-primary component has a height of 48px, padding of 12px 24px, and uses label-md typography (16px, 600 weight). On hover, the background shifts to the primary-fixed color (#ff6900) with a 200ms ease-in-out transition. Secondary buttons use a transparent background with a 1px border in on-surface white (#ffffff) and shift to surface-container-high (#2a2a2a) on hover. All buttons must have a minimum touch target of 48px height per accessibility standards.

Containers & Surfaces Cards use surface-container (#1a1a1a) as the base background with a 1px border in outline-variant (#444444). On hover, cards transition to surface-container-high (#2a2a2

Do's and Don'ts

**Do**

• Do use the primary pink (#e83363) exclusively for primary CTAs, active states, and brand-critical moments—never dilute its impact through overuse.
• Do maintain the black background (#000000) as the dominant surface; it is the brand's visual anchor and should never be lightened to gray.
• Do set body text at 21px or larger with 1.5+ line-height on dark backgrounds to ensure accessibility and readability.
• Do apply transitions (200ms ease-in-out) to all interactive state changes (hover, focus, active) to signal interactivity without jarring the user.
• Do use Patron typeface at substantial sizes (48px+) for headlines to leverage its geometric character and reinforce the Brutalist aesthetic.
• Do reserve the secondary blue (#0693e3) and tertiary green (#009d72) for informational and status roles; never use them as primary CTAs.

**Don't**

• Don't use soft shadows, blur effects, or glassmorphism; this system is built on high-contrast, sharp geometry.
• Don't lighten the black background or introduce mid-tone grays as primary surfaces; the dark aesthetic is non-negotiable.
• Don't apply border-radius greater than 10px except for full-radius elements (badges, toggles); excessive rounding undermines the Brutalist character.
• Don't use the orange accent (#ff6900) as a primary CTA color; it is a secondary accent for hover states and supporting elements.
• Don't set body text smaller than 18px on the dark background; legibility is critical and size is a primary accessibility tool.
• Don't mix typefaces; Patron is the exclusive brand typeface for all UI and content. System fallbacks are Helvetica and sans-serif only.