Void
#000000Page canvas, hero background, footer background — the absolute ground everything else sits on or within
CHAIBOY
wearechaiboy.comWebsite preview
The design language
CHAIBOY presents a black-box gallery aesthetic: a single dark canvas where nearly everything is typographic and almost nothing is decorative. The interface behaves like a museum wall — one large monochrome photograph dominates the viewport, framed by hairline white rules and small uppercase navigation. Color is rejected as a tool; hierarchy is built entirely through type size, generous negative space, and the stark contrast of white on black. The Neue Haas Grotesk 55 Roman at weight 400 only, combined with the OpenType 'case' feature, produces a disciplined all-caps voice that reads more like a printed art monograph than a DTC tea site. Every UI element — nav links, buttons, cart, footer — is a text fragment. There are no fills, no shadows, no gradients, no rounded chrome; the single 4px radius is the system's only concession to softness.
Color palette
neutral
Carbon
#131313Subtle surface variation from the page canvas — used as a near-identical lifted surface where one is needed without breaking the monochrome spell
Ash
#afafafSecondary text, muted labels, inactive input borders — a half-step between white and black for elements that must recede
Bone
#ffffffPrimary text, hairline rules, link and button borders, image borders — the only forward-facing tone, used with restraint as both type and geometry
Typography
Type scale
Major Second (1.125) · 16px basedisplay
54px · 400 · 0.89The quick brown fox jumps
subheading
18px · 400 · 1.27The quick brown fox jumps
body-sm
14px · 400 · 1.29The quick brown fox jumps
caption
11px · 400 · 1.11The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Neue Haas Grotesk TP 55 Roman
- Weights
- 400
- Sizes
- 11px, 14px, 18px, 54px
- Line height
- 0.89, 1.11, 1.27, 1.29
- Fallback
- Neue Haas Grotesk Text Pro, Inter, Helvetica Neue, Arial
- Features
- "case" on
Sole typeface for all interface text — navigation, body, headlines, buttons, footer. The exclusive use of weight 400 is a deliberate anti-hierarchy choice; scale and spacing do the work that weight normally would. The OpenType 'case' feature is enabled site-wide, giving all-caps small text properly designed uppercase parentheses, hyphens, and numerals instead of lowercase glyphs scaled up.
Spacing & shape
Spacing
- Density
- compact
- Section gap
- 60px
- Card padding
- 16px
- Element gap
- 5px
Border radius
tags
4pxcards
4pxinputs
4pxbuttons
4pxSpacing scale
1px2px4px5px6px7px8px9px10px15px16px42px51px60px78px90pxGuidelines
Do
- Use #000000 as the page background everywhere; let #131313 appear only when a true surface lift is needed without breaking the monochrome language.
- Set all interface text in Neue Haas Grotesk 55 Roman at weight 400 only, with font-feature-settings: 'case' on to keep all-caps forms typographically correct.
- Use only the four documented sizes — 11, 14, 18, 54 — to build hierarchy. No weights beyond 400.
- Use #ffffff for primary text, hairline rules, and the 1px borders that separate regions; use #afafaf only when a label must visibly step back.
- Keep all border-radius at 4px across buttons, cards, chips, and inputs — the system has one radius and it should not be overridden.
- Let product or editorial photography carry the visual weight; the chrome should be invisible. Frame hero imagery with a 1px white border on black.
- Separate major regions (announcement, nav, footer) with a 1px solid #ffffff hairline rule rather than background-color changes or padding alone.
Don’t
- Do not introduce any chromatic color — no brand accent, no semantic red/green/blue, no hover tint. The system is monochromatic by conviction.
- Do not use font-weight above 400, and do not add italic. Weight contrast is not available as a hierarchy tool.
- Do not use box-shadow, gradients, or glow effects. Surfaces are flat black; depth comes from hairline borders and photography only.
- Do not use border-radius larger than 4px. Pills, fully rounded shapes, and large curves are outside this system.
- Do not use backgrounds or fills on nav links, buttons in the main flow, or cart. The bordered chip is the only filled/bordered interactive shape, and it belongs only in the announcement bar.
- Do not underline links or change their color on hover. Text links are distinguished by position, context, and cursor only.
- Do not set type below 11px or use centered body copy. Small text is always uppercase, tight-leading, left-aligned in rows.
Components
Announcement Ticker Bar
Scrolling promotional strip across the top of every pageFull-bleed black bar at the very top, 1px solid #ffffff bottom border. Contains small repeating text blocks in Neue Haas Grotesk 11px weight 400, uppercase, white. Each text block may include a bordered CTA chip (4px radius, 1px white border, 5-7px vertical padding, 6-10px horizontal padding). Items are separated by inline 4-5px gaps.
Primary Navigation Row
Main site navigationTwo-line layout: brand wordmark 'CHAIBOY' left, nav links centered, cart right. Sits on a black canvas with a 1px white rule above and below. All text is 14px weight 400 uppercase, #ffffff. Nav links separated by 15-16px gaps. No background, no border, no fill — just text on black.
Text Link
All clickable navigation, footer, and inline referencesBare 14px uppercase white text. No underline, no color change. The only active affordance is the cursor. Spacing between links is 15-16px horizontal.
Bordered Chip Button
Promotional micro-CTA inside the announcement ticker4px border-radius, 1px solid #ffffff border, 5-7px padding top/bottom, 6-10px padding left/right. 11px weight 400 uppercase white text on black fill. Example shape: 'ORDER NOW' or 'SHOP NOW'.
Hero Photograph Frame
Full-bleed editorial image that defines the pageA single large monochrome photograph centered on the black canvas. Contained to roughly 60-70% of the page width, left/right gutters are pure void. 1px solid #ffffff border (72 instances of borderColor on images), creating a fine gallery-frame edge. No caption, no overlay, no gradient — the image is the entire content of the fold.
Footer Link Bar
Bottom-of-page legal and contact linksSingle horizontal row on black, top edge marked by a 1px white rule. Left side: TERMS & CONDITIONS, PRIVACY POLICY, CONTACT, INSTAGRAM at 11-14px weight 400 uppercase white. Right side: NEWSLETTER link and a local time display (e.g. '22:50'). Gaps between links are 4-6px.
Cart Link
Shopping bag entry point in the navRight-aligned in the primary nav row. 14px uppercase weight 400 white text reading 'CART'. No icon, no badge, no fill — the word alone is the affordance.
Brand Wordmark
Logo lockup in the top-left of the navPlain text 'CHAIBOY' in Neue Haas Grotesk 14-18px weight 400 uppercase, #ffffff. No symbol, no mark, no decoration. Acts as the home link.
Surfaces & elevation
Level 0
Void
#000000Base page canvas — every screen begins here
Level 1
Carbon
#131313Near-identical lifted surface for the rare case where a region must differ from the base without breaking the monochrome field
Level 2
Ash
#afafafStepped-back typographic surface — secondary text and inactive input borders that need to read but not compete
Level 3
Bone
#ffffffForward-facing surface — primary text, hairline rules, and the 1px frame around imagery and bordered chips
No shadows, no glow, no layered surfaces. The system intentionally avoids all depth cues because the visual hierarchy is carried entirely by typographic scale, generous negative space, and the 1px white hairline that separates the few regions. A raised element in this system is simply a white rule above and below it.
Layout & imagery
Layout
Full-bleed, centered, and austere. The page is one continuous black canvas with no max-width container; regions are separated by 1px white hairline rules rather than by background-color bands. The hero is a single large monochrome portrait photograph, centered horizontally and sized to roughly 60-70% of the page width, with deep black gutters on either side. Above the hero: a thin announcement ticker, then a two-line nav with the wordmark left, centered links, and cart right. Below the hero: a single footer row with legal links left and newsletter/time right. Vertical rhythm is set by hairline rules and 60px section gaps, not by alternating background colors. Grid: no multi-column product grid or card layout — this is a brand and editorial surface, not a catalog page.
Imagery
A single large black-and-white editorial photograph carries the entire visual load of the page. The subject is a portrait — a model with a product box balanced on her head — shot in high-contrast monochrome against a soft gray background, contained in a centered frame roughly 60-70% of the page width, edged by a 1px white border that reads as a gallery frame. Treatment: high-key studio lighting, sharp focus, no color, no lifestyle context — the object and the subject are the art. No product photography, no illustrations, no icons, no 3D renders, no abstract graphics. Imagery is sparse, deliberate, and editorial.
Design notes
Agent Guide
Quick Color Reference: - text: #ffffff - background: #000000 - border: #ffffff (1px hairlines) - muted text: #afafaf - accent: none — the system is monochromatic - primary action: no distinct CTA color Example Component Prompts: 1. Create the primary nav row: black #000000 background, 1px solid #ffffff top and bottom rules. Left: 'CHAIBOY' wordmark in 14px Neue Haas Grotesk weight 400 uppercase #ffffff. Center: nav links BLENDS, COCKTAILS, VALUES, STUDIO at 14px weight 400 uppercase #ffffff, 15px gaps. Right: 'CART' link at 14px weight 400 uppercase #ffffff. No fills, no borders on the links themselves. No distinct primary action color was observed; use the extracted neutral button treatments instead of inventing a filled CTA color. 3. Create the hero photograph frame: centered on the #000000 page canvas, constrained to roughly 60% of the page width, 1px solid #ffffff border on all sides. The image is a black-and-white high-contrast portrait. No caption, no overlay, no gradient — just the framed photograph on void. 4. Create the footer link bar: #000000 background, 1px solid #ffffff top border. Left row at 11-14px weight 400 uppercase #ffffff: TERMS & CONDITIONS, PRIVACY POLICY, CONTACT, INSTAGRAM with 4-6px gaps. Right row: NEWSLETTER link and a time string (e.g. '22:50') in the same treatment. 5. Create a bordered chip button: #000000 background, 4px border-radius, 1px solid #ffffff border, 7px padding top/bottom and 10px padding left/right. 11px Neue Haas Grotesk weight 400 uppercase #ffffff text. Used only inside the announcement ticker.
Typographic Discipline
The interface uses exactly one weight (400) of one typeface (Neue Haas Grotesk 55 Roman) at exactly four sizes (11, 14, 18, 54). Hierarchy is not purchased with bold or italic; it is earned through scale jumps, negative space, and the white-on-black contrast. Every element that is not a body of running text is set in uppercase. The OpenType 'case' feature is enabled globally so that all-caps small text uses proper case-sensitive glyph forms — parentheses, hyphens, and numerals retain the proportions designed for uppercase contexts rather than being scaled-up lowercase forms. Line-height at 54px is extremely tight (0.89), giving the display a compressed, almost monolithic presence. Body sizes use a more conventional 1.27-1.29 leading.
Similar brands
Aesop
Same editorial restraint and monochrome discipline — black canvas, small uppercase type, photographic product framing, zero decoration
The Row
Same gallery-wall presentation: one large monochrome image, hairline rules, single weight sans-serif, no visible UI chrome
Cos (the fashion label)
Same minimal typographic system with a single weight and size-based hierarchy on a dark neutral ground
Muji
Same quiet, text-first interface with hairline rules separating regions and no decorative color or shape
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
