# Minimalist Monochrome > Pure #000 on #FFF, a high-contrast didone display, hairline rules and whole sections flipped to black — fashion-editorial austerity with zero colour. - Nickname: Black & white editorial - Also called: Monochrome Minimal, B&W Editorial, Noir Minimal - Category: Minimal & Clean - Moods: Serious, Luxury, Edgy, Calm - Industries: Creative & Portfolio, Luxury & Premium, Media & Entertainment, E‑commerce - Style page: https://uilingo.dev/styles/minimalist-monochrome/ Minimalist Monochrome removes every hue and lets contrast do the work. Headlines are set in a razor-thin, high-contrast didone serif, body and labels in a small neutral grotesk with widely tracked capitals. Structure comes from 1px black rules and square corners, and rhythm comes from inverting whole bands: a section, the sidebar, the tab bar or the featured card turns solid black with white type. Status is shown by fill, dash and double lines instead of red and green. It feels like a fashion lookbook or gallery catalogue — severe, precise and expensive. ## Best for - Fashion labels, photographers and galleries - Architecture and design studios - Editorial and culture magazines - Premium product launches that rely on photography ## Avoid for - Dashboards where red/green status must be scanned instantly - Playful, kids or friendly consumer brands - Interfaces that need many simultaneous highlights ## Do - Use only #000, #FFF and at most one muted grey (#595959) for secondary text - Invert whole bands (section, sidebar, tab bar) to black instead of adding colour - Set headlines in a didone at weight 400 with -0.02 to -0.03em tracking; labels in 0.72rem uppercase with 0.18em tracking - Show status with fill (solid), dash and double rules ## Don't - No colour — not even for errors, links or charts - No shadows, radius, gradients or tinted greys - Don’t use heavy slab or grotesk headlines — the thin/thick didone contrast is the signature - Don’t italicise or track Thai; use Taviraj upright ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Minimalist Monochrome" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Pure #000 on #FFF, a high-contrast didone display, hairline rules and whole sections flipped to black — fashion-editorial austerity with zero colour. Design keywords: pure black and white, didone serif headlines, inverted black sections, 1px hairline rules, tracked uppercase labels, square corners, no colour at all, fashion editorial. ## Visual language Severe black-and-white editorial: pure #FFFFFF pages, pure #000000 type and 1px black hairline rules, with no hue anywhere. Headlines are a high-contrast didone (Bodoni) at weight 400 with hairline thins, while body copy and labels are a small neutral grotesk and widely tracked uppercase micro-caps. Instead of colour, rhythm comes from inverting whole bands — a section, the sidebar, the tab bar, the featured card or the hero plate turns solid black with white type. Square corners, no shadows, lots of white space: it reads like a fashion lookbook or gallery catalogue. ## Signature details (must be visible) - Only #000, #FFF and one grey (#595959) for secondary text; success/warning/danger are also black and are told apart by solid fill, dashed and 3px double borders - Didone headlines (Bodoni Moda 400, -0.025 to -0.035em) at up to 7.6rem in the hero; Thai in Taviraj upright - Labels, nav links, buttons and table heads: 0.68–0.72rem uppercase grotesk with 0.16–0.22em tracking (Latin only) - Alternate landing sections invert to solid black with white text and white 1px rules - Every box is square (radius 0) with a 1px black border; no shadows, no gradients - Black hero plate with an italic ‘Nº 01’ folio and the product shown in white hairlines - Eyebrows preceded by a 36px 1px rule; centred heads get a rule on both sides ## Design tokens — use these exact values Colours (light mode): - background #FFFFFF - surface #FFFFFF - surface-2 #F0F0F0 - text #000000 - text-muted #595959 - primary #000000 (text on it #FFFFFF) - secondary #FFFFFF (text on it #000000) - accent #000000 - border #000000 - success #000000 · warning #000000 · danger #000000 - chart series #000000, #5C5C5C, #9A9A9A, #C8C8C8, #2E2E2E Radius: sm 0px, md 0px, lg 0px, xl 0px, pill 0px Border width: 1px Shadows: sm `none`, md `none`, lg `none` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.15 density Motion: 200ms ease-out ## Typography (Latin + Thai) - Headings: Bodoni Moda 400/500 with Thai fallback Taviraj 300/400/500 - Body: Hanken Grotesk 400/500/600 with Thai fallback Anuphan 400/500/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@0,400;0,500;1,400;1,500&family=Hanken+Grotesk:wght@400;500;600&family=Taviraj:wght@300;400;500&family=Anuphan:wght@400;500;600&display=swap - CSS stacks: heading `"Bodoni Moda", "Taviraj", system-ui, sans-serif`; body `"Hanken Grotesk", "Anuphan", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3.25rem, 7vw, 6.5rem), heading weight 400, heading tracking -0.025em (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: Taviraj is the didone of Thai — hairline thins and heavy verticals echo Bodoni Moda — while loopless Anuphan matches Hanken Grotesk’s clean, neutral body text. ## Components - Primary button: solid black rectangle, white tracked caps 0.72rem, 46px tall; hover inverts to white with a black 1px border - Secondary button: transparent with 1px black border; hover fills black. Danger: 3px double black border, no red - Input: white, 1px black border, square; focus adds an inset 1px black line (2px total); error uses a 3px double border - Cards: white, 1px black border, square; hover fully inverts to black. In black sections cards become transparent with white rules and the featured plan flips to white - Badges: square outline tags in tiny tracked caps; success = solid black, warning = dashed, danger = double border - Nav: white bar with a 1px bottom rule, Bodoni wordmark, tracked uppercase links, current link underlined - Dashboard: solid black sidebar with white items (active = underline), white main area of 1px-ruled widgets, Bodoni KPI numerals, greyscale charts and heatmap - Switch: square track; on = black track with white square knob, off = white track with black knob - Tab bar: solid black bar, white thin icons and tracked caps labels, active item underlined - Pull quote: full-bleed black block with white italic didone text ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: oversized flush-left headline on a wide column with a narrow supporting column. Navigation: bar style. Sections in order: hero → features → testimonials → stats → pricing → cta. Feature section as alternating. Editorial hero: huge didone headline left, black plate with the product right, ruled off top and bottom. Features alternate black and white plates with simple line geometry (circle, diagonal). Then alternate the band colour: white features → black testimonials → white stats with vertical rules and big didone numerals → black pricing → black CTA slab. Footer is white with a large wordmark. Dashboards pair a black sidebar with ruled white widgets; charts use black lines, dotted comparisons and grey steps only. ## Content Use realistic product copy (fictional brand) suited to: Fashion labels, photographers and galleries. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use only #000, #FFF and at most one muted grey (#595959) for secondary text - Invert whole bands (section, sidebar, tab bar) to black instead of adding colour - Set headlines in a didone at weight 400 with -0.02 to -0.03em tracking; labels in 0.72rem uppercase with 0.18em tracking - Show status with fill (solid), dash and double rules ## Don't - No colour — not even for errors, links or charts - No shadows, radius, gradients or tinted greys - Don’t use heavy slab or grotesk headlines — the thin/thick didone contrast is the signature - Don’t italicise or track Thai; use Taviraj upright - Any colour accent, including red errors or blue links — it becomes Swiss or generic - Warm off-white or grey paper backgrounds and dithering (that is E-Ink / Paper) - Rounded corners, pills and drop shadows - Heavy grotesk or slab headlines instead of a thin/thick didone - Tinted greys or gradients in charts - Tracking, uppercase or faux italics on Thai text ## Stack notes One self-contained HTML file with a