Rust Hearth
#892500Brand logo, active navigation state, section underlines, the only chromatic punctuation in the interface — carries identity weight wherever it appears
HNST Studio
letsbehonest.euWebsite preview
The design language
HNST Studio speaks in a warm, earthy editorial language: bone-white canvases tinted with raw silk cream, a single rust accent that anchors every interactive moment, and gallery-style uppercase typography that lets the photography breathe. The site treats full-bleed fashion imagery as the primary surface — text and chrome are whisper-thin, positioned like museum placards around the visual work. Two type families divide labor cleanly: Raleway handles UI, navigation, and body copy in humanist proportions, while Poppins takes display headings with extreme letter-spacing, turning section labels like 'TRENDING' into printed gallery signage. Components are stripped to essentials — thin borders, soft sand-toned badges, charcoal ink for action, no shadows, no gradients — so the rust accent lands with editorial gravity against the otherwise neutral palette.
Color palette
brand
accent
Blush Whisper
#ea9195Secondary chromatic accent for hover states, soft tags, and paired decorative elements — never standalone, always supporting Rust Hearth
neutral
Linen
#ffffffNeutral form states, badge text, and quiet UI feedback where color should stay understated. Do not promote it to the primary CTA color
Raw Silk
#f9f6f2Warm off-white page background — replaces sterile pure white to give the site a tactile, natural-fiber feel
Sand Plaster
#eee5d9Card backgrounds, badge fills, soft surface lifts — the warm secondary tier that differentiates containers from the page canvas
Charcoal Ink
#0e0e0ePrimary text, navigation text, filled action buttons, dark hero overlays — near-black reads softer than pure black against the warm neutrals
Stone
#868686Mid-gray for hairline borders, dividers, secondary metadata, inactive UI scaffolding — the dominant structural neutral
Ash
#b7b7b7Lighter borders, muted helper text, disabled states, subtle list separators
Frost
#d7d7d7Faintest divider lines on links, barely-there separators
Typography
Type scale
Minor Third (1.2) · 14px basedisplay
62px · 700 · 1.15 · 9.55px trackingThe quick brown fox jumps
heading-sm
20px · 600 · 1.2 · 1.82px trackingThe quick brown fox jumps
text-16
16px · 700 · 1.25The quick brown fox jumps
text-15
15px · 400 · 1.67The quick brown fox jumps
text-14
14px · 400 · 1.79The quick brown fox jumps
text-13
13px · 600 · 1.15The quick brown fox jumps
text-12
12px · 600 · 4.08The quick brown fox jumps
caption
11px · 500 · 1.25 · 1.69px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Raleway
- Weights
- 400, 600, 700
- Sizes
- 12px, 13px, 14px, 15px, 16px
- Line height
- 1.67 (body), 1.70, 1.20 (tight UI)
- Letter spacing
- 0.1920em, 0.2310em
- Fallback
- Montserrat, Lato, Nunito Sans
Primary UI and body typeface — humanist sans with elegant terminals. Used for navigation, body copy, links, buttons, and footer. The 600 weight handles button labels and nav items; 400 carries running text with generous 1.67–1.79 line-height for editorial readability
Additional typeface
Poppins
- Weights
- 500, 600, 700
- Sizes
- 11px, 13px, 16px, 20px, 62px
- Line height
- 1.15 (display), 1.20, 1.25, 2.27 (small caps labels)
- Letter spacing
- 0.154em at 62px, 0.091em at 20px, 0.065em at 16px, 0.050em at 11–13px
- Fallback
- Montserrat, Outfit, Space Grotesk
Display and section-heading typeface — geometric sans used for hero-scale section labels like 'TRENDING' at 62px. Extreme letter-spacing (0.154em at display, 0.091em at 20px) transforms headlines into printed gallery signage, the signature typographic moment of the brand
Spacing & shape
Spacing
- Density
- comfortable
- Max width
- 1200px
- Section gap
- 75-170px
- Card padding
- 42px
- Element gap
- 15px
Border radius
cards
0pxpills
10pxbadges
0pxbuttons
0pxSpacing scale
4px5px9px10px12px15px20px23px40px42px45px75px114px170px185pxGuidelines
Do
- Use Rust Hearth (#892500) exclusively for the brand wordmark, active nav states, and section underlines — let it carry full identity weight as the only chromatic accent
- Apply Poppins 700 at 62px with 0.154em letter-spacing for all display section headings to maintain the gallery-label signature
- Keep all component corners sharp (0px radius) except pill filter tags, which use 10px — this single exception is intentional
- Set body text at Raleway 400, 15px, line-height 1.70 for editorial readability on the warm Raw Silk canvas
- Use Sand Plaster (#eee5d9) for badge and tag fills to create soft warm-tinted containers that feel like craft paper
- Separate sections with full-bleed photographic bands rather than decorative dividers — the imagery is the structural element
- Maintain 1px Stone (#868686) hairline borders for all structural separation; never use shadows to imply elevation
Don’t
- Do not introduce additional accent colors beyond Rust Hearth and Blush Whisper — the 1% colorfulness is the brand
- Do not use rounded corners on cards, buttons, or images — sharp edges are essential to the editorial-print identity
- Do not add drop shadows or elevation effects to any component — the design system is deliberately flat
- Do not use pure white (#ffffff) as the page background — always use Raw Silk (#f9f6f2) to preserve the warm, natural-fiber atmosphere
- Do not set body text below 14px or above 17px — the type scale is narrow and intentional for editorial reading comfort
- Do not apply tight letter-spacing to display headings — the extreme tracking (0.154em) at 62px is a signature, not a mistake
- Do not overlay text, buttons, or UI chrome on top of hero photography — let the image breathe without interference
Components
Top Navigation Bar
Primary site header with brand mark and section linksFull-bleed bar, 10–15px vertical padding, no shadow. Rust Hearth (#892500) lowercase wordmark 'hnst' at ~32px Raleway 700 left-aligned. Right side: uppercase nav links (HOME, SUSTAINABILITY, PRESS, SHOP) in Raleway 600 at 12–13px with 0.192–0.231em letter-spacing and Stone (#868686) color, 15px horizontal gap. Active state switches text to Rust Hearth. Thin Stone hairline border-bottom separates from content.
Hero Carousel
Full-viewport lifestyle photography opening the homepageFull-bleed image at 100vw width, ~80vh height, no radius. Left/right arrow controls rendered as thin chevrons in semi-transparent white, 48px tap targets, vertically centered. Four-dot pagination indicator centered at the bottom in white with the active dot at full opacity. No headline overlay — the photograph carries the message.
Section Display Heading
Gallery-label style title for content sectionsPoppins 700 at 62px, letter-spacing 9.55px (0.154em), line-height 1.15, color Charcoal Ink (#0e0e0e). Centered or left-aligned depending on context. This is the signature type moment — the extreme tracking makes 'TRENDING' read as a printed wall label, not a web heading.
Filled Action Button
Primary call-to-action in Charcoal InkCharcoal Ink (#0e0e0e) background, Linen (#ffffff) text, Raleway 600 at 13–14px, uppercase with 0.192em letter-spacing. Padding 15px horizontal, 42px to 45px on wider variants. Zero radius — the sharp corners reinforce the editorial gallery aesthetic.
Ghost Navigation Button
Secondary or inactive link styled as borderless uppercase textNo background or border. Raleway 600 at 12–13px, uppercase, letter-spacing 0.192em, color Stone (#868686). Hover transitions to Charcoal Ink (#0e0e0e). Used in the nav bar and footer link clusters.
Editorial Image Block
Large product or story photograph in a content sectionFull-width or right-column image with zero radius, no border, no shadow. Floating at the edge of the container or centered. Sits on Raw Silk (#f9f6f2) or Linen (#ffffff) canvas. The image itself is the component — no frame or caption chrome around it.
Sand Badge
Soft warm-toned tag for metadata or statusSand Plaster (#eee5d9) background, no border, zero radius. Raleway 600 at 12–13px, Charcoal Ink text, padding 8–10px horizontal, 4–6px vertical. Used for small contextual labels, timestamps, and category markers.
Info Icon Button
Small floating circular button for secondary actionsCharcoal Ink (#0e0e0e) fill, white lowercase 'i' glyph at 16px, 40×40px square with zero radius. Fixed-position utility button (info panel toggle, cart preview). High contrast against the warm canvas.
Carousel Arrow
Slide navigation control for the hero and product carouselsMinimal chevron icon, 24px, white at 70% opacity over imagery, Charcoal Ink on light backgrounds. No background shape — the arrow floats directly on the image. 48px invisible hit area for touch.
Section Divider Band
Full-bleed photographic strip separating content sections100vw width, ~20–30vh height, zero radius, edge-to-edge image. Functions as a visual palate cleanser between text blocks. Examples: the industrial textile-mill photograph and the leather/texture close-up that appear as horizontal bands between editorial sections.
List Item with Marker
Bulleted or numbered list inside editorial copyRaleway 400 at 14–15px, line-height 1.70, color Charcoal Ink. 9px horizontal gap between marker and text. Stone (#868686) thin left-border on the list container at 1px. No custom bullet glyphs — relies on default markers or small rust-colored dots when brand-styled.
Pill Filter Tag
Rounded interactive tag for filtering product listsThe only rounded component in the system at 10px radius. Sand Plaster (#eee5d9) or Linen (#ffffff) background with 1px Stone (#868686) border. Raleway 600 at 12–13px, 10–15px horizontal padding, 4–6px vertical. Active state: Rust Hearth border and text.
Footer Link Cluster
Organized link groups in the site footerMulti-column layout, Raleway 400 at 14px for links, Stone color, 15px vertical gap. Column headers in Raleway 600 uppercase at 12px with 0.192em letter-spacing. Thin Stone top-border separates footer from content. No background color change — footer sits on Raw Silk canvas.
Surfaces & elevation
Level 0
Raw Silk
#f9f6f2Page canvas — warm off-white base for the entire site
Level 1
Linen
#ffffffCard surfaces, product panels, and elevated content blocks
Level 2
Sand Plaster
#eee5d9Badge fills, soft tag backgrounds, warm-toned containers
Level 3
Charcoal Ink
#0e0e0Dark inverted sections, navigation bar, filled action buttons
The design deliberately avoids shadows entirely. Elevation is communicated through surface color shifts (Raw Silk canvas → Linen card → Sand Plaster badge) and 1px hairline borders in Stone, never through drop shadows. This keeps the interface feeling like a printed editorial spread rather than a software product — flat, tactile, and photography-first.
Navigation Bar
none — separated from content by a 1px Stone (#868686) bottom border only
Product Cards
none — flat surfaces with thin Stone hairline borders or no border at all
Buttons
none — solid fill provides all visual weight
Info Icon Button
none — Charcoal Ink solid fill is the visual anchor
Layout & imagery
Layout
The page follows a full-bleed editorial rhythm: a full-viewport hero photograph opens the experience, followed by asymmetric content sections where a large image occupies the right half and empty Raw Silk canvas holds the left. Sections are separated by full-bleed photographic bands that act as visual breath. Headlines are centered or left-aligned with extreme letter-spacing, reading as gallery wall text. The grid is single-column or two-column asymmetric, never multi-column card grids. Navigation is a minimal top bar — no sidebar, no mega-menu, no sticky header. Content density is spacious: 75–170px between sections, generous whitespace around all text blocks. The overall feel is of a curated zine or museum catalog, not a retail catalog.
Imagery
Editorial fashion photography dominates the visual language. The hero features intimate, warmly lit studio portraits of models in relaxed poses against neutral backdrops — high-key with golden undertones, no harsh shadows. Interior editorial sections use industrial and craft-process imagery: textile-mill machinery, raw denim, leather close-ups with warm directional lighting. All photography is full-bleed, sharp-cornered, and unmasked — no rounded edges, no overlays, no decorative frames. The treatment is always cinematic and tactile, favoring material texture (denim weave, leather grain, fabric folds) over product-pack shots. No illustrations, no icons beyond simple UI glyphs, no 3D renders.
Design notes
Agent Guide
**Quick Color Reference** - Text: #0e0e0e (Charcoal Ink) - Background: #f9f6f2 (Raw Silk) - Border: #868686 (Stone) - Accent: #892500 (Rust Hearth) - Card/badge fill: #eee5d9 (Sand Plaster) - Inverted text: #ffffff (Linen) - primary action: #0e0e0e (filled action) **3-5 Example Component Prompts** 1. **Top Navigation Bar**: Full-bleed bar, Raw Silk (#f9f6f2) background, 1px Stone (#868686) bottom border. Left: 'hnst' wordmark in Raleway 700, 32px, Rust Hearth (#892500). Right: nav items (HOME, SUSTAINABILITY, PRESS, SHOP) in Raleway 600, 12px, uppercase, letter-spacing 0.192em, Stone (#868686) color, 15px horizontal gap. Active item in Rust Hearth. 2. **Section Display Heading**: 'TRENDING' set in Poppins 700, 62px, letter-spacing 9.55px (0.154em), line-height 1.15, color Charcoal Ink (#0e0e0e). Centered. No underline, no decoration — the letter-spacing alone creates the gallery-label presence. 3. **Sand Badge**: Sand Plaster (#eee5d9) background, zero radius, no border. Raleway 600, 12px, Charcoal Ink (#0e0e0e) text, padding 10px horizontal and 5px vertical. Used for small contextual labels like 'New Arrival' or 'Limited Edition'. 4. **Editorial Image Block**: Full-width photograph, zero radius, no border, no shadow, no overlay. Sits on Raw Silk (#f9f6f2) canvas. Image fills the container edge-to-edge. Optional caption in Raleway 400, 13px, Stone (#868686) below. 5. **Ghost Navigation Link**: No background, no border. Raleway 600, 13px, uppercase, letter-spacing 0.192em, color Stone (#868686). On hover, transitions to Charcoal Ink (#0e0e0e). 15px horizontal spacing between adjacent links.
Typography Personality
The two-font system is the most distinctive structural choice. Raleway does the quiet work — navigation, body, buttons, forms — in humanist proportions that feel crafted rather than engineered. Poppins does the loud work once per section, at 62px with 0.154em tracking, turning a single word like 'TRENDING' into a physical sign on a gallery wall. Never let Poppins appear at body sizes; never let Raleway appear at display sizes. The contrast between Raleway's 1.67 body line-height and Poppins' 1.15 display line-height is the tension that gives the typography its voice.
Spacing Rhythm
Vertical rhythm operates on three tiers: 15px for intra-component gaps (between nav items, list items, badge internals), 42–45px for component-level padding (button interior, card content breathing room), and 75–170px for section-to-section breathing. Never compress below 15px between siblings — the comfortable density is non-negotiable. Section transitions should always include a full-bleed image band as a visual palate cleanser, not just whitespace.
Similar brands
Patagonia
Same warm earthy neutral palette with a single rust/burnt-orange brand accent, photography-first editorial layout, and anti-corporate sustainable-fashion tone
Eileen Fisher
Shared commitment to full-bleed lifestyle photography, generous whitespace, cream/off-white canvases, and a minimal sans-serif typography system
Toast (toa.st)
Identical slow-fashion editorial language — warm bone-white backgrounds, sharp-cornered components, no shadows, and a single chromatic accent used sparingly
Studio Nicholson
Same gallery-catalog approach with wide-tracked uppercase section headings, asymmetric image+text layouts, and a restrained near-monochrome palette
Asket
Shared minimal navigation, single accent color philosophy, body-text-forward type system, and photography that fills the viewport without decorative chrome
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
