Terracotta Blush
#efccbeProject card background — warm content fill, not a UI accent
Clase bcn
clasebcn.comWebsite preview
The design language
Clase bcn is an editorial gallery on a white wall: a branding agency whose portfolio reads like a museum catalogue. The interface is almost invisible — text, hairline dividers, and full-bleed project imagery do all the work. A single sans-serif (Suisse Int'l) at one weight (400) carries every element, from navigation labels to oversized project titles. Whitespace is generous and structural: project cards span the full viewport with titles and subtitles overlaid directly on photography. The only interactions are text links with arrow indicators; there are no buttons, no fills, no shadows, no decorative UI chrome. Color appears as content — individual project case studies bring their own palettes as background fills — while the chrome stays achromatic and quiet.
Color palette
accent
Verdant
#43d491Project card background — vivid content fill, not a UI accent
neutral
Paper White
#ffffffPage canvas, card surface base, text on dark cards
Ink Black
#000000Primary text, hairline borders, nav labels — the structural anchor of every element
Carbon
#0a0a0aSecondary text and deep surfaces where pure black reads too harsh
Concrete
#939393Muted navigation labels, secondary link text, inactive nav state
Ash
#aaaaaaTertiary link borders and subdued annotation text
Plaster
#e8e8e8Subtle surface division, alternating card backgrounds
Sumi
#0a0000Near-black project card background — reads as deepest neutral
Slate Night
#262a36Project card background — slightly cool dark, content-driven not UI
Typography
Type scale
Major Second (1.125) · 45px baseheading
45px · 400 · 1.11The quick brown fox jumps
subheading
28px · 400 · 1.21The quick brown fox jumps
caption
24px · 400 · 1.17The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
SuisseIntl-Regular
- Weights
- 400
- Sizes
- 24px, 28px, 45px
- Line height
- 1.11, 1.17, 1.21, 1.25, 1.79, 2.01, 2.44
SuisseIntl-Regular — detected in extracted data but not described by AI
Additional typeface
Suisse Int'l
- Weights
- 400
- Line height
- 1.11, 1.17, 1.21, 1.25, 1.79, 2.01, 2.44
- Fallback
- Inter, Söhne, Neue Haas Grotesk, Helvetica Now
Single typeface at a single weight carries the entire interface — navigation, body, and display. The refusal to use a bold or italic weight forces hierarchy through size, line-height, and whitespace alone. The variable line-heights (1.11 for tight display stacks, 1.79–2.44 for body) show that this one weight is stretched across very different densities.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 4px
- Section gap
- 100px
- Card padding
- 20px
- Element gap
- 20px
Border radius
cards
0pximages
0pxbuttons
0pxSpacing scale
20px25px100pxGuidelines
Do
- Use Suisse Int'l (or a neo-grotesque substitute like Inter) at weight 400 for every element — no bold, no italic, no second family
- Let project imagery and project color fills carry all visual variety; keep all UI chrome in #000000 and #ffffff
- Use 20px padding consistently for all text-block insets (navigation, card text, footer)
- Separate projects with 100px vertical breathing room — let each card exist in its own visual silence
- Mark every interaction as a plain text link with a → arrow, never as a filled or outlined button
- Scale hierarchy through font size and line-height only — 24px for body, 28px for subtitles, 45px for display
- Keep border-radius at 0 across all elements — corners are sharp, the page is a grid
Don’t
- Don't introduce buttons, pills, chips, or any filled interactive component — this system has no buttons
- Don't add shadows, gradients, or border effects to cards or images — surface depth comes from color contrast alone
- Don't use bold or semibold weights — weight 400 is the only voice; hierarchy is size-only
- Don't use #43d491, #efccbe, or #262a36 as UI accents — they belong only inside project card backgrounds
- Don't add a logo mark, wordmark treatment, or branded icon — the word 'Cl' in the nav is the entire identity mark
- Don't constrain the layout to a max-width container — project cards must be full-bleed
- Don't add hover animations, transitions, or micro-interactions — the site reads as static, like a printed catalogue
Components
Top Navigation Bar
Minimal text-only site headerTransparent background sitting directly on the page canvas. No logo mark, no fill, no border-bottom. Left side: five text labels (Cl, Projects, Studio, Contact, Tips) separated by ~20px gaps, 24px Suisse Int'l, #000000 active and #939393 inactive. Right side: language selector ('English') in the same treatment. No sticky behavior, no shadow, no padding beyond vertical breathing room.
Statement Headline
Opening page declarationA single block of body-length text set at the largest type size (45px), line-height 1.11, color #000000, left-aligned. No separate label, no eyebrow, no CTA below — the statement IS the hero. Occupies the top quarter of the page with generous margin below before the first project card.
Full-Bleed Project Card
Portfolio case study entryEach project spans the full viewport width with zero border-radius. A background fill (project-specific: #43d491, #0a0000, #efccbe, #262a36, or a photograph) covers the card. Overlay text sits in the top-left corner with 20px padding from all edges: project name at 28px line-height 1.21 #000000, subtitle at 24px line-height 1.17 #000000, then a 'See the case →' text link. No hover state, no shadow, no border — the card edge is defined purely by where the next card begins.
Photographic Project Card
Image-led portfolio entrySame structural treatment as the colored Project Card but the background is a full-bleed photograph. Text overlay uses the same 20px padding, 28px title, 24px subtitle, and text link. Typography remains #000000 on light imagery; white or near-black text on dark imagery. No gradient overlays or scrims — readability is expected from image choice.
Text Link with Arrow
The only interactive element in the systemPlain text label followed by a right arrow glyph (→). 24px Suisse Int'l weight 400, color #000000. No underline, no button fill, no border, no padding. Spacing between label and arrow is tight. This is the universal interaction pattern — it replaces every conventional button across the site.
Footer
Minimal page closerSame 20px horizontal padding as project cards. Contains text links and copyright in 24px #000000. No social icons, no newsletter form, no decorative elements. The footer's job is to be quiet and invisible until you scroll there.
Surfaces & elevation
Level 0
Canvas
#ffffffDefault page background and card base for light projects
Level 1
Plaster
#e8e8e8Subtle off-white for content sections that need tonal contrast
Level 2
Carbon
#0a0a0aDeepest project card fill — white text sits on top
The system has no shadows. Depth is communicated entirely through color contrast between adjacent surface fills (white canvas → photographic card → colored card → dark card) and through generous vertical whitespace between sections. A 1px black border is the strongest structural device in use, and even that is rare.
Layout & imagery
Layout
Full-bleed layout with no max-width constraint. The page is a vertical stack of full-viewport-width project cards separated by whitespace, preceded by a minimal text-only navigation and a single oversized statement headline. The top nav is a single horizontal row: five left-aligned links, one right-aligned language label. The statement headline sits at the top of the content area, left-aligned, occupying roughly 15% of the page height. Below it, project cards stack vertically — each card fills the viewport width, contains its title/subtitle/link in the top-left corner with 20px inset, and flows directly into the next card with no gap or divider. There are no sidebar, no multi-column grids, no card-of-cards arrangements. The rhythm is: statement → project → project → project → footer, with each project given equal visual weight.
Imagery
Photography is full-bleed and architectural — gallery interiors, product shots on neutral backgrounds, campaign artwork. Images are raw-edged with no rounded corners, no shadows, and no masks. The treatment is documentary, not stylized: subjects (museum spaces, furniture, concert halls) are presented at their natural aspect ratio, cropped only by the viewport. There are no people, no lifestyle scenes, no stock-style compositions. Illustration is absent; the only graphic element is the Kave Home chair sketch, which is hand-drawn line work on white — consistent with the editorial-print language. Icons are absent; navigation is text-only.
Design notes
Agent Guide
## Quick Color Reference - text: #000000 - background: #ffffff - border: #000000 - muted text: #939393 - project card surface: project-specific (no fixed UI accent) - primary action: no distinct CTA color ## Example Component Prompts No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 2. **Full-Bleed Project Card (Photographic)** — 100vw width, viewport-tall, no border-radius. Background is a full-bleed photograph. Top-left inset of 20px contains: project name at 28px line-height 1.21 #000000, subtitle at 24px line-height 1.17 #000000, then a 'See the case →' text link at 24px #000000. No overlay, no scrim, no border. 3. **Full-Bleed Project Card (Color Fill)** — 100vw width, ~60vh tall, no border-radius. Background fill is a single solid color (e.g. #43d491, #efccbe, #262a36, or #0a0000). Same 20px top-left text inset as photographic cards. Text color adjusts: #000000 on light fills, #ffffff on dark fills. 4. **Text Link with Arrow** — 24px Suisse Int'l weight 400, #000000, followed by a → arrow glyph at the same size. No underline, no button background, no border, no padding. The arrow has ~4px space between it and the label text. This is the system's only interaction component. 5. **Top Navigation** — Transparent row on #ffffff, no border-bottom, no background fill. Left group: 'Cl · Projects · Studio · Contact · Tips' at 24px #000000 separated by ~20px gaps, with 'Cl' as the active/brand label. Right group: 'English' at 24px #939393. No logo, no icons, no sticky behavior.
Similar brands
Pentagram
Same editorial-portfolio language — full-bleed project imagery, minimal text-only navigation, no buttons or decorative UI chrome
Manual (manualcreative.com)
Single-weight sans-serif at large display sizes, project cards as full-viewport images with overlaid text, zero interaction chrome
Hasselblad Foundation
Museum-catalogue restraint — generous whitespace, single typeface, photography as the primary content, text links with arrows as the only affordance
Studio Dumbar
Dutch-design agency portfolio discipline: monochrome UI, project case studies as full-bleed images, minimal nav, no decorative elements
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
