Design System Specification

The Format System

The visual standard for every Mr Call Designs surface — typography, palette, layout, imagery, and structural guidelines.

01 Core Principle

Quiet, Inter-led, with rare serif flourishes. Cormorant Garamond is reserved for a handful of special moments — the wordmark, a price figure, a pull quote — not every section title. When in doubt, set it in Inter.

Two voice registers, never mixed in one block: Warm (a confident guy helping a friend — anything addressed to a person) and Technical (spare, fact-based, scanned not read — spec charts, comparison tables).

The reader is a woman 45–55, $200–300k+ household income, high taste, low confidence pulling it together. She wants a straight answer, not a takeover.

02 Typography & Scale

Jon's live site is the reference — where documents disagree, mrcalldesigns.com settles it.

WordmarkMr Call Designsclamp(40–124px)
DisplaySECTION TITLEclamp(26–38px)
LedeSetup copy, one idea.clamp(17–23px)
Price$150clamp(40–56px)
LabelLabel Text10px / 500
NavFurniture Reviews11px / 500

No italic anywhere — emphasis comes from size and weight contrast. Prices and scores carry font-variant-numeric: lining-nums.

03 Color Palette
Ink#111214
Page#ffffff
Ivory#f5f3ee
Slate#e2e5e8
Footer#d2d7dc
Warm Ground#d8d5d0
Sofa Ground#F2F0E9
Muted#888888

No accent color — no red, gold, teal, or ochre on the website, in email, or in print. Slate appears three times per page, no more: announcement bar, one panel field, footer.

04 Case & Copywriting
Casing

Title Case for headers and brand names. Sentence case for prose and CTAs. Uppercase is a label, not a voice — nav, eyebrows, and criterion names only.

Structure

Lead with the answer in line 1. Three sentences or fewer per paragraph. Specifics, not adjectives — "25 years," not "decades of experience."

Banned words

Genuinely, honestly, transformative, elevate, curated, bespoke, luxury (outside a literal category name), seamlessly, unlock, journey, empower, amazing, incredible, game-changing.

Also banned

Italics for emphasis. Exclamation marks. Opening a sentence with "I." More than one headline starting with "You." A testimonial attributed to "a client" instead of a real name.

05 Layout, Padding & Clearance
Full Bleedwidth:100vw; margin-inline: calc(50% - 50vw); paired with html,body{overflow-x:hidden}
50/50 SplitImage left (object-position: center 25%), ivory field right (padding: 80px 10%). No divider — the background change is the edge. Height min(80vh, 860px).
Carousels4 up desktop, 3 under 1100px, 78vw mobile. 20px gap. Scroll-snap x mandatory. Never auto-advance (except the two named exceptions in §9).
Section Spacing120 / 72 desktop-mobile. Block 64 / 40. Element 24. Page margin 40 / 20.
06 Buttons & Links

No filled buttons anywhere — consumer, brand, or investor-facing — one exception. CTAs are underlined Inter text links, 5px underline-offset, opacity 0.5 on hover.

Name the action — never "Get Started," "Learn More," or "Click Here." The single carve-out for a filled, rounded, shadowed treatment is the mobile sticky menu tab, a utility toggle, not a CTA.

07 Imagery & Media
Sofa Photography

4k photoreal, 1:1, facing forward, white background, cutout placed on #F2F0E9. Identical treatment for the review grid, PDP, and Instagram.

Portfolio Photography

Real completed interiors, 3:4, used in the Executed Interiors carousel.

The Notecard

A photographed paper card with distressed typewriter text — the one warm physical object in a flat system. Carries opinion, never specification. Header stamp: Inter 8px / 500 / uppercase / #6a5a46. Body: Special Elite 13.5px / 400. Special Elite appears nowhere else in the system.

08 Form Elements

Transparent fields, bottom rule only — no boxes, no borders on the sides or top.

09 Negative Constraints
No Outlined BoxesEver — including tabs, segmented pickers, and badges. A panel's edge is a background-color change, not a border.
No Border-RadiusAnywhere in the system, except the mobile sticky menu tab.
No Box-ShadowTwo exceptions: the notecard (a photographed object) and the mobile sticky tab.
No Accent ColorNo red, gold, teal, or ochre anywhere on-site.
No Filled ButtonsOne exception: the mobile sticky menu tab.
No ItalicsEmphasis comes from size and weight, never style.
No Sponsorship CopyNever mention affiliate links or commissions on a consumer page, in either direction.
No Third VoiceEvery long-form page still resolves to Warm or Technical — never a separate literary voice.