# Design Language for concepts.news

## Aesthetics and Tone

`concepts.news` is not a news site about concepts. It is **a quiet press-room for concepts themselves** — a slow, low-light bulletin board where ideas (not events, not personalities, not dates) are filed, cross-referenced, and allowed to ripen in public. The conceit: every "headline" on the page is a *concept that has just entered, just shifted, or just receded* in collective thinking — not an event in the world. The reader is not catching up on what happened today; they are watching a board where someone has been pinning index cards for the last four hundred years.

The presiding aesthetic is **japanese-minimal in its strictest reading** — *kanso* (簡素, eliminating the unnecessary), *seijaku* (静寂, energetic calm), and the structural discipline of a Muji catalogue page or the inside cover of a Hara Kenya monograph. There is no decoration that is not functioning. Every rule, every piece of leather grain, every aurora ribbon at the top of the page is doing structural work for the reading. Nothing is "for atmosphere." If it is on the page, it is bearing load.

The tone is **calm-serene** — not sleepy, not zen-greeting-card, but **vigilantly quiet**, the way a reading room at the British Library is quiet: full of attention, low in volume, deeply unhurried. Headlines are read at *thinking speed* (four to six seconds per concept), not at scroll speed. The page resists fast scanning. It is intended to be read at 14 lines per minute, the pace of someone copying a passage by hand.

The lighting metaphor underneath everything is **the deep ocean at 200 meters** — the photic boundary, the place where surface light has just stopped being useful and the only remaining illumination is **a slow aurora-band of faint upwelling phosphorescence**, four colors wide, drifting laterally across the top of the document at one pixel every six seconds. The aurora is not a "hero animation." It is the only ambient light source in the whole composition, and the reader is meant to forget it is there until they look up from a card.

The mood word is **submerged-quiet** — full attention, low chroma, slow time, dignified furniture. A concept landing on this page has the gravity of a card being placed face-up on a felt table.

## Layout Motifs and Structure

The page is a **modular-blocks** composition — and this is the structural soul of the site. Not a grid of cards. Not a bento. **A pinboard of irregular index-leather tiles**, each one a closed unit of one concept, butted edge-to-edge across a fixed underlying 12-column scaffold but never filling it predictably. Some tiles span 5 columns and 2 rows; some span 2 columns and 4 rows; some span 12 columns and a single row. The scaffold is invisible; only the tile boundaries are visible, and the tile boundaries are **stitched, not stroked** — a 1-px dashed rule the color of dry indigo thread.

**The fixed top band — Aurora.** The first 96 pixels of the page are not a navigation bar. They are an **aurora-lights ribbon** — a thin horizontal strip in which four soft vertical columns of color (deep teal `#0E3B45`, abyssal indigo `#0B2447`, dim aqua `#2C7A89`, faint phosphor `#4FB3BF`) drift sideways in a procedural noise field at 1px per ~6 seconds. The aurora is the only chromatic element in the *entire upper half of the document*. Site name, date, and section label sit *under* the aurora as 11px monospace, indented to a 24-px baseline grid. There is no nav menu. There is no logo bug. There is no search field above the fold. The aurora is the masthead.

**Below the aurora — a 12-column / 8-px-baseline modular pinboard.**

- The board is `1184px` wide on desktop, hard-centered in a generous left/right gutter of `--margin-leather` warmth. (This is the **only** place on the page where I allow a centered envelope. Inside the board, nothing is centered.)
- The board is divided into between 11 and 19 **leather tiles** per page, depending on how many concepts are filed today. The tile count is displayed quietly at top-left as `[14/14]`.
- Each tile has its own internal alignment (some left-rag, some right-rag, some justified, one tile always set in a single hard ranged-right column flush to its right edge). This is the deliberate **eclectic-hybrid** typographic move at the layout level — no two tiles are typographically identical.
- Tile heights are quantized to **multiples of 88 pixels** (the "card-height unit"). Tile widths quantize to **96-pixel column-pairs**. The math is rigorous; the visual outcome looks hand-arranged.
- Between tiles there is a **2-pixel hard seam, the color `--stitch-indigo` (`#1B2845`)** — never a shadow, never a glow, never a divider line. Stitch.

**Reading flow.** There is no hero. There is no "lead story." The eye lands wherever the largest tile happens to be that day. The biggest tile (concept of the day) is positioned *somewhere different every time the page loads* — drawn from a pool of 8 valid anchor positions on the board. This is the only randomization on the page; everything else is fixed.

**Vertical depth.** The page is **two boards stacked**, separated by a single 64-px band of leather grain at full bleed. Board 1: *"concepts entering circulation today."* Band: a leather-grain horizon line, embossed with three small pinpricks. Board 2: *"concepts receding this week."* No third board. No footer carousel. After Board 2 the page ends in a stitched edge.

**Skeleton-loading is the load-state and the structural metaphor.** Before any tile resolves, the entire pinboard renders as a perfect **leather-toned skeleton** — every tile present, its proportions exact, its stitched seams already drawn, but its title and body replaced by **soft horizontal taupe shimmer-bars** that breathe slowly (8-second period, not the 1.5s industry default). Tiles resolve one by one in a staggered cascade — but the staggering follows **reading order across the modular board**, not a left-to-right wave. The skeleton is *visible for a deliberately long beat* (700–1100ms even on a fast connection — controlled, not waited-out). The skeleton is a feature: it is the moment the press-room is being set up, in front of you.

## Typography and Palette

**Type system — eclectic-hybrid, four Google Fonts in deliberate, non-redundant roles.** Each font is doing something none of the others can do; nothing is decorative, nothing is interchangeable.

- **[Shippori Mincho](https://fonts.google.com/specimen/Shippori+Mincho)** — concept titles. A modern Japanese-style mincho (明朝) that handles both the cropped Latin headline and the occasional kanji or kana set in-line without a perceptible jump in stroke weight. Used at 28–48px, weight 500, tight tracking (`letter-spacing: -0.012em`). The mincho terminals are the only "ornament" on the page — those tiny triangular serif-flicks (uroko) read as marks of attention.
- **[Cormorant Infant](https://fonts.google.com/specimen/Cormorant+Infant)** — the concept's *etymological gloss* and *historical lineage* lines (always set under the title in italic). A high-contrast didone with infant terminals — softer than Cormorant Garamond, distinctly *not* a workhorse face. Used at 14px italic, weight 300. This is the editorial whisper.
- **[Inter Tight](https://fonts.google.com/specimen/Inter+Tight)** — the body of every tile, the only sans on the page. Used at 13.5px (desktop) / 14.5px (mobile), weight 400, leading `1.55`. It carries the entire reading mass of the document. Inter Tight specifically (not Inter) — its narrower spur and tighter sidebearings keep the body block from looking pillowy at small sizes against the leather background.
- **[Newsreader](https://fonts.google.com/specimen/Newsreader)** — pull-quotes inside the very large concept tiles only. Used in its **optical 60 size**, weight 400 italic, at 22px. Newsreader's hairline italic in the OPSZ 60 cut has a slight inward curl on the f and j that no other Google serif italic shares. This font appears at most twice per page.

**Hierarchy:** mincho title (Shippori 500, 28–48px) → didone gloss (Cormorant Infant italic 300, 14px) → sans body (Inter Tight 400, 13.5px) → optional pull-quote (Newsreader OPSZ 60 italic, 22px). The hierarchy never inverts; every tile follows it.

**No mono.** This is unusual for the corpus (96% of designs use mono); concepts.news refuses it. Mono carries the wrong association (terminal, log, code). Concepts here are humanistic, not computed.

**Palette — ocean-deep with leather warmth as the *only* counterweight. Eight colors, no gradients used as fill (gradient appears exclusively in the aurora ribbon and one place in the skeleton-loading shimmer).**

- `--abyssal-indigo  #0B2447` — primary text on light tiles, primary tile-fill on dark tiles. The deepest reading color on the page.
- `--ocean-night     #19376D` — secondary type, hairlines, all rules.
- `--ocean-mid       #1F4E79` — interactive accent (hover / focus only). Never decorative.
- `--phosphor-aqua   #4FB3BF` — the aurora's brightest band; the underline-on-focus color. Used in **less than 0.4% of pixels**.
- `--leather-cream   #E8DCC4` — primary tile fill (board 1, "entering" tiles). Warm but desaturated; reads as parchment-leather, not as cream paper.
- `--leather-aged    #C9B79C` — board 2 tile fill ("receding"). Sun-faded leather, distinctly older than board 1.
- `--stitch-indigo   #1B2845` — the 2px stitched seams between tiles. Reads as dry indigo thread on tan leather.
- `--margin-leather  #B8A082` — the page background outside the centered board envelope. The room the pinboard hangs in.

**Color logic:** a single concept tile uses *exactly two* colors: a leather field and an abyssal-indigo type. There are no third-color accents inside a tile. The phosphor-aqua appears only in the aurora ribbon and on focused/active interactive elements — it is the page's reserved "alarm" color and is otherwise withheld. The page is, by pixel count, **roughly 62% leather, 33% indigo type and rules, 4% margin-leather, 1% phosphor.** This ratio is enforced.

**Forbidden colors:** no white, no black, no grays. The page never touches `#fff` or `#000`. All neutrals are tinted into either the leather or the ocean families.

## Imagery and Motifs

The frequency analysis shows photography at 95% of the corpus. **concepts.news contains zero photographs.** It contains zero icons from any icon font. It contains zero stock illustration. The visual vocabulary is built from four bespoke material-systems, all rendered as inline SVG and CSS:

**1. The leather-texture surface (the cardinal motif).**
Every tile fill is **procedurally-rendered leather**, not a leather photograph. The recipe:

- A base CSS solid (`--leather-cream` or `--leather-aged`).
- An SVG `<feTurbulence>` filter at `baseFrequency="0.78"` and `numOctaves="3"`, fractal-noise type, set as a `mix-blend-mode: multiply` overlay at 14% opacity. This produces the fine pebbled grain.
- A second turbulence pass at `baseFrequency="0.04"` for the macro variation (the slight lighter and darker patches of a real piece of vegetable-tanned hide).
- Three to seven hand-placed **pin-prick SVG circles** per tile (1.5px radius, `--abyssal-indigo` fill, ~30% opacity) where an old index-card pinhole would have been. Tiles in board 2 (receding) have *more* pin-pricks — the leather is older.
- A 1-px inner-shadow via SVG `<feGaussianBlur>` along the tile's bottom and right edges, simulating the bevel where leather meets the underlying cork.

The leather is the page's only "texture" and it is doing the work that photography does in 95% of the corpus. It is the surface every word on the page is set on.

**2. The aurora-lights ribbon (the upper masthead).**
The 96-px aurora at the top of the page is rendered as **four overlapping vertical SVG gradients**, each masked by a soft turbulence noise, animated in `requestAnimationFrame` to drift laterally at exactly 1 pixel every 6.0 seconds. Direction of drift inverts every 47 seconds. The aurora carries the only saturated colors on the entire page. It is the only animation visible above the fold once everything has loaded.

**3. Index-card stitched seams and pinholes (the structural ornament).**
Every tile boundary is a **2-px dashed SVG path** in `--stitch-indigo`. The dash array is `dasharray="6 4"` and the **dashoffset animates by -10 over 22 seconds on a continuous loop** — so the stitched seams appear, on long inspection, to be slowly being sewn. This animation is so slow it functions as ambient life, not as motion.

**4. Aurora-mark concept stamps.**
Each concept tile carries, in its lower-right corner, a **single hand-drawn SVG stamp** — a small (24×24px) glyph that is *not* an icon for the concept but a **lineage mark**: a dotted vertical line of N dots, where N is the count of decades the concept has been in circulation. A concept entering for the first time gets one dot. A concept that has been around since the 18th century gets a long descending column of dots that overflows the tile and is clipped. The stamp is **always rendered in `--phosphor-aqua` at 60% opacity** — it is the only place outside the aurora where the aqua appears on board 1.

**Iconography:** none. No emoji. No Material icons. No SVG iconset. The page would rather leave a function unbuilt than introduce an icon library.

**Patterns:** the aurora drift; the stitched-seam slow-sew; the skeleton-loading shimmer; nothing else. No parallax. No tilt. No scroll-snap. No magnetic cursor. No reveal-on-scroll. No counter animations. The page **moves in three places only**, and all three move slowly.

## Prompts for Implementation

Treat `concepts.news` as **a pinboard in a quiet press-room at 200-meter depth**. The implementation is one HTML document, one CSS file, one small JS module. There is no router, no SPA, no infinite scroll. The page begins, the page ends, the reader leaves with one or two concepts in their head. That is the entire experience.

**Macro narrative — what a single read looks like:**

1. **Page load (0 → 700ms).** Background paints leather-cream margins immediately. The board appears as a fully-laid-out skeleton — every tile present at exact final dimensions, every stitched seam already drawn, every leather texture already rendered. Tiles contain only soft horizontal shimmer bars where titles and bodies will be. The aurora ribbon at the top is already drifting (it begins at frame 1; it is the heartbeat). The page feels *composed* before it feels *populated*.
2. **Tile resolution (700 → 1500ms).** Tiles resolve one by one in a staggered cascade following **modular reading order** (top-row first, but within each row left-to-right is *not* enforced — instead, larger tiles resolve before smaller ones in the same row, so the reader's eye is led to the day's anchor concept first). Each tile resolves with a 220ms cross-fade from skeleton-shimmer to actual mincho title + cormorant gloss + inter-tight body. No motion, no slide, no scale. Just the words arriving on the leather.
3. **Settled state (1.5s onwards).** The aurora drifts. The stitched seams sew. Nothing else moves. The reader reads. They may move their cursor over a tile, in which case the tile's stitched border thickens from 2px to 3px and brightens from `--stitch-indigo` to `--ocean-mid` — this is the **only** hover feedback on the page. No lift. No shadow. No tilt. Concepts on a board do not levitate when looked at.
4. **Click on a tile.** A tile, when clicked, **does not navigate.** It expands in place — its height grows to absorb the full body of the concept entry (which until now was clipped to a 4-line teaser) — and its right-side neighbors reflow downward like books making room on a shelf. The expansion is a 380ms `cubic-bezier(.16,.84,.32,1)` height transition, *no opacity change, no slide.* A second click collapses. Multiple tiles may be expanded simultaneously. The board reflows freely.
5. **Scroll to board 2.** The reader scrolls past the leather horizon-band. Board 2 ("concepts receding this week") fades in with the same skeleton-then-resolve choreography, but in `--leather-aged` instead of `--leather-cream`. Board 2 has fewer tiles and they are smaller — the receding concepts are quieter.
6. **Page end.** Below board 2, a single 88-px band of stitched-edge leather, then the document ends. No newsletter signup. No social-share row. No "related concepts." No footer nav. The leather is stitched closed at the bottom of the page like the bottom of a wallet, and that is the end.

**Implementation specifics:**

- **No CTAs.** No buttons. There is one interactive affordance: clicking a tile to expand it. There is no signup, no follow, no share, no subscribe.
- **No pricing block, no stat-grid, no logo soup, no testimonial row.** None of these exist on the site.
- **No nav.** The masthead is the aurora. The sections are the two boards. There is no page-2.
- **Skeleton-loading is non-skippable and deliberate.** Even on cached loads, the skeleton renders for a minimum of 700ms. This is a feature, not a bug. It is the press-room being set up in front of you each time.
- **Aurora animation is the ambient pulse.** It runs in a `requestAnimationFrame` loop, capped at 30fps to keep CPU low. It uses `<canvas>` for performance reasons, sized at the masthead's exact pixel dimensions, redrawn only when the noise field's drift offset changes by ≥0.5 px.
- **Stitched-seam animation is CSS only.** A `@keyframes` 22-second linear loop on `stroke-dashoffset` for every tile-boundary path. Compositor-only. No JS involvement.
- **Skeleton shimmer is CSS only.** An 8-second linear gradient sweep on a horizontal bar. *Not* the typical 1.5s shimmer — this is four to five times slower, and is part of the calm-serene tonal commitment.
- **Typography is loaded with `font-display: optional`** (not swap, not block) to avoid the FOUT flash that would otherwise undermine the choreographed skeleton-to-tile transition. If the four Google Fonts are not yet cached, they simply do not appear on first paint; tiles resolve into system-serif fallbacks until the next page load. A flash of unstyled text would break the calm.
- **Reader-mode handoff.** Every tile is semantic `<article>` with proper headings, dateline, and body markup, so reader-mode and Pocket extract clean content. The visual restraint of the design is meant to survive the reader stripping it: even unstyled, the document is still a quiet list of concepts.

**The single immersive moment:** the **horizon band** between board 1 and board 2. As the reader scrolls past it, the band's leather-grain SVG turbulence increases its `baseFrequency` over a 200-px scroll range from `0.78` to `1.4` — the leather visibly *finer-grained* in the middle of the band, then resolving back to normal as board 2 appears. This is the only scroll-coupled animation on the entire page. It is a single, quiet textural breath at the boundary between *concepts entering* and *concepts receding*.

**What the design refuses, on purpose:**
- No photography (corpus is 95%; we are 0%).
- No mono typography (corpus is 96%; we use four humanist faces).
- No warm-palette dominance (corpus is 98%; our warmth is a counterweight, not the field).
- No parallax (corpus is 93%; we have one scroll-coupled effect, not a motion theme).
- No CTAs, hero blocks, pricing, or stat-grids (the SDESIGN-listed prohibitions are absolute here).
- No "feature trio" cards, no "as-seen-in" logo bar, no testimonial carousel.
- No dark-mode toggle. The page has one mood and that mood is itself.

## Uniqueness Notes

**Chosen seed (per assignment):**
- aesthetic: **japanese-minimal**
- layout: **modular-blocks**
- typography: **eclectic-hybrid**
- palette: **ocean-deep**
- patterns: **skeleton-loading**
- imagery: **leather-texture**
- motifs: **aurora-lights**
- tone: **calm-serene**

**Differentiators against the 62-design corpus, with frequency-report context:**

1. **Skeleton-loading at 1% of corpus, here used as the *load-state, the structural metaphor, AND a deliberate calm-pacing device*.** Skeleton-loading is the rarest pattern in the entire frequency analysis (1%, 1 prior site). Most sites that use it treat it as a 1.5-second bridge before "real" content arrives. concepts.news treats the skeleton as **a first-class scene** — it renders for 700–1100ms minimum *regardless of network*, the shimmer breathes on an 8-second cycle (4–5× slower than industry), and tile resolution happens in modular reading order rather than a linear sweep. This is a re-imagining of skeleton-loading as a *quietude technique*, not a loading affordance.

2. **Modular-blocks layout treated as a literal stitched leather pinboard, not as cards-in-a-grid.** Modular-blocks is essentially absent from the frequency report (it does not appear in the layout list). The corpus is dominated by centered (93%) and full-bleed (88%) compositions. concepts.news rejects both — it builds a 12-column / 88-px-quantized irregular pinboard with hand-arranged tile spans, where each tile has its *own* internal typographic alignment. This makes the layout system itself an instance of the **eclectic-hybrid** typography seed at the structural level, not just at the type level.

3. **Aurora-lights at 3% of corpus, used as the *only* saturated chromatic element on the entire page.** Aurora-lights appears in 3% of the corpus (2 prior sites). On those sites it tends to be a hero backdrop. On concepts.news the aurora is **a 96-px masthead ribbon and the page's sole color reservoir** — it carries the only saturated phosphor-aqua and ocean-mid that exist anywhere on the document, drifts at 1 pixel per 6 seconds (an order of magnitude slower than typical aurora animations), and inverts direction every 47 seconds. The aurora is structural, not atmospheric.

4. **Zero photography, in a corpus where 95% of designs use it.** The visual vocabulary is four bespoke material-systems (procedural leather grain, drifting aurora ribbon, stitched-indigo seams, pinhole-and-stamp SVG glyphs). This is the most extreme departure from corpus norm available in the imagery vocabulary.

5. **No mono typography, in a corpus where 96% of designs use it.** All four faces are humanist — Shippori Mincho, Cormorant Infant, Inter Tight, Newsreader. Mono is rejected on tonal grounds (it carries terminal/log/code associations that contradict the *humanistic, archival* register of "concepts").

6. **Calm-serene tone (6% of corpus) executed without zen-greeting-card visuals.** The corpus's calm-serene examples typically lean on ethereal blues, blurred photography, and breathing-room layouts. concepts.news commits to calm-serene through *operational restraint* — slow animation periods (8-second shimmer, 22-second seam-sew, 6-second-per-pixel aurora drift), enforced minimum skeleton-state duration, refusal of hover-lift / scale / parallax / scroll-snap, and a 14-line-per-minute reading pace target. Calm here is enforced by what the page refuses to do, not by atmospheric imagery.

7. **Leather-texture (6% of corpus) as the page's *only* surface, paired with ocean-deep (3% of corpus) as the *only* type-and-rule color family.** Both tokens are uncommon individually; their combination is unprecedented in the corpus. The pairing — warm desaturated hide + cold abyssal indigo — is the entire chromatic argument of the page, with phosphor-aqua reserved as a 0.4%-of-pixels alarm color.

**Avoided patterns from frequency analysis:** photography (95% → 0%), centered (93% → only the outer board envelope), full-bleed (88% → only the leather horizon band), gradient (93% → only inside the aurora ribbon and the skeleton shimmer), parallax (93% → none), stagger (70% → only the modular tile resolution, not a generic stagger pattern), mono typography (96% → none), vintage motifs (90% → none), hand-drawn aesthetic (82% → none), warm palette dominance (98% → leather is a counterweight, ocean-deep is dominant), professional/friendly tone (43%/41% → calm-serene with operational restraint).
<!-- DESIGN STAMP
  timestamp: 2026-05-06T14:42:57
  seed: at the structural level, not just at the type level
  aesthetic: `concepts.news` is not a news site about concepts. It is **a quiet press-room fo...
  content_hash: aecc61d34723
-->