Signal Blue
#2749ffViolet wash for highlight backgrounds, decorative bands, and soft emphasis behind content. Do not promote it to the primary CTA color
Halfhelix
halfhelix.com
Website preview
The design language
Domaine operates as a luxury editorial canvas: near-total achromatic palette, one neutral grotesque typeface at weight 400 only, and display-sized headlines that dominate the viewport. The interface recedes so that full-bleed lifestyle and product photography can carry the brand — every UI element is a quiet frame for the image, never a competing surface. Typography is the primary interface: massive stacked words ('Strategy / Creative / Technology / Marketing'), tight tracking, and line-heights approaching 1.0 create a magazine-spread density. Components are minimal and text-driven — ghost links, thin underline rules, 3px corners, no shadows, no filled color buttons. The single chromatic accent (#2749ff) appears so rarely it functions more as a hyperlink convention than a brand color.
Color palette
accent
neutral
Pure White
#ffffffPage canvas, card surfaces, inverse text on dark blocks
Ink Black
#000000Primary text, primary borders, hairline rules, icon strokes, logo
Carbon
#262626Dark surface blocks, inverse badges, input fields on dark
Graphite
#484a4cFooter borders, subtle dark dividers, secondary dark UI
Steel
#686c6dSecondary body text, muted captions, low-emphasis borders
Fog
#a5a7a8Disabled borders, lowest-emphasis outlines
Ash
#dbdbdbLight dividers, icon borders, subtle field separators
Mist
#edededSoft surface wash behind cards and tags, ghost link fill, badge background
Smoke
#808080Mid-tone surface for secondary panels, muted button fills
Typography
Type scale
Major Second (1.125) · 16px basedisplay
48px · 400 · 1 · -1.92px trackingThe quick brown fox jumps
heading-lg
40px · 400 · 1.1 · -0.8px trackingThe quick brown fox jumps
heading
32px · 400 · 1.1 · -0.64px trackingThe quick brown fox jumps
heading-sm
24px · 400 · 1.1 · -0.48px trackingThe quick brown fox jumps
subheading
18px · 400 · 1.2 · -0.18px trackingThe quick brown fox jumps
body-md
16px · 400 · 1.2 · -0.16px trackingThe quick brown fox jumps
body
14px · 400 · 1.2 · -0.14px trackingThe quick brown fox jumps
text-13
13px · 400 · 1.2The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Suisse Intl
- Weights
- 400
- Sizes
- 12px, 13px, 14px, 16px, 18px, 24px, 32px, 40px, 48px
- Line height
- 1, 1.1, 1.2
- Letter spacing
- -0.04, -0.02, -0.01
Suisse Intl — detected in extracted data but not described by AI
Additional typeface
Suisse Int'l
- Weights
- 400
- Line height
- 1.00 (display), 1.10 (headings), 1.20 (body)
- Letter spacing
- -0.04em at 48px display, -0.02em at 24–40px headings, -0.01em at 14–18px body
- Fallback
- Inter, Helvetica Neue, Neue Haas Grotesk
Sole typeface across every context — navigation, body, display headlines, buttons, badges, inputs. The brand carries a single weight (400) and a single letterform language, creating typographic unity without hierarchy through weight. The tight line-heights (1.00–1.20) and negative tracking across all sizes make text feel architectural rather than comfortable.
Spacing & shape
Spacing
- Density
- compact
- Max width
- 1440px
- Section gap
- 60px
- Card padding
- 15px
- Element gap
- 5px
Border radius
cards
3pxpills
1440pxbadges
3pxinputs
3pxbuttons
3pxSpacing scale
2px3px4px5px6px7px8px10px11px12px15px20px29px30px40px60px70px80px105px120pxGuidelines
Do
- Use Suisse Int'l at weight 400 exclusively — never introduce bold, semibold, or italic variants to create hierarchy; use size and tracking instead
- Set display headlines at 40–48px with line-height 1.0 and letter-spacing -0.04em
- Anchor every interactive element with a 1px Ink Black underline; do not add colored fills to indicate clickability
- Keep corner radii at 3px for all rectangles; use 1440px only for full-pill elements like round tags
- Let photography fill the viewport edge-to-edge with no border, shadow, or radius
- Maintain an achromatic palette: black, white, and the five-step gray scale (#262626 → #dbdbdb) for all UI surfaces
- Use the Mist (#ededed) fill for ghost elements that need subtle separation from white without introducing contrast
Don’t
- Do not add box-shadows to cards, buttons, or images — the system is deliberately shadowless
- Do not introduce additional accent colors beyond Signal Blue (#2749ff), and use it sparingly
- Do not use bold or semibold font weights — weight 400 across the entire typographic system is the signature
- Do not add colored fill backgrounds to buttons; the system uses ghost (Mist fill) and text-link patterns only
- Do not round corners beyond 3px on rectangles — sharp or near-sharp geometry defines the brand
- Do not apply gradients, glows, or decorative color washes to surfaces or text
- Do not increase line-height above 1.2 for body text or above 1.1 for headings — tight leading is a core visual identifier
Components
Minimal Top Navigation
Primary site navigationWhite background, 0 border. Logo flush-left in Ink Black at 14px. Centered nav links (Work, Services, Insights, Partners, Contact) at 14px weight 400 Ink Black with tight 5–10px row gaps. Right-aligned utility icons (bell, chat) at 16px. No background fill, no border, no shadow. Padding 12px vertical.
Underline Text Link
Inline navigation and content linksInk Black 14–18px, 1px solid Ink Black bottom border applied directly to the text baseline. No background. 3px corner radius does not apply. The underline is the entire visual treatment — no color shift on hover, no fill change.
Ghost Link Pill
Secondary call-to-actionMist (#ededed) background fill, 3px radius, 10px vertical / 15px horizontal padding, 14px Suisse Int'l weight 400 Ink Black. No border. Appears as a subdued alternative to text links — used for actions like 'About Our Services' and search affordances.
Full-Bleed Hero Frame
Opening viewportEdge-to-edge photographic background covering the entire viewport. Headline overlays bottom-left in white at 40–48px display weight, tracking -0.04em, line-height 1.0. Small brand tag in 12px white above the headline. No gradient overlay — the image provides its own contrast.
Project Card (Editorial Grid)
Portfolio tileNo visible card chrome. Tall image at native aspect (roughly 3:4) with no border and no radius. Brand name overlaid top-left in white at 18–24px, weight 400, tracking -0.02em. Caption sits in a 3-column grid below the image at 12–13px secondary text color.
Stat Block Row
Quantitative proof pointsInline horizontal arrangement. Large number at 24–32px Ink Black weight 400, descriptor at 12–14px Steel (#686c6d). 3px or 5px gap between number and label. No dividers between stat groups, no background.
Service Word Stack
Service taxonomy displayVertically stacked words (Strategy / Creative / Technology / Marketing) at 40–48px display, weight 400, line-height 1.0, Ink Black, letter-spacing -0.04em. Each word on its own line. Section label 'SERVICES' above in 12px tracking-out or small-caps style. No decoration, no icons — typography alone carries the hierarchy.
Stats Inline Annotation
Supporting data labels12–13px text in Steel (#686c6d), 3–5px from the metric value it describes. Used to qualify portfolio numbers and service descriptions.
Cookie Consent Panel
Privacy dialogFixed bottom-right, semi-transparent dark overlay (~rgba(0,0,0,0.55)) with white text and 3px radius. Three buttons: 'Accept All' (Ink Black fill, white text), 'Accept Selection' (outlined white border, white text), 'Reject All' (outlined white border, white text). 10px 15px button padding, 3px radius.
Dark Featured Block
Highlighted partner calloutCarbon (#262626) background, white text. Small green certification badge or status icon top-left at 12px. Body copy in 14px white. This is the only block where the palette inverts — used sparingly for high-priority partner or partner-program content.
Search Field (Header)
Quick content searchNo visible border. White background, 14px placeholder text in Steel. Magnifying-glass icon at 14px Ink Black. Inline with the navigation row, roughly 280px wide. 3px corner radius only if a background fill is applied.
Notification Badge
Status indicatorMist (#ededed) or Carbon (#262626) background, 12px Ink Black or white text, 3px radius, 3–5px vertical padding. Appears as a small pill adjacent to utility icons.
Input Field
Form inputNo border. 1px bottom border in Ash (#dbdbdb) or no rule at all. 14px Ink Black text, 1.2 line-height. Placeholder in Steel. 3px radius if the field uses a fill. Generous internal padding (10–15px vertical).
Surfaces & elevation
Level 1
Canvas
#ffffffPage background, default card surface
Level 2
Mist Wash
#edededSubtle elevated card, badge pill, ghost link fill
Level 3
Ash Line
#dbdbdbHairline dividers, low-contrast separators
Level 4
Smoke Panel
#808080Mid-tone overlay, muted secondary surface
Level 5
Carbon Block
#262626Dark inverse surface for featured blocks and badges
The design is intentionally shadowless. All separation between elements is achieved through typographic hierarchy, 1px borders in Ash or Ink Black, and subtle Mist (#ededed) surface fills — never through drop shadows, blur, or stacking effects. This creates the flat editorial-gallery feel where photographs appear printed onto the page rather than floating above it.
Layout & imagery
Layout
Editorial, magazine-inspired layout with three core patterns. The hero is a full-viewport image with headline overlaid in the bottom-left corner, no gradient or scrim. Below, a three-column grid presents portfolio work as equally-weighted image tiles with overlaid brand names — the grid is uniform with no varying tile sizes. The services section uses a two-column asymmetric split: left column holds the vertically stacked display words and section label, right column holds a single paragraph of body copy and a small image collage. Vertical rhythm is consistent at roughly 60px between sections. Navigation is a single minimal row at the top — no sticky behavior visible, no sidebar, no mega-menu. Content is centered within a max-width of 1440px but frequently breaks to full-bleed for hero and image sections.
Imagery
Full-bleed editorial photography dominates the visual language. Imagery is high-quality lifestyle and product photography: extreme close-ups of watches on skin, hands holding objects, furniture details, fashion in nature. All images are sharp, high-resolution, and unframed — they bleed to the viewport edges with no border, radius, or padding. The photographic style is warm-toned, naturally lit, and intimate. There is no illustration, no abstract graphics, and no iconography beyond simple line-based UI icons. The images function as the primary content and emotional carrier; UI is purely structural.
Design notes
Agent Guide
## Quick Color Reference - text: #000000 (primary), #686c6d (secondary) - background: #ffffff (canvas), #ededed (soft surface), #262626 (dark block) - border: #000000 (strong), #dbdbdb (light), #ededed (subtle) - accent: #2749ff (rare link/hover accent only) - primary action: no distinct CTA color ## Example Component Prompts 1. **Full-bleed hero section**: Viewport-height photographic background with no overlay. Headline at 48px Suisse Int'l weight 400, white, letter-spacing -1.92px, line-height 1.0, positioned bottom-left with 40px padding. Small 12px white tag above headline. 2. **Service word stack**: Left column. Small 12px 'SERVICES' label in #686c6d above. Then four words stacked vertically: 'Strategy', 'Creative', 'Technology', 'Marketing' — each at 48px Suisse Int'l weight 400, #000000, line-height 1.0, letter-spacing -1.92px. No decoration between words. 3. **Project portfolio card**: Tall image (3:4 aspect) filling its grid cell, no border, no radius. Brand name overlaid top-left in white at 18px Suisse Int'l weight 400, letter-spacing -0.36px. Caption row below image: 13px #686c6d text. 4. **Ghost link button**: 14px Suisse Int'l weight 400, #000000 text, #ededed background fill, 3px corner radius, 10px vertical and 15px horizontal padding. No border. Used for secondary navigation like 'About Our Services'. 5. **Stat annotation row**: Inline group — large number at 24px #000000, then 3px gap, then descriptor at 13px #686c6d. Example: '750+ Shopify sites launched'. No dividers, no background, no card wrapping.
Similar brands
Pentagram
Same editorial gallery approach — massive type, achromatic palette, full-bleed photography, and zero reliance on colored UI to carry the brand
Locomotive
Shared Swiss-typographic discipline with tight tracking, single-weight headlines, and minimal interface chrome that lets imagery lead
Hugo & Marie
Agency sites that treat the portfolio as a printed magazine — high-contrast photography, stacked display words, and ghost-text link patterns
Bureau Cool
Achromatic luxury aesthetic with one neutral grotesque, 3px radii, and an editorial rhythm of image-then-statement
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
