# Design Language for concepts.news ## Aesthetics and Tone concepts.news is **a museum of ideas mounted on the wall of a derelict library**. The site does not "report" news -- it *exhibits* concepts. Each headline is a specimen pinned behind imaginary museum glass; each body paragraph is the wall text adjacent to a vitrine. The aesthetic is **typo-archival surrealism**: the marriage of an academic lexicographer's quietest workspace and a surrealist's collage drawer. Imagine the OED's 1933 edition spilled into a Magritte canvas and then re-photographed under the cold north light of a Berlin printing studio. The mood is **scholarly-intellectual** crossed with **surreal** and tilted towards **edgy-rebellious** -- a tone deliberately opposed to the warmth, gradient-saturation, and corporate-saas conformity that dominates the existing portfolio. Where 92% of sister designs lean corporate and 97% lean warm-palette, concepts.news goes **cold, dry, intentionally anti-friendly** -- an interface that refuses to perform reassurance. Reading it should feel like opening a card catalogue drawer in a building that has been quietly, patiently waiting for a hundred years for someone to remember that *concepts* are the only news that ever truly mattered. The wars come and go; the idea of *war* is what persists. The personality is that of a curator who has been cataloguing abstractions for decades and treats every passing trend as a footnote. Headlines arrive in the present tense ("LIQUIDITY arrives at the museum"; "CAUSALITY is being re-hung"; "HORIZON has lost its label"). The interface does not ask for the reader's clicks -- it offers slow access on the reader's terms. ## Layout Motifs and Structure The layout is a **broken-grid magazine spread** built on the bones of a 19th-century *dictionary entry* -- the structural unit of the entire site is the **lemma block**, an asymmetric typographic specimen with headword, etymology line, definition body, cross-references, and a marginal pinned slip of paper. There is no card grid. There is no centered hero. There is no full-bleed photo. The avoidance is deliberate: **card-grid (95%)**, **centered (89%)**, **full-bleed (52%)**, **scroll-triggered (94%) animations**, and **gradient (98%) backgrounds** are all rejected. **Primary structural pattern -- "the broadsheet-codex":** The viewport is divided by a **fixed five-column rule** at all breakpoints (collapsing to one on mobile but still preserving the rule lines as a graphic). The columns are unequal -- in the proportion **2 : 5 : 1 : 4 : 3** -- a Fibonacci-adjacent imbalance that creates the off-kilter feeling of a hand-set newspaper that has been re-pasted from disparate galleys. Vertical rules are printed as **0.5px hairlines** in #2C2A26 ink-color, never as pure black. **Six structural strata, scrolled vertically as a single continuous folio:** 1. **The Cartouche** (top, 80vh) -- a single oversized lowercase headword (`concepts.`) typeset in a heavy display serif at `clamp(8rem, 28vw, 24rem)`. The dot of the period is replaced by a small letterpress ornament (a *fleuron*). Below it, a single italic line in 14px: "a daily catalogue of ideas, currently in circulation." 2. **The Index Strip** (sticky, 48px tall) -- a horizontal alphabetical band, A-Z, from which the day's tracked concepts hang as labelled tags. Hovering a letter reveals the concepts indexed under it as a small drop-shaped dictionary marginalium. 3. **The Folio Pages** -- a long stack of **lemma blocks**, each one occupying roughly 90vh. Lemma blocks alternate in column-rhythm: the headword sits in column 2 of the rule grid for odd entries, column 4 for even, producing an off-balance left-right swing as the reader scrolls. 4. **The Cross-Reference Web** (one full viewport) -- a hand-drawn-feel SVG diagram in which today's concepts are connected by curved hairlines representing semantic kinships. Each node is a single italicised word; clicking expands an adjacent slip of editorial paper. 5. **The Errata** -- a footer-sized stratum titled *Corrigenda*: a faux-letterpress retraction column where yesterday's concepts admit their imprecisions. 6. **The Colophon** -- printer's marks, set type sizes, paper stock, ink mixture, and the date in Roman numerals. No social icons. No newsletter capture. Spatial relationships honour **ma-negative-space** (22%, slightly underused) and **layered-depth** (27%) over **bento-box** (25%, common). White space is treated as oxygen for thought, not as a luxury aesthetic. Each lemma block is preceded by no fewer than **three column-widths of empty paper** so the reader's eye can rest before encountering the next concept. ## Typography and Palette **Typography (all Google Fonts, verified to exist on Google Fonts):** - **Display headwords:** **"Old Standard TT"** -- a digital revival of an 18th-century Russian Imperial dictionary face. Used for the cartouche `concepts.` headword and every lemma headword, set in lowercase at heavy sizes with `font-feature-settings: "liga", "dlig", "smcp"`. Letter-spacing tightened to `-0.035em` so the glyphs press against one another like pinned specimens. - **Body editorial:** **"Cormorant Garamond"** at 400 / italic 400 / 600 -- chosen for its narrow set-width and its slight pen-bias, which prints with the faint shimmer of an actual book typeface rather than a screen font. Used for definitions, etymologies, and editorial wall-text. Line-height generous at 1.65; measure clamped to 62 characters maximum. - **Marginalia & cross-references:** **"Spectral"** at italic 300 -- delicate enough to read as handwritten margin annotations against the firmer body. Used for the slips of paper attached to each specimen. - **Index strip / colophon / metadata:** **"JetBrains Mono"** at 11px and 9px small-caps. The only monospaced face on the site, treated as the *typesetter's voice* -- the silent infrastructure underneath the editorial. Mono use is deliberately scoped (not sprawling), unlike the 92% of sister sites that lean on mono ubiquitously. - **Optional drop-cap face:** **"UnifrakturCook"** -- blackletter, used **once** at the start of the longest editorial of the day, never elsewhere. A single ornamental gesture acknowledging the medieval roots of the lexicon form. **Palette -- "ink-on-rag-paper":** The palette refuses gradient (98% portfolio prevalence) and refuses warm (97%). It is muted, cool, and analogue. - `#1B1814` -- **carbon-black ink**, never pure black. The colour of letterpress impression on uncoated stock. Used for body text, hairlines, headwords. - `#F4EFE3` -- **rag-paper cream**, the canvas. Slightly fibrous-feeling because of an SVG noise overlay. The whole site sits on this colour. - `#2C2A26` -- **bistre**, used for rules, footnote underlines, and printer's marks. A near-black with a brown undertone that signals *aged paper* without lapsing into sepia. - `#7A6F5C` -- **fox-brown foxing**, the colour of paper-mould stains on old stock. Used for marginalia, dates, and small editorial chrome. - `#C73E2D` -- **vermilion proof-mark red**, used **only** as accent: the underline that appears when a concept is currently being revised, the strikethrough on retracted entries, and a single red asterisk denoting "concept of the day." Less than 2% of total ink area. - `#7A8FA6` -- **proof-blue pencil**, used for editor's marks and the cross-reference web's hairlines. Cool, dusty, slightly desaturated. - `#3F4A3A` -- **forest-shadow green**, used sparingly for hover states on cross-references and the mark indicating a concept has been "verified in the wild" (citations exist). Reserved. The total palette is seven hands-wide, deliberately analogous-cool-with-one-warm-accent (vermilion). It belongs to the **muted** (58%) bucket but reads as **cool-grays + earth-tones** in combination, which is rare in the corpus. ## Imagery and Motifs **Core visual motif: the typographic specimen.** Every concept on the site is presented as if it were *the only thing being printed today.* No photography. None. The photography prevalence in the corpus is 95%; concepts.news commits fully to **minimal** + **vector-art** + a touch of **paper-aged texture**, which is significantly underused as a combination. **Decorative inventory:** - **Letterpress ornaments (fleurons)** -- a curated set of six dingbats from the Hoefler & Co. revival tradition, recreated as inline SVGs. They appear sparingly: as the dot of the cartouche period, as section breaks, as the bullet of cross-reference lists. Hand-traced feeling, not geometric. - **Hairline rules** -- horizontal and vertical, 0.5px, never thicker. The whole site is held together by these rules as a 19th-century broadsheet was held together by brass furniture. - **Pinned-slip annotations** -- small rectangles of slightly-yellower paper (`#EFE7D2`) tilted at randomised angles between -2.5° and +2.5°, attached to specimens with a tiny SVG pin. Each slip carries a single editor's note in Spectral italic. - **Foxing stains** -- four hand-drawn SVG noise patterns layered at 6% opacity over the cream canvas, irregular blooms of `#7A6F5C` simulating where moisture has touched the paper over decades. - **Cross-reference web** -- a large SVG composed of hand-drawn quadratic Bezier curves (no straight lines) connecting concept-nodes. Lines are stroke-dashed in proof-blue, animated to draw themselves once, slowly, when the user scrolls into the section. Curves wobble subtly via a `feTurbulence` displacement filter so they breathe like ink on paper. - **Watermark** -- a faint `concepts.news` mark embossed via SVG `feSpecularLighting` into the rag-paper background. Visible only obliquely, as one might see a watermark by tilting paper to the light. Implemented as a CSS `mask-image` + soft drop-shadow so it appears pressed *into* the surface. - **Concept-glyph index** -- a 26-letter alphabetical band where each letter is a tiny custom illustration of a *physical thing the letter looks like* (the 'A' is a sawhorse; the 'O' is a magnifying glass; the 'Q' is a key with its bow). Hand-drawn, line-only, no fill. Used in the index strip. **Anti-imagery rules:** - No stock photography of journalists, newsrooms, breaking news, microphones, or globes. - No data-viz dashboards, charts, or counters. - No 3D renders, no glassmorphic cards, no neon glows. - No iconography from feather/heroicons libraries -- every icon-like mark is drawn specifically for this site and has the wobble of a hand-traced contour. ## Prompts for Implementation **Narrative architecture.** concepts.news is **a single continuous folio** that the reader walks through as one walks through a museum's permanent collection. The HTML document is one long `
` containing six `
` strata. There is no homepage / article-page distinction; each concept's full editorial is reachable in-place by clicking the headword, which uses the new **CSS View Transitions API** to expand the lemma block into a full-folio reading view while the surrounding specimens recede into the cream. **Animation principles.** The site is **deliberately slow and deliberately quiet.** It rejects the corpus's dominant **scroll-triggered** (94%) frenzy in favour of a small, restrained palette of motion -- which becomes the *uniqueness* of the interaction. - **Ink-bloom on first reveal.** When a lemma block enters the viewport, its headword does not fade in -- it *blooms* like ink hitting damp paper. Implementation: a CSS `filter: blur(8px) saturate(0)` initial state, transitioning over 1400ms with a custom cubic-bezier(0.22, 1, 0.36, 1) to `blur(0) saturate(1)` while a `text-shadow` of carbon-black expands from 0px to 0.4px. The effect is wet ink soaking outward into fibres and then drying. No translation, no scale -- only the *chemistry* of ink meeting paper. - **Drawing the cross-reference web.** When the cross-reference section enters the viewport, the curved hairlines draw themselves using `stroke-dasharray` + `stroke-dashoffset` at a deliberately slow 4-second pace per line, staggered by 200ms. The drawing pen never lifts; lines connect end-to-end like a plotter making a single continuous trace. - **The marginalia "settle."** Pinned slips of paper enter not by sliding but by `transform: rotate()` -- they drop in already-translated, then settle their tilt over 600ms with a faint elastic decay (overshooting by 0.5° before resting at their final angle). Subtle; should look like a slip nudged into place by a curator's thumb. - **Concept-of-the-day breathes.** A single red asterisk pulses with a 6-second sinusoidal opacity cycle between 0.55 and 1.0. The only persistent motion on the page; everything else is at rest unless triggered. - **No parallax.** No magnetic cursor. No tilt-3d. No counter-animate. No typewriter. The corpus's most loved tropes are abstained from. **Interaction principles.** - **Hover states are letterpress.** When a headword is hovered, it gains a 0.3px `text-shadow` offset down-and-right in carbon-black, suggesting an *impression* into paper. No colour shift, no underline, no scale. - **Active reading aid.** The reader can tap any word in any definition to "pin" it -- the word becomes underlined in proof-blue and a marginal slip appears noting "you flagged this." A small editorial gesture that turns reading into curation. - **The Index Strip, scrubbed.** Hovering the alphabetical strip causes the corresponding concepts to *raise* slightly in the folio below them (a 2px translation up + a 0.5px text-shadow), as if the page is being pinched towards that letter. Released, they settle. - **No hamburger, no nav.** Navigation is the index strip and the cross-reference web. Period. Search is a single italicised "ask" prompt at the top right that opens a full-page editorial dialogue rather than a typeahead. **Typography-as-storytelling.** The whole point of the site is that **the typesetting is the news.** A new entry on the day a major concept is "revised in the public mind" will appear with a small vermilion deletion-line through its old definition and the revised text typeset directly below in a different colour-bias of carbon. The reader sees, literally, the *editing* of an idea. The typesetting becomes the editorial argument. **Bias toward full-screen narrative.** Each lemma block is approximately one screen tall, and each concept's expanded view is a full-screen reading folio. Cards, pricing blocks, CTA-heavy hero sections, stat-grids, testimonial walls, feature-comparison tables, and "trusted by" logo strips are forbidden. There is no signup capture. There is no newsletter modal. There is no cookie banner styled as a chat bubble. The site's only persistent UI element is the index strip; the site's only "call to action" is the implicit invitation: *think.* **Implementation tech.** Plain semantic HTML, CSS custom properties for the seven-colour palette, vanilla JS for the IntersectionObserver-driven ink-bloom, View Transitions API for the lemma expand, and inline SVG for every ornament, hairline, web-curve, and watermark. No framework. No CSS-in-JS. No animation library. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **News as museum, not feed.** The 68-design corpus contains a handful of news-themed sites (bada.news -- abyssopelagic; matchoomnews -- mascot/matchstick; tanso.news -- carbon-themed) and they all preserve some genre-marker of "news": a stream, a dateline column, a breaking-banner. concepts.news abandons the news-feed entirely and adopts the **museum-vitrine + dictionary-lemma** as its structural unit. This is unique in the corpus. 2. **Typography as the only imagery.** No photography (against 95% of corpus), no 3D, no data-viz, no glassmorphism, no neon, no gradient-mesh. Only typography, hairlines, and a small bestiary of hand-drawn ornaments. The single piece of "art" on the site is a hand-drawn alphabetical index in line-art. This degree of imagery-abstinence is rare in the corpus -- only a handful of sites approach it and none commits to typo-archival surrealism. 3. **Cool muted palette refusing gradient and warmth.** With gradient at 98% portfolio prevalence and warm at 97%, this site's seven-colour ink-on-rag-paper palette (carbon, cream, bistre, fox-brown, vermilion accent, proof-blue, forest-shadow) sits in the rare 2% intersection. There is not a single gradient anywhere in the design system; flat ink on flat paper, full stop. 4. **Restrained motion vocabulary.** Ink-bloom + line-draw + slip-settle + asterisk-breath. Four animations, total. Against a corpus where scroll-triggered is at 94%, parallax at 57%, and stagger at 45%, this restraint is itself a differentiator. The site uses motion the way a museum uses lighting: rarely, and to direct the eye. 5. **Editorial honesty as interaction.** The Errata stratum -- a footer-sized "Corrigenda" column where yesterday's concepts admit imprecisions -- is a structural feature unique to this site. No other design in the corpus builds *self-correction* into its UI. It models concepts as living things that get re-defined; it builds a vermilion strikethrough into the visual grammar. 6. **The lemma block as structural unit.** The 19th-century dictionary-entry-as-component (headword + etymology line + definition body + cross-reference + pinned slip) is, as far as the corpus shows, unrepresented. Most designs use card, panel, or hero as their atomic unit. concepts.news uses *lemma*. **Avoided patterns from frequency analysis:** - **AVOIDED:** corporate aesthetic (92%), gradient palette (98%), warm palette (97%), card-grid layout (95%), centered layout (89%), photography imagery (95%), scroll-triggered animation (94%), mono ubiquity (92%, used only in colophon-scoped here), parallax (57%), bento-box (25%). - **EMBRACED (underused):** ma-negative-space (22%), broken-grid (19%), surreal aesthetic (14%), magazine-spread (14%), serif-revival typography (4%), avant-garde (11%), edgy-rebellious tone (7%), high-contrast (47% but used here as ink-on-paper rather than vivid duotone). **Chosen seed:** `experimental type layout` -- the only seed in the catalogue that names typography itself as the experiment, which exactly matches a site where the typesetting *is* the editorial. The seed is rare in the realised corpus (no design has explicitly claimed it under that name as its primary identity). Adjacent seeds considered and rejected: `vintage newspaper layout` (too literal, would import the dateline-column trope this site rejects), `classic serif revival book` (too quiet, lacks the surrealist edge), `avant-garde fashion lookbook` (the lookbook form fights the lemma form). `experimental type layout` carries the right amount of permission to be both archival and rebellious -- a museum that whispers, not a magazine that shouts.