04 Visual identity

Logo, color, type, grid, super symbol, icons and interaction states. Values follow tokens.json.

Logo

Background	File
White, neutral light gray	`magic-home-logo-primary.svg` (near-black wordmark + red grid)
Deep brown	`magic-home-logo-reversed.svg` (white wordmark + red grid)
Red	`magic-home-logo-on-red.svg` (white wordmark + black grid)
Social avatar	`magic-home-social-mark.svg` (M + grid)
Favicon, app icon, corner mark	`magic-home-supersymbol.svg`

Use SVG for the web, print and packaging; it scales to any size. Use the PNG with the same name where SVG isn't supported (email, some platform back ends).

Minimum width is 120px for the horizontal logo and 24px for the super symbol. Clear space on every side is at least the height of one grid cell. Don't stretch it, add a shadow, recolor the grid, place it on a photo or a low-contrast background, or use a vertical version.

Color

Role	Token	Value	Where
Page background · white	`surface-page`	#FFFFFF	Most of a view, with product photos; sections separated by space and thin lines
Cards, inputs, canvas	`surface-card`	#FFFFFF
Small light fills · neutral light gray	`surface-soft`	#EFEFEB	Hover, short notes, the announcement bar; never a section background
Photo placeholder · neutral light gray	`surface-muted`	#EFEFEB
Auxiliary · cream, sand, clay	`cream` / `sand` / `clay`	#F6F1EA / #EBE1D5 / #DDCDBB	Small accents only (selected, hover, small tags); never a page background, a section background or a large block; no red marks on clay
Dark surface · deep brown	`surface-inverse`	#3F1A03	Small emphasis only (configurator summary bar, small tags); never the footer or a large tile
CTA	`action-primary`	#3F1A03	Primary button, white text
Chocolate grid	`chocolate-block` / `chocolate-face`	#3F1A03 / white 10%	Modular graphic
Red	`selected-mark` / `badge-accent-bg` / `price-sale-large`	#E1441D	Module and state marks, ≤10%
Body text · near-black	`text-body`	#171616	Near-black is only for text, the logo and thin lines
Secondary text	`text-secondary`	#525050	Captions, placeholders, original prices
Disabled text	`text-disabled`	#7F7D7D	Disabled states only
Secondary text on deep brown	`text-on-inverse-secondary`	#EBE1D5
Neutral grays	`background-2` / `-3` / `-4`	#EFEFEB / #D8D7D7 / #C2C1C1	Fabric swatch backgrounds, technical drawings, disabled fills: anywhere color must stay neutral
Control borders	`control-border`	#353534	1px
Decorative lines	`divider`	#353534 · 20%	1px

Errors: near-black text + red circle-alert icon + 2px red border. There's no green or yellow; success and warning messages rely on icons and text.

Chocolate grid

Deep brown #3F1A03 looks like chocolate, and a chocolate bar already comes in squares: each square is one sofa piece that breaks off and goes back. The chocolate grid is how we draw modular. It splits the work with the red super symbol (the H in the logo): the super symbol says who we are, and the chocolate grid shows how the sofa changes.

Item	How
One tile	A solid deep brown square (`chocolate-block`) with square corners and a slightly lighter raised face in the center (`chocolate-face`, inset 14% on each side)
A bar	8px gaps between tiles; the arrangement matches the sofa layout: 3 tiles straight, 5 in an L, 7 in a U
Breaking off	One tile moves three gap widths (24px) from its spot to show a piece added or taken away; break off only one tile per image
Where it goes	On white or neutral light gray; never on deep brown or on photos
Copy to pair	Add a seat. Take it away. · Same sofa. Three layouts.
Where it's used	The home page “three layouts” section, empty states, square social posts, the front of the in-box card, showroom signs, the configurator entry
Don't	Rounded corners, glossy gradients, shadows, red chocolate, tiles drawn as real chocolate or stamped with a logo

Color pairs

Pair text and backgrounds only as shown. The ColorPairs card calculates the values live from the current tokens.

Pairs to use

Foreground	Background	Use	Contrast	Where
`text-body`	`surface-page`	Body text	18.06	Body text and headlines (white background)
`text-body`	`surface-card`	Body text	18.06	Text on cards and in inputs
`text-body`	`surface-soft`	Body text	15.67	Text in small light-gray fills and the announcement bar
`text-body`	`surface-muted`	Body text	15.67	Text on photo placeholders
`text-body`	`background-4`	Body text	10.06	Text on Background/4
`text-secondary`	`surface-page`	Body text	8.01	Secondary text, placeholders
`text-secondary`	`surface-card`	Body text	8.01	Secondary text, struck-through original prices
`text-secondary`	`surface-soft`	Body text	6.95	Secondary text in small light-gray fills
`text-secondary`	`surface-muted`	Body text	6.95	Captions on photo placeholders
`text-3`	`surface-card`	24px and up	4.09	Text/3 only at 24px and up
`red`	`surface-card`	24px and up	4.16	Large red text: sale prices at 24px and up
`red`	`surface-page`	24px and up	4.16	Large red text on the page background
`text-white`	`red`	24px and up	4.16	White on red only at 24px and up (such as large headlines on the red logo version)
`text-on-accent`	`surface-accent`	Body text	5.05	Text and badges on red
`action-primary-text`	`action-primary`	Body text	15.44	Primary button (white text on deep brown)
`action-primary-inverse-text`	`action-primary-inverse`	Body text	15.44	Primary button on deep brown (deep brown text on white)
`action-primary-inverse-text`	`action-primary-inverse-hover`	Body text	11.95	Primary button on deep brown, hover (sand)
`action-primary`	`surface-page`	Graphics, borders	15.44	Deep brown button on the white background
`action-primary`	`surface-soft`	Graphics, borders	13.39	Deep brown button on a small light-gray fill
`action-primary-hover-text`	`action-primary-hover`	Body text	18.06	Primary button, hover
`white`	`action-primary-pressed`	Body text	21.0	Primary button, pressed
`text-body`	`action-secondary-hover`	Body text	13.99	Secondary button, hover (sand)
`badge-ink-text`	`badge-ink-bg`	Body text	15.44	Deep brown badge
`text-on-inverse`	`surface-inverse`	Body text	15.44	Text on deep brown
`text-on-inverse-secondary`	`surface-inverse`	Body text	11.95	Secondary text on deep brown (sand)
`control-border`	`surface-card`	Graphics, borders	12.28	Borders of inputs, checkboxes and swatches
`control-border`	`surface-page`	Graphics, borders	12.28	Control borders on the page background
`control-border-active`	`surface-card`	Graphics, borders	4.16	Input border on focus or error (red, 2px)
`selected-mark`	`surface-card`	Graphics, borders	4.16	Small red selected mark
`selected-mark`	`surface-page`	Graphics, borders	4.16	Red mark on white
`selected-mark`	`surface-soft`	Graphics, borders	3.61	Red mark on a small light-gray fill
`selected-mark`	`surface-muted`	Graphics, borders	3.61	Red mark on a photo placeholder (neutral light gray)
`selected-mark`	`surface-inverse`	Graphics, borders	3.71	Red mark on deep brown
`selected-border`	`surface-card`	Graphics, borders	18.06	Selected outline, 2px
`primary`	`surface-page`	Graphics, borders	18.06	Focus ring (near-black)
`primary`	`surface-muted`	Graphics, borders	15.67	Focus ring on a photo placeholder
`text-white`	`surface-inverse`	Graphics, borders	15.44	Focus ring on deep brown (white)
`chocolate-block`	`surface-page`	Graphics, borders	15.44	Chocolate grid on white
`chocolate-block`	`surface-soft`	Graphics, borders	13.39	Chocolate grid on a small light-gray fill

Pairs to avoid

Foreground	Background	Use	Contrast	Change to
`text-secondary`	`background-4`	Body text	4.46	Secondary text on Background/4 → use text-body
`text-3`	`surface-card`	Body text	4.09	Text/3 small text → disabled states only; use text-secondary for captions
`text-3`	`surface-page`	Body text	4.09	Text/3 on the page background → don't use
`text-3`	`surface-inverse`	Body text	3.77	Text/3 on deep brown → use text-on-inverse-secondary
`red`	`surface-card`	Body text	4.16	Small red text (errors, sale prices) → set the text in text-body; red only for icons and borders
`red`	`surface-inverse`	Body text	3.71	Small red text on deep brown → don't use
`text-white`	`red`	Body text	4.16	Small white text on red → use black
`text-1`	`red`	Body text	4.34	Small near-black text on red, 4.34 → use black
`action-primary`	`surface-inverse`	Graphics, borders	1.0	Deep brown button on a deep brown surface → use action-primary-inverse
`stroke-1`	`surface-card`	Graphics, borders	1.44	Stroke-1 as a control border → decorative dividers only
`selected-mark`	`clay`	Graphics, borders	2.68	Red mark on clay → move it to white
`selected-mark`	`background-3`	Graphics, borders	2.9	Red mark on light gray → don't use
`primary`	`action-primary`	Graphics, borders	1.17	Near-black focus ring right against a deep brown button → add a 2px white gap outside the ring (focus-ring already includes it)
`chocolate-block`	`surface-inverse`	Graphics, borders	1.0	Chocolate grid on deep brown → it disappears; use light backgrounds only

Type

Style	Where
`t-40-medium`	Page H1, one per page
`t-28-medium`	Section headlines
`t-24-medium`	Product names, configurator total
`t-20-medium`	Card and step titles
`t-18-medium`	Short intro lines, FAQ questions, desktop navigation
`t-16-medium`	Buttons, tabs, step labels
`t-18-regular`	Section intros
`t-16-regular`	Body text, inputs (inputs are always 16px)
`t-14-medium`	Form labels, data, card prices, badges (single line)
`t-14-regular`	Captions and multi-line small text
`t-12-medium`	Eyebrows and labels (single line)
`t-12-regular`	Single-line notes

Styles with Auto line height (Montserrat 1.219, Archivo 1.088) are for single lines only. The fonts are Montserrat and Archivo from Google Fonts (SIL OFL, cleared for web, print and ads); the files are in fonts/.

Buttons and states

Type	Default	Hover	Pressed	Disabled
Primary (one per screen)	Deep brown + white text	Near-black + white text	Pure black + white text	`background-3` fill + `text-3` text
Primary · on deep brown	White + deep brown text	Sand + deep brown text	Clay + deep brown text	—
Secondary	Transparent + 1px `border-1` + near-black text	Sand	Clay	1px `background-3` border + `text-3` text
Text link	Near-black + underline	Underline turns red, 2px	—	—

Selected: 2px near-black outline + an 8px red square or a check icon. Input focus or error: 2px red border. Keyboard focus: focus-ring on light backgrounds, focus-ring-inverse on deep brown.

Rules

ID	Rule	✓	✗
MGH-VIS-01	Logo: The horizontal wordmark is the only primary logo. On light backgrounds, use the primary logo (near-black wordmark + red grid). On deep brown, use the reversed logo (white wordmark + red grid). On red, use a white wordmark + black grid. Social avatars use the M + grid combination mark. Favicons, app icons and corner marks use the super symbol. Don't use a vertical version. Use the SVG files first. Minimum width is 120px for the horizontal logo and 24px for the super symbol. Clear space on every side is at least the height of one grid cell.	Primary logo on light · reversed logo on dark · white wordmark and black grid on red	Stretched, drop shadow, recolored grid, placed on a photo or a low-contrast background, vertical version
MGH-VIS-02	Color balance: white base, deep brown and red as accents: The page background is white (`surface-page`), so a view is mostly white and product photos. Sections are separated by space and 1px lines, not by colored bands. Cream, sand and clay are auxiliary colors for small accents only (selected, hover, small tags), never a page background, a section background or a large block; where a light fill is needed, use neutral light gray `surface-soft` (Background/2), also in small areas. Deep brown is only for primary buttons, the chocolate grid and small emphasis. Near-black #171616 is only for text, the logo and thin lines, never a background. Red is used only for the super symbol and module marks, selected marks, small badges, sale prices at 24px and up, and error icons and borders, at 10% or less; never a button and never a large background (except the logo-on-red version).	White background + product photos + thin dividers, one deep brown primary button, red only on the module mark	A cream page + sand section backgrounds + a deep brown footer; a near-black header; red buttons
MGH-VIS-03	Use colors from the pairs table: `text-3` is only for disabled states or text 24px and up. Red works as text only at 24px and up. Text on red uses `black`. Only `text-1` goes on Background/4. Control borders use `border-1`; `stroke-1` is only for decorative lines. Secondary text on deep brown uses `text-on-inverse-secondary` (sand). Red marks never sit on clay or light gray. Focus rings are near-black (white on deep brown). Check any other pair in “Color pairs.”	Error: near-black text + red icon + 2px red border	Error: red 14px text
MGH-VIS-04	White header and footer; deep brown only for small emphasis: The header and footer are white with the primary logo, with a 1px line above the footer. Deep brown `surface-inverse` is only for small emphasis: the configurator summary bar and small tags. It's never the footer, a section background or a large tile. Near-black is never a background. Buttons on deep brown use the reversed version (MGH-VIS-14).	White header + white page + white footer, separated by thin lines	A deep brown footer + a deep brown offer band + sand section backgrounds; near-black as a large background
MGH-VIS-05	Use only the 12 locked type styles: Headlines are Montserrat and body text is Archivo. Class names are the token names (`t-40-medium` … `t-12-regular`). Letter spacing is 0, there are no uppercase transforms and eyebrows use sentence case too. On phones (≤599px), headlines drop one step: 40→28, 28→24, 24→20. Prices and sizes use tabular numerals. Chinese uses the matching `zh-*` style.	Phone hero headline in t-28-medium	A new 32px headline · an all-caps eyebrow with letter-spacing 0.18em
MGH-VIS-06	Grid, gaps and square corners: Every corner is square: radius is always `radius-0`. Spacing follows an 8px grid. Tiles have a fixed 8px gap (`module-gap`) that doesn't scale with size. Structure comes from 1px strokes and fills, not shadows. The only box-shadow is the focus ring.	Card with a 1px `border-1` and square corners	Rounded card + drop shadow
MGH-VIS-07	Two decorative graphics only: the super symbol and the chocolate grid: Super symbol: the 2×3 red grid stands for the letter H, modules and expansion. Use only the 2×3 original, an extended grid or a partial crop. It's always red and turns `black` only on red. Chocolate grid: deep brown tiles laid out like a chocolate bar, one tile per sofa piece. Tiles have 8px gaps, and each has a slightly lighter raised face in the center (`chocolate-face`, inset 14% on each side). The chocolate grid can break apart: one tile moves three gap widths away to show a piece added or taken away. Place the chocolate grid only on white or neutral light gray. Neither graphic gets rounded corners, shadows or gradients, and one image uses only one of them (the grid in the logo doesn't count).	Three chocolate tiles in a row and a fourth broken off beside them + “Add a seat. Take it away.”	A chocolate grid with rounded corners, a glossy gradient or in red; a brown super symbol
MGH-VIS-10	Gradients live only in Branding-6: The red gradient tiles in Branding-6 belong to that key visual alone and can be reused as is. Interfaces, buttons and cards don't use gradients.	Branding-6 reused as an ad background	Gradients on buttons or cards
MGH-VIS-11	Icons: Lucide line icons with a 1.5px stroke, square caps and mitered joins; color follows the text. Sizes are 16 / 20 / 24. Red icons mean active or error only. Icon-only buttons need a text label.	Plus and ruler icons with square caps	Round-cap icons, colored icons, emoji
MGH-VIS-12	Motion: 220ms, cubic-bezier(0.2, 0, 0, 1), and only color and opacity change. No movement, scaling or bounce. Turn transitions off when the system's reduced motion setting is on.	Button fill shifts from deep brown to near-black on hover	Buttons that shrink when pressed; cards that lift on hover
MGH-VIS-13	Accessibility: WCAG 2.2 AA: text 4.5:1 (3:1 at 24px and up); control borders, icons and focus rings 3:1. Every interactive element has a visible focus state. Touch targets are at least 44px. States never rely on color alone; add text or an icon.	Selected: 2px near-black outline + small red square	Red alone to show a selection
MGH-VIS-14	Calls to action use deep brown: The primary button `action-primary` is deep brown #3F1A03 with white text. Hover is near-black and pressed is pure black; only the color changes. On deep brown, use the reversed `action-primary-inverse` (white with deep brown text). Red is never a button. One primary button per screen.	“Add to cart” in white on deep brown on a white page; white with deep brown text on the deep brown summary bar	A red button; a deep brown button placed directly on a deep brown bar