Hyper Blue
#0000ffFilled action buttons, footer background, interactive accent — the single chromatic punctuation against an otherwise achromatic system
HyperAktiv
hyperaktiv.li
Website preview
The design language
HyperAktiv operates as a Swiss editorial poster: pure white canvas, oversized black display type, and one electric blue (#0000ff) that fires only on action and footer surfaces. Headlines dominate at 72–90px with line-heights tightened to 0.89–1.0, collapsing the page into a vertical column of massive typographic statements. Layouts alternate between full-bleed photography and asymmetric 50/50 splits, treating the interior photos as raw documentation rather than styled artwork. Everything is sharp-cornered except a single 20px button radius, and the only shadows are the ones baked into the photography — the interface itself stays flat, binary, and graphic.
Color palette
brand
neutral
Pure White
#ffffffPage background, card surfaces, text on dark/action backgrounds
Absolute Black
#000000Body text, headings, icon strokes, hairline borders, image overlays
Mid Graphite
#333333Input text, secondary text content
Light Silver
#ccccccInput borders, subtle form dividers
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
90px · 400 · 0.89The quick brown fox jumps
text-80
80px · 400 · 1The quick brown fox jumps
heading-lg
72px · 400 · 1The quick brown fox jumps
heading
42px · 400 · 1.2The quick brown fox jumps
text-28
28px · 400 · 1.5The quick brown fox jumps
heading-sm
25px · 400 · 1.22The quick brown fox jumps
text-22
22px · 400 · 1.22The quick brown fox jumps
subheading
20px · 400 · 1.25The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Studiofeixensans
- Weights
- 400, 700
- Sizes
- 14, 16, 20, 22, 25, 28, 42, 72, 80, 90px
- Line height
- 0.89, 1.00, 1.20, 1.22, 1.43, 1.50, 2.00
- Letter spacing
- normal across all sizes — the visual tightness comes from line-height compression, not tracking
- Fallback
- Archivo or Space Grotesk
Display and heading typeface. Used uppercase at 72–90px with line-heights compressed to 0.89–1.0 so massive headlines stack into dense typographic blocks. Weights 400 and 700 — the lighter weight carries sub-headlines, 700 owns the display statements. Custom font; substitute with Archivo or Space Grotesk for its tight, geometric, slightly condensed character.
Additional typeface
DM Sans
- Weights
- 400
- Sizes
- 14, 16, 20px
- Line height
- 1.25, 1.43
- Fallback
- Inter or system-ui sans-serif
Body and interface text. Single weight 400 across 14–20px. Used for form labels, card body copy, navigation, and supporting paragraphs. DM Sans stays quiet so Studiofeixensans can dominate at the top of the hierarchy.
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 30px
- Card padding
- 15px
- Element gap
- 10px
Border radius
tags
0pxcards
0pxinputs
0pxbuttons
20pxSpacing scale
5px7px8px9px10px11px12px15px16px20px25px30px36px40px45px50px60px243pxGuidelines
Do
- Use #0000ff exclusively for filled action buttons and the footer — it is the only chromatic surface allowed
- Set display headlines to 72–90px in Studiofeixensans 700 uppercase with line-height 0.89–1.0
- Use 20px border-radius on buttons and 0px on everything else (cards, inputs, images, tags)
- Let photographs run edge-to-edge with no border-radius and no overlay treatment
- Use the 50/50 split layout as the default for content sections — image on one side, text on the other
- Keep all body and interface text in DM Sans 400 at 14–20px — never let it compete with the display face
- Use uppercase for all headings, sub-headings, button labels, and feature lists in Studiofeixensans
Don’t
- Never introduce additional accent colors — the system is binary (black/white) plus one blue
- Never apply drop shadows, glows, or blurred surfaces to UI components — keep it flat
- Never use rounded corners on cards, inputs, or images — only buttons get the 20px radius
- Never set body or display line-height above 1.5 for body and below 0.9 for display — the compression is the signature
- Never use a chromatic color for text other than the white text on the blue footer
- Never add gradients, glassmorphism, or noise textures — surfaces are either solid white or solid blue
- Never use a serif, script, or decorative typeface — the system is two sans-serifs only
Components
Full-Bleed Hero Photograph
Opening visual statementEdge-to-edge photographic image (train station, cityscape) filling the viewport width. No border-radius, no overlay tint, no gradient mask. The image carries its own natural depth and contrast against the white margins above and below.
Display Headline
Section titleStudiofeixensans weight 700, uppercase, 72–90px, line-height 0.89–1.0, color #000000 on #ffffff. The defining element of the system — these headlines are 5–6x larger than body text and define the vertical rhythm of every page.
Split Section (50/50 Image + Text)
Primary content blockTwo-column layout, image on one side (no padding, edge-to-edge), text on the other with ~30px internal padding. Used for concept, venue showcase, and reservation sections. Text column max-width ~480px, vertically centered.
Primary Filled Button
Call-to-actionBackground #0000ff, text #ffffff, Studiofeixensans weight 400 uppercase, 14–16px, padding 10px 20px, border-radius 20px (the only rounded element in the system). No border, no shadow. The blue fill against the black/white surroundings makes it the only element that demands attention.
Text Input
Form fieldBorder 1px solid #cccccc (Light Silver), no border-radius, padding 8–12px vertical / 10–12px horizontal. Text color #333333 (Mid Graphite), 14–16px. Placeholder inherits lighter weight. Underlined or boxed, never rounded — consistent with the flat, editorial tone.
Feature Bullet List
Amenity/specification listingStudiofeixensans weight 400, uppercase, 16–20px, line-height 1.43, color #000000. Items separated by a filled circle bullet (●) as inline character — no extra padding or decoration. Tight horizontal rhythm creates a dense, catalog-like feel.
Image Grid (Events)
Multi-image gallery blockHorizontal row of rectangular photographs, no gap or 5–10px gap, no border-radius, no captions. Each image bleeds to the section edge. Functions as visual proof-of-work for the venue.
Marquee Headline
Animated brand repetitionStudiofeixensans weight 700, uppercase, 80–90px, repeating the brand name 'HyperAktiv.' across the viewport. Tight letter-spacing, line-height 1.0, black on white. The trailing period is part of the wordmark identity.
Chat Widget Bubble
Persistent contact CTAFixed bottom-right, white card with subtle 1px border, rounded ~12px, containing avatar thumbnail, bold name 'Olivia', timestamp, and message preview. Green circular WhatsApp-style icon button adjacent. The only element that introduces any softness into the system.
Footer
Site footerFull-bleed #0000ff background, white text, Studiofeixensans weight 400 uppercase, generous padding (40–60px vertical). Navigation links, legal text, and contact info all white on blue. The blue ground is the chromatic bookend to the white page.
Pricing Statement
Rate displayStudiofeixensans weight 400, uppercase, 42px, line-height 1.20, color #000000. Format: 'DÈS CHF 1000/JOURNÉE' — a single, declarative typographic moment, not a styled badge or card.
Surfaces & elevation
Level 1
Paper
#ffffffPrimary page background — the dominant canvas
Level 2
Hyper Blue Ground
#0000ffFooter and action surface — the only chromatic surface in the system
The interface is intentionally flat. No drop shadows, no glows, no blurred surfaces. Depth is communicated only through full-bleed photography and typographic scale — the UI stays graphic, not skeuomorphic. If a component seems to need a shadow, it probably needs a border or a background swap instead.
Layout & imagery
Layout
Max-width ~1200px centered, but content frequently breaks the container to full-bleed for hero and footer. The page is a vertical sequence of full-width bands: full-bleed hero photo → marquee text → 50/50 split (concept text) → 50/50 split (venue image + text) → image grid → 50/50 split (reservation form). No sidebar, no card grid for features. Navigation is minimal — likely a thin top bar or hidden behind a menu trigger. Section rhythm is driven by 30px+ vertical gaps between bands and the dramatic scale shift between 90px display type and 16px body text. The 50/50 split is the workhorse layout pattern, used 3+ times per page.
Imagery
Photographic documentation only — no illustration, no abstract graphics, no icons beyond the chat widget. Photography is documentary in tone: train platforms, empty interior rooms, architectural details, candid venue shots. Full-bleed at hero scale, contained at ~480px width in split sections. No filters, no duotone treatment, no rounded corners. Images carry the natural contrast and color of Swiss urban/architectural photography and are left to speak unprocessed. The visual language of a venue portfolio, not a lifestyle brand.
Design notes
Agent Guide
## Quick Color Reference - text: #000000 - background: #ffffff - border: #000000 (hairline) or #cccccc (input) - accent: #0000ff (Hyper Blue — action and footer only) - primary action: #0000ff (filled action) ## Example Component Prompts 1. **Display Headline Block**: 'NOUS ACCUEILLONS VOS AMAZING EVENTS DEPUIS 2016!' in Studiofeixensans weight 700, uppercase, 90px, line-height 0.89, color #000000 on #ffffff background. Full viewport width, 30px top/bottom margin. 2. **50/50 Split Section (Image + Text)**: Left column: full-bleed interior photograph of a venue space, no border-radius, no overlay. Right column: 30px padding, Studiofeixensans weight 700 uppercase 72px heading 'ALIVE' in #000000, followed by DM Sans 400 16px body text in #333333, line-height 1.43. Below: Studiofeixensans 400 uppercase 16px feature list with ● separators. 3. **Primary Filled Button**: 'DÈS CHF 1000/JOURNÉE' link styled as a button: background #0000ff, text #ffffff, Studiofeixensans weight 400, uppercase, 16px, padding 10px 20px, border-radius 20px, no border, no shadow. Inline, left-aligned within its text column. 4. **Text Input Field**: 1px solid #cccccc border, 0px border-radius, padding 10px 12px, width 100% of column. Label above in DM Sans 400 14px #000000. Placeholder text in #333333. No focus glow — use a 2px #000000 border on focus instead. 5. **Full-Bleed Hero Photograph**: Edge-to-edge image filling 100vw width and ~60vh height. No overlay, no border-radius, no caption. White margin above and below (30px each). Followed immediately by the marquee headline block.
Typography Philosophy
The typographic system is the product. Two typefaces, one job each: Studiofeixensans (custom) for everything that should be read from across the room, DM Sans for everything read at arm's length. The extreme display sizes (72–90px) with line-heights compressed to 0.89–1.0 are not a bug — they are the signature. They force headlines to stack into dense, poster-like blocks that anchor each section. Body text stays small (14–20px) and quiet (DM Sans, no bold, single weight 400). The contrast between these two registers is what gives the page its visual rhythm.
Similar brands
Studio Raphaël Lutz
Parent studio — shares the same custom display typeface (Studiofeixensans) and Swiss editorial typographic system
Vitra
Same oversized sans-serif headlines on white with full-bleed architectural photography and zero chromatic noise
Atelier Bingo
Editorial broadsheet layout with massive display type and monochrome palette punctuated by single accent moments
Haltbar
Swiss branding studio aesthetic — pure black/white with one electric accent, flat components, no shadows
Sagmeister & Walsh
Poster-scale typography, full-bleed documentary photography, and binary color discipline
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
