# Design Language for concepts.news ## Aesthetics and Tone concepts.news is a **flat-design newsroom for ideas, sculpted in midnight-blue marble and lit from inside by an optimistic, playful glow**. Imagine if a young classics professor — the kind who keeps a foam stress-ball Plato on her desk — were given the keys to a forgotten state newspaper and asked to redesign it for 2026. She would strip the chrome, kill every drop-shadow, refuse every gradient, and replace the photographs with bright vector icons sitting next to chiselled marble busts. The page would then be painted the colour of midnight at the Acropolis, and a single soft underline would be taught to draw itself, slowly, beneath every concept it announced. That is the site. The aesthetic centerpiece is **uncompromising flat-design (a slot empty in the corpus — claimed today)**, executed with the discipline of an early Microsoft Modern UI poster but warmed by **playful-rounded** typography and the optimistic register of a children's encyclopedia of philosophy. There are **no shadows**, **no gradients**, **no gloss**, **no skeuomorphic textures**, **no glass**, and **no ambient glow**. Every shape is solid colour against solid colour. Every edge is mathematically clean. Every icon is a single fill, occasionally with a single contrasting accent. The only "effect" the site permits is the slow self-drawing of a 4px underline beneath the headline of each concept — the wordmark equivalent of a curator pointing at a label. The tone is **optimistic-bright (3% in the tone corpus — claimed and amplified)**: every concept is presented as a *gift*, every news item framed as *good news for thinking people*. Where the rest of the news web traffics in alarm, urgency, and red-bordered breaking-now banners, concepts.news refuses urgency entirely. The site has no notification bell, no breaking-news strip, no live ticker, no countdown, no "trending now." It has, instead, a slow editorial cadence: one concept per day, presented like a calendar saint, with a marble bust, a playful icon, a soft definition, an underline that draws itself, and a small block of cheerful provenance. The atmosphere is **classical museum at golden hour, but rendered in flat geometry** — Phidias meets Frutiger, redrawn by a designer who only owns three Pantone chips. The unifying narrative metaphor is the **Bureau of Bright Concepts**: a fictional public institution, founded "in a year that hasn't happened yet," whose mandate is to issue, on the first of each morning, exactly one new concept worth thinking about, accompanied by a marble likeness of someone who once did. The site is the front of that bureau — its press office and front lobby. The reader is a citizen who has come to collect today's concept the way one might collect a daily fortune from a paper-folded box. ## Layout Motifs and Structure The page is built on **minimal-navigation (7% in the corpus — claimed)** in the most literal sense: there is exactly one navigation element on the entire site, and it is a horizontal row of seven flat icons, 36×36px, sitting in the upper-left corner — Today, Yesterday, Archive, Authors, Marble, About, Subscribe. No hamburger. No drawer. No sticky header that grows on scroll. No mega-menu. No search overlay. No breadcrumb. No pagination chrome. The seven icons never move, never re-skin, and never collapse on mobile — on small screens they shrink to 28px and re-flow to two rows of three plus one orphan, which is left as an orphan on purpose, because the bureau likes its orphans. The composition is **a single tall column of marble pedestals**, one pedestal per concept, stacked vertically at a generous rhythm of 192px between centres. The page reads top-to-bottom as a colonnade walked end-to-end — each pedestal is a flat rectangle 640px wide on desktop, **always centred on the page**, with the marble bust resting on top, the concept name below in playful-rounded display, the soft definition below that, and the underline that draws itself sitting between name and definition like a velvet rope. **Six pedestals fill the homepage**, in this order: 1. **Pedestal of Today** — full bleed pedestal in the brightest sky-blue accent, the only flat block on the page that breaks the midnight base, hosting today's marble bust at 50% larger scale than every other pedestal. The headline ("Today's Concept: ___") is set in 96px playful-rounded, and the underline-draw beneath it takes 1.4 seconds to complete on first view. 2. **Pedestal of Yesterday** — the same shape but rendered in 60% opacity, sitting on a faded pedestal, as if the marble had been moved to a side gallery. This is a deliberate playful gesture: "yesterday is still here, just stepped aside." 3. **Pedestal of the Week** — seven small marble heads in a flat horizontal frieze, each with its own miniature underline that draws itself when scrolled into view. The frieze is set in a single 640px-wide flat band of #1B2A4E, and each head is a 64px circle. 4. **Pedestal of the Author** — a playful-rounded portrait of the contributing thinker for the week, drawn entirely as flat geometric shapes (no marble here — this is the *living* author), accompanied by a soft, optimistic biographical paragraph and a trail of three icons describing their daily routine. 5. **Pedestal of the Bureau** — an editorial "what is this place" block, presented as a single vertical poster on a flat midnight panel, with a marble Athena head in the upper-right corner and a friendly two-paragraph manifesto in the lower-left. 6. **Pedestal of the Subscription** — the only invitation on the page. A flat box, no shadow, with a single email field, a single submit button shaped like a postage stamp, and a soft underline drawing itself beneath the words "Concepts, daily, by post." There is no CTA-stack. No tier-cards. No price grid. No "free vs pro." Subscription is free; that is the only price. There is no hero-CTA stack. There is no pricing block. There is no stat-grid. There is no testimonials wall. There is no FAQ. There is no contact form. There is no comparison table. The bureau does not need to convince anyone; the bureau is a public service. The **vertical rhythm** is enforced by an 8-pixel base grid scaled by powers of two: 8 / 16 / 32 / 64 / 128 / 192 / 256. Every spacing decision on the site lands on one of those numbers, which gives the column the calm, processional feel of a colonnade walked at a steady human pace. The horizontal rhythm is irrelevant — the page is centred, full-stop, and the gutters on either side are simply the room's marble walls. ## Typography and Palette **Fonts (Google Fonts only — two voices, both rounded, both warm):** - **Display — `Quicksand` (variable, weights 300–700).** Quicksand carries the *playful-rounded (3% in corpus — claimed)* slot for the entire site. Its terminals are perfect circles, its bowls are generous, its q-tail is the friendliest in the Google catalogue, and at large display sizes it looks like a balloon-letter parade for ideas. It is used for: every concept name (96px, weight 600), every section title (40px, weight 500), every navigation icon label on hover (14px, weight 500), and the bureau's wordmark itself (32px, weight 700, set in midnight-blue against a flat sky-blue square so that the wordmark always reads as a stamp). Quicksand is *never* italicised on this site — the rounded forms already carry the warmth, and italic Quicksand reads as childish where the bureau wants to read as cheerful-and-grown-up. - **Body — `Nunito` (variable, weights 300–800).** Nunito carries the long-form burden. It is used for: every concept definition (19px, weight 400, line-height 1.7), every author bio (17px, weight 400, line-height 1.6), the manifesto and footer copy (16px, weight 400), and every caption (14px, weight 600 — caption is the only place body text is bolded, and only because captions on flat-design sites need to assert themselves without colour-tricks). Nunito's softer-than-Open-Sans curves harmonise with Quicksand without imitating it; the two fonts share a rounded family resemblance but differ in weight, contrast, and rhythm enough that the eye reads them as *display* and *prose* without confusion. A third typeface, **`Cormorant Garamond` (weights 400–500, italic only)**, is used **exactly once per page** — and only on the marble bust's caption strip, where it identifies the historical thinker (e.g., *Hypatia of Alexandria, c. 360 — 415*). This is a deliberate typographic moment: the marble bust looks classical, and so its caption *whispers* in classical italic, a single line of 14px Cormorant italic in a light grey, while everything else on the page sings in playful-rounded sans. The contrast is the whole joke and the whole point. **Palette — `midnight-blue` (7% in corpus, claimed and stretched into a full eight-stop family):** - `#0B1530` — **Midnight Base** — the page background, the primary surface, the colour the entire site is painted on. Deep enough to read as *night*, blue enough never to read as *black*, and matte enough that the flat icons sitting on it never look like decals. - `#142447` — **Midnight Step** — the slightly lighter midnight used for pedestal blocks that need to differentiate from the page background without introducing a shadow. The 5%-luminance gap is enough for flat-design separation. - `#1B2A4E` — **Frieze Blue** — the band colour for the Week frieze and the navigation strip backplate. A sister of Midnight Step, slightly cooler. - `#3D5AB8` — **Concept Cobalt** — the primary accent, used for the name of today's concept, the wordmark stamp's interior fill, and the underline that draws itself. This is the only colour on the site that the eye is *meant to chase*. - `#7BA7FF` — **Sky Blue** — the bright optimistic accent used on Pedestal of Today as a full-bleed block. Sky Blue is the colour of "the bureau is open and the day is young." - `#F4ECD9` — **Marble Cream** — the colour of every marble bust illustration. Slightly warm, slightly aged, never pure white. Marble Cream is the only warm colour on the site, and it earns its warmth by being scarce. - `#E8B547` — **Honey Highlight** — the single warm accent, used on the marble bust's chiselled "highlights" (the cheekbone, the bridge of the nose), on the postage-stamp submit button's perforation marks, and on three carefully-placed icons (Today, Subscribe, About). Used at less than 4% of total page area, by rule. - `#FAFAF7` — **Daylight White** — the body-text colour for prose set on Midnight Base, and the colour of the playful icons' interior fills. Slightly warm so it doesn't strobe against the cool midnight. **Palette discipline.** No gradient anywhere. No translucent overlay. No shadow. No glow. No outline-around-image. Every coloured surface is a flat fill. Every typographic colour is one of the eight stops above. Hex values for any decoration that doesn't appear in the eight-stop palette are forbidden. The palette is a *uniform*, and the bureau wears its uniform. ## Imagery and Motifs **Imagery on concepts.news is the union of two non-overlapping families: (a) flat playful icons drawn as single-fill SVG and (b) marble-classical busts drawn as flat-shaded SVG with two-tone Marble Cream / Honey Highlight chiseling.** No photography. No gradient-mesh. No 3D render. No stock illustration. No watercolour. No paper texture. No hand-drawn imperfection. No grain overlay. Everything on the page is hand-keyed in SVG, hard-edged, anti-aliased only at the pixel level. **Icon-heavy is the dominant imagery mode (icon-heavy is at 0% in the corpus — completely empty room, claimed in full).** The site uses 64 icons, drawn in a strict house style: 24×24 baseline grid, 2px strokes when stroked (rare), single-colour fill (default), one optional Honey Highlight accent dot per icon (used in only 11 of the 64 icons), and a rounded corner radius of exactly 2px on every terminal. The icon set is: - The Seven Navigation Icons, in their rest state set in Daylight White on Midnight Base: *Sun-on-pedestal* (Today), *Half-moon-on-pedestal* (Yesterday), *Stack-of-cards* (Archive), *Person-with-pen* (Authors), *Bust-on-block* (Marble), *Open-book* (About), *Stamp-with-corner-perforation* (Subscribe). - The Twelve Concept-Type Icons, used as a small badge in the upper-right of each pedestal to indicate the concept's lineage (Ethics, Logic, Aesthetics, Politics, Mathematics, Mysticism, Language, Memory, Nature, Time, Selfhood, Society). - The Forty-Five Body-Text Icons, sprinkled into long-form prose like glyph-italics. Words such as "library," "garden," "letter," "owl," "river," and "lamp" are immediately followed by their 14-px companion icon, set inline at the same baseline as the body text. This inline-icon density is what *makes the site icon-heavy* in the imagery sense; the corpus has not seen this pattern in any prior design, and concepts.news claims it. **The marble-classical motif (7% in motifs corpus — claimed) is delivered as a recurring cast of flat-shaded busts.** Twelve busts exist in the system, each a 320×400px SVG composed of seven flat shapes plus three Honey Highlight strokes for chiseling — Hypatia, Heraclitus, Sappho, Marcus Aurelius, Avicenna, Hildegard, Murasaki, Ibn Khaldun, Spinoza, Wollstonecraft, Du Bois, Anscombe. The busts are not photorealistic and not engraved in detail; they are *flat marble*, the equivalent of a Roy Lichtenstein cartoon of a Roman portrait, redrawn in Marble Cream on Midnight Base with three honey strokes along the cheek, the brow, and the bridge of the nose. The chiseling is two-tone, *never* gradient. Each bust has the historical thinker's name in 14px Cormorant Garamond italic immediately beneath, light grey, single line, no underline. **The underline-draw (19% in patterns corpus — present and amplified into a signature).** Every concept name on the site has, beneath it, a 4-px-tall, Concept-Cobalt-coloured horizontal line that draws itself from left to right when the pedestal first scrolls into view. The draw is animated as a `stroke-dashoffset` interpolation over 1.4 seconds with an `ease-in-out` curve. Once drawn, the line *stays drawn*. It does not pulse, fade, retract, or animate again. The underline is the only motion the site permits as part of its identity. **Negative space is treated as an architectural feature.** Each pedestal sits inside a 192-px vertical buffer of Midnight Base, top and bottom. Marble busts cast no shadows on the page (because the design is flat) but they *do* sit in deliberate spatial breathing room; the bust's bounding box is ringed by 64px of Midnight Base on all four sides before any other element is allowed to encroach. The result is the unhurried atmosphere of a museum at opening hour, when the rooms are empty and the docents have not yet arrived. ## Prompts for Implementation Build concepts.news as **one HTML file, one CSS file, one ES module, one SVG sprite**. No framework, no bundler, no build step. The page is a vertical newsroom of flat pedestals; every interaction must reinforce the optimistic, playful, classical-museum atmosphere. **Page shell.** A single `
` containing one `
` (the seven-icon navigation row in the upper-left, plus the wordmark stamp in the upper-right), followed by six `
` elements, each centred, each 640px wide on desktop. The body background is `#0B1530` Midnight Base. There is a single `` block at the bottom of the document containing the symbol definitions for all 64 icons and 12 marble busts, referenced via `` throughout the page. Storytelling unfolds top-to-bottom; the reader's job is to descend the colonnade. **Storytelling structure (six pedestals, in order):** - **Pedestal 1 — Today's Concept.** Full-bleed flat block of `#7BA7FF` Sky Blue, 100% page width on the inside-of-the-column, with the day's marble bust centred on top at 480px tall. Below the bust: today's concept name in 96px Quicksand weight 600, in `#3D5AB8` Concept Cobalt, with the 4px self-drawing underline beneath. Below the underline: the soft definition (≤ 60 words) in 19px Nunito, in `#0B1530` Midnight Base on the Sky Blue field — the only place on the site where text is dark on a light field, used here to mark *today* as the bright spot in the colonnade. - **Pedestal 2 — Yesterday's Concept.** A full-opacity copy of Pedestal 1's structure, but rendered on `#142447` Midnight Step at 60% saturation, marble bust at 320px tall, headline at 64px. The underline still draws, but in `#7BA7FF` Sky Blue rather than Concept Cobalt — yesterday's accent has *cooled*. The pedestal sits 192px below Pedestal 1 in the column. - **Pedestal 3 — Frieze of the Week.** A horizontal `#1B2A4E` Frieze Blue band, 640×128px, containing seven 64px circular Marble Cream busts arranged with 16px gutters. Hovering a bust rotates the page's *background* underline at the top of the column to point to that day; clicking it scrolls smoothly to the corresponding archive page (out of scope for the home document but linked). - **Pedestal 4 — Author of the Week.** A flat playful-rounded portrait of the contributing thinker — drawn entirely from circles, rounded rectangles, and a single curve for the smile — set on Midnight Base. To the right of the portrait: 4–6 sentences of warm bio in 17px Nunito, plus a horizontal trail of three small icons (their breakfast, their walk, their evening) below the bio. - **Pedestal 5 — The Bureau.** A two-paragraph manifesto in 17px Nunito, set on `#142447` Midnight Step, with a 240px Marble Cream Athena bust floated to the upper-right. The manifesto is friendly, optimistic, and short. No mission-statement clichés. - **Pedestal 6 — Subscribe.** A 480×320 flat box of `#142447` Midnight Step, with a single `