# Mel·lif·lu·ous — Design Guidelines (machine-readable) Generated live from colors_and_type.css, last changed September 1, 2026. Human version: https://mel-lif-lu-ous.com/design-guidelines/ ## Capitalisation Sentence case for everything: headings, subheadings, buttons, body. Capitalise the first word and proper nouns, nothing else. YES "Real photos." YES "A monogram and a name." TITLE CASE IS NOT USED. Do not write "Real Photos." or "A Monogram And A Name". Write "Real photos." and "A monogram and a name." ALL CAPS is a VISUAL TREATMENT, not a way of writing. It is applied by CSS (text-transform: uppercase, with letter-spacing) to eyebrow labels only — the short kicker above a heading. The underlying text is still written in sentence case. Never type words in caps, and never use caps for a heading, a button, or a sentence. ## Colour usage Every colour below carries the job it does. Use a colour for its stated job and nothing else. SURFACE White #FAFAFA raised panels and cards Neutral #EDEDED default page background Dark #0C0A09 full-width sections that break the rhythm PRIMARY — five steps of one green, numbered dark to light like the greys. Type, rules and accents. NOT buttons and links; those are CTA, below. Primary 1 #38524B headings and body accents Primary 2 #50756B secondary text and rules Primary 3 #859E97 accent on dark backgrounds, editorial italic Primary 4 #B9C8C4 large soft fill Primary 5 #EEF1F0 faintest wash Only Primary 1 and 2 carry text. 3 through 5 fail AA at body size — use them as fills, or pick a darker step, never a larger font. CTA — buttons and links, and nothing else. Deliberately NOT a step on the Primary ramp: an action colour that is just a darker shade of the body text is not a call to anything. One CTA per view; a second element in it means neither is the action. CTA #C6EFE3 button fills CTA dark #1E6B57 the label on that fill, links, hover CTA light #E8F8F2 subtle wash ⚠️ CTA IS A FILL, NOT A TEXT COLOUR. #C6EFE3 is 1.06:1 on white — nothing is ever set in it. Type on a CTA button is CTA dark (5.1:1 on the fill); a CTA link on a light page is CTA dark too (6.3:1 on white). GREYS — text colours live here, alongside the border greys Body #4E4E4E body copy Muted #777169 secondary text Muted soft #A8A29E large text only (fails AA for body copy) Grey 4 #D4D4D4 emphasised borders Grey 5 #E3E3E3 borders and strokes ADDITIONAL — illustration and editorial only, never interface Mint #B4E5C3 illustration Cyan #00C8E6 illustration Sand #DEB887 illustration SEMANTIC — only Error and Info exist. There is no Success: the brand colour is already green, so a second green meaning "this worked" would collide with it. Success is communicated another way, not by colour. Error #DC2626 failure Info #2563EB information DO NOT USE IN SOCIAL POSTS, SLIDES OR DOCUMENTS: the additional colours (mint, cyan, sand) and the semantic colours (error, info). They exist for illustration and system feedback inside the product, not off-site — using them elsewhere makes work look like it belongs to a different brand. In code, reference the semantic role token, never a raw hex. ## Logo A lowercase m cut out of a filled circle. Two lockups — a circle and a horizontal — each supplied in three colourways. Pick by the background it sits on, never by preference. Files are in the theme at assets-logo/, served from https://mel-lif-lu-ous.com/wp-content/themes/mel-theme/assets-logo/ mel-logo-circle-dark.svg mel-logo-circle-light.svg mel-logo-circle-green.svg 126 x 126, 1:1 — avatars, favicons, anywhere square mel-logo-horizontal-dark.svg mel-logo-horizontal-light.svg mel-logo-horizontal-green.svg 486 x 126, 3.86:1 — headers, footers, wide spaces DARK on light backgrounds, LIGHT on dark ones, GREEN on light backgrounds where the mark should carry the brand colour rather than sit black. A green colourway is SUPPLIED ARTWORK, exported from the source file. That is not a licence to recolour: do not tint, re-fill or generate a colourway of your own. Never stretch, rotate, outline or shadow the logo, and never rebuild the wordmark in a font. Only the six files above exist. A vertical pair (mel-logo-vertical-dark.svg / -light.svg) is still on disk but was withdrawn from the guidelines on August 31, 2026. It is not part of the documented system — do not use it. Every file is cropped to its artwork, so the SVG has no built-in margin. Add clear space in the layout. KNOWN INCONSISTENCY IN THE SOURCE ART: the circle in mel-logo-circle-dark.svg is #000000, while the same circle inside the horizontal and vertical dark lockups is #101E2A. Do not "fix" this by recolouring a file — it is tracked in Website/MEL-website-status.md. ## Patterns Scanned wallpaper and fabric textures. A pattern is a BACKGROUND for at most one section per page — never a graphic element, never a border, never a fill for type or a shape. Any text over a pattern needs a scrim: none of these carry body copy at an accessible contrast on their own. The twelve approved for this system, all inside its warm-neutral range: 002 Walnut pin dot 031 Taupe ogee damask 005 Cream diamond lattice 033 Sage quatrefoil 006 Sand micro dot 034 Walnut damask 016 Cream ditsy floral 035 Pale sage damask 023 Blush medallion tile 044 Blush scrollwork 045 Sand quilted diamond 057 Oyster fleur trellis The full library holds 50. The other 38 are real scans but run to crimson, mint, lilac and hot pink, outside the palette in ## Colour usage above, and nine of those are flat colour with no motif. Treat anything not listed here as reference, not as an approved surface. The masters are RASTER, not vector: each is a 3000 x 2000 JPEG wrapped in an SVG shell, so nothing scales past 3000px without softening. They are not in the repo or on the server. What the site serves is assets-Patterns/thumbs/NNN.webp, 600px previews for documentation only. Masters: https://drive.google.com/drive/folders/1O2VxdasUQak4RZh0kA2D4eIEiba1u2gw ## Making social posts, slides and documents Read this before generating any image or layout. 1. USE THE SUPPLIED LOGO FILES. A drawn mark now exists, so the previous rule here ("the logo is typeset text, there is no vector mark") is retired as of August 31, 2026. Never set "Mel·lif·lu·ous" in Newsreader and call it the logo, never redraw the monogram, and never rebuild the wordmark in any font. See ## Logo below for the six files. Three of them are green colourways — use the supplied file, never a recolour of your own. 2. DO NOT INVENT GRAPHICS. This brand has no decorative geometry — no floating circles, arcs, squiggles, triangles, dots, plus-signs or confetti. If a shape is not in this document, it is not in the brand. Empty space is part of the design; fill it with nothing. 3. DO NOT INVENT ICONS. Icons come from the documented Phosphor Light set only. 4. DO NOT INVENT PATTERNS, and do not generate a texture that resembles one. Patterns are supplied scans; see ## Patterns below. A pattern is a background for at most one section, never a graphic element, and never sits under body copy without a scrim. 5. Two typefaces, no others: Newsreader for display and editorial headings, Inter for everything structural underneath. 6. Flat. No shadows, gradients, bevels, glows or 3D. If you cannot follow one of these with the assets available, say so plainly instead of substituting something that looks close. ## Layout Flat by default. Minimal shadow, minimal decoration. Mobile-first. ## Tokens Colour tokens below, generated from colors_and_type.css — the single source of truth. Do not use any colour value not listed here. ```json { "qp-canvas": { "hex": "#EDEDED", "rgb": "237, 237, 237" }, "qp-canvas-soft": { "hex": "#FAFAFA", "rgb": "250, 250, 250" }, "qp-surface-card": { "hex": "#FFFFFF", "rgb": "255, 255, 255" }, "qp-surface-strong": { "hex": "#F0EFED", "rgb": "240, 239, 237" }, "qp-surface-dark": { "hex": "#0C0A09", "rgb": "12, 10, 9" }, "qp-ink": { "hex": "#313131", "rgb": "49, 49, 49" }, "qp-ink-deep": { "hex": "#292524", "rgb": "41, 37, 36" }, "qp-body": { "hex": "#4E4E4E", "rgb": "78, 78, 78" }, "qp-muted": { "hex": "#777169", "rgb": "119, 113, 105" }, "qp-muted-soft": { "hex": "#A8A29E", "rgb": "168, 162, 158" }, "qp-primary-1": { "hex": "#38524B", "rgb": "56, 82, 75" }, "qp-primary-2": { "hex": "#50756B", "rgb": "80, 117, 107" }, "qp-primary-3": { "hex": "#859E97", "rgb": "133, 158, 151" }, "qp-primary-4": { "hex": "#B9C8C4", "rgb": "185, 200, 196" }, "qp-primary-5": { "hex": "#EEF1F0", "rgb": "238, 241, 240" }, "qp-cta": { "hex": "#C6EFE3", "rgb": "198, 239, 227" }, "qp-cta-dark": { "hex": "#1E6B57", "rgb": "30, 107, 87" }, "qp-cta-light": { "hex": "#E8F8F2", "rgb": "232, 248, 242" }, "qp-brand-dark": { "hex": "#2A3F3A", "rgb": "42, 63, 58" }, "qp-mint": { "hex": "#B4E5C3", "rgb": "180, 229, 195" }, "qp-cyan": { "hex": "#00C8E6", "rgb": "0, 200, 230" }, "qp-sand": { "hex": "#DEB887", "rgb": "222, 184, 135" }, "qp-error": { "hex": "#DC2626", "rgb": "220, 38, 38" }, "qp-info": { "hex": "#2563EB", "rgb": "37, 99, 235" }, "qp-grey-1": { "hex": "#A7A7A7", "rgb": "167, 167, 167" }, "qp-grey-2": { "hex": "#B6B6B6", "rgb": "182, 182, 182" }, "qp-grey-3": { "hex": "#C5C5C5", "rgb": "197, 197, 197" }, "qp-grey-4": { "hex": "#D4D4D4", "rgb": "212, 212, 212" }, "qp-grey-5": { "hex": "#E3E3E3", "rgb": "227, 227, 227" }, "qp-white-solid": { "hex": "#FFFFFF", "rgb": "255, 255, 255" }, "qp-icon-surface": { "hex": "#1A1A18", "rgb": "26, 26, 24" }, "qp-dark-toggle-bg": { "hex": "#1E2E22", "rgb": "30, 46, 34" } } ```