# Design Language for hil.st

## Aesthetics and Tone

hil.st is **a flat-design atelier catalogue for a fictional house of leather — read the domain as "the hilst", a maker's mark stamped into a hide, and as "hi-list", the short curated index of the few objects that house allows to leave its workshop.** The site presents itself as **a grand printed lookbook for a leather goods atelier, but printed flat** — no embossing, no drop-shadow, no fake stitching that pretends to cast light. The aesthetic is **flat-design (only 2% of the corpus — among the rarest aesthetics on record) crossed with an opulent-grand sensibility**: the lavish, slow, ceremonial pacing of a luxury maison, expressed not through gold leaf and bevels but through enormous quiet margins, one perfect serif, and a single restrained accent.

The mood is **a marble-floored showroom at closing time, lit by cool north light** — everything is in temperature-true grays, the air is still, and the only warmth in the room is the leather itself, which the site shows as a *flat fill of grain* rather than a glossy hero photograph. Leather here is a **texture map, not a render**: a tileable cool-gray grain (think "elephant hide rendered in graphite") that fills shapes the way a flat color would, with zero highlight and zero specular. It is the difference between *a photograph of a wallet* and *the idea of the leather it is cut from, laid flat on a drafting table.*

There is exactly one playful note in the whole house, and it is deliberate: **bubble-playful motifs** — soft circular "pearls" that drift up the page like the air bubbles trapped in a freshly-tanned hide floating in its vat. They are the maison's small joke, the one place the grandeur cracks a smile. Everything else — the serif, the grays, the margins — is composed, opulent, and unhurried. Tone: **opulent-grand** (5% of the corpus — uncommon), the register of a brand that has nothing to prove and a great deal of time.

No CTAs shouting "Shop Now". No pricing tiers. No stat counters. hil.st behaves like **a catalogue raisonné of objects you may look at but probably cannot buy** — the most opulent posture there is.

## Layout Motifs and Structure

The page is a **portfolio-grid** layout (only 1% of the corpus — the single rarest layout choice in the entire registry) built as **a leather-sample-board: a wall of cards, each one a swatch of a finished object, hung on an invisible 12-column grid with luxurious gutters.** It is explicitly **not** a card-grid marketing template (86% of the corpus) — the difference is the *air*: every card floats in at least one full gutter-width of empty cool-gray on every side, the grid never fills, and the cards are sized like museum vitrine labels, not like e-commerce product tiles.

- **The atelier board grid.** A 12-column grid, 1280px max content width, 96px outer margins on desktop, 56px gutters. Cards occupy column spans of 5, 4, and 3 in a deliberate, repeating rhythm (5+4+3 across one row = 12, with the gutters as breathing room), and the *next* row offsets — 3+5+4 — so the eye walks a gentle zig-zag down the wall. Rows are never the same height; a card's height is set by its content, never stretched to align. The grid is intentionally "ragged at the bottom edge," like real samples pinned by hand.
- **The six panels.** The document is one continuous scroll of six panels, each a held breath: (1) **The Mark** — a full-viewport opening with only the wordmark *hil.st* in the serif, the maker's-mark glyph, and one line of opulent copy; (2) **The Board** — the portfolio grid of leather-object cards; (3) **The Hide** — a single full-bleed flat field of the cool-gray leather-grain texture with one paragraph of prose laid over it in a narrow measure, like a title page; (4) **The Atelier** — a slim editorial column describing the (fictional) house, no photos, set in justified serif; (5) **The Index** — a quiet typographic list of object names and the year each entered the catalogue, hung on the same grid; (6) **The Colophon** — fonts, palette swatches as flat squares, and the maker's mark again, small.
- **Negative space as material.** The cool-gray ground is treated as the *most* expensive thing on the page. Panels are separated by 18vh of nothing. The grid is allowed to be only half-full. This is the opulent-grand move: spending the page's most valuable resource — vertical room — on emptiness.
- **The pearl column.** A single hairline-thin vertical guide runs down the left margin at column 1; the bubble-playful "pearls" drift upward along it as you scroll, the only thing in the layout that moves of its own accord.

## Typography and Palette

**Fonts — Google Fonts only, verified available.**

- **Cormorant Garamond** (weights 300, 400, 500, 600; italic 400, 500) — the **elegant-serif** voice (4% of the corpus — uncommon). Cormorant is a display Garamond with knife-thin hairlines, dramatic stroke contrast, and tall, aristocratic capitals; at 300–400 weight and large sizes it reads as *engraved on a brass plaque*, which is the exact opulent-grand register hil.st wants. Used for: the wordmark *hil.st* (Cormorant Garamond Light, 300, set very large, letter-spacing +0.04em), all panel titles, all card object-names, and the justified prose column in "The Atelier" (Cormorant Garamond 400, with its italic 500 for emphasis).
- **Cormorant Garamond SC** (small-caps, weight 500) — used only for the six panel labels ("THE MARK", "THE BOARD", "THE HIDE"…) and the maker's-mark caption, set tiny with +0.22em tracking, like the line of fine print on a luxury label.
- **Inter** (weights 400, 500) — the single utilitarian sans, used *only* for the year numerals in "The Index", the colophon hex codes, and any micro-label that must not look hand-engraved. Inter is the deliberately neutral counterweight; it never appears above 13px.

Type rules: titles are huge and thin, never bold. Body prose is set in a generous 28–32px leading on a narrow 58-character measure. Nothing is uppercase except the small-caps panel labels. No text shadow, ever (this is flat-design).

**Palette — cool-grays (only 2% of the corpus — among the rarest palettes on record). Temperature-true, blue-leaning grays, no warm tints anywhere.**

- `#0F1115` — **Ink** — near-black with a faint blue cast; all serif text, the wordmark, hairlines.
- `#F4F5F7` — **Chalk** — the page ground; a cool, very light gray, never pure white.
- `#D9DCE1` — **Vellum** — the card-face fill; one notch darker than the ground so cards read as objects on a wall.
- `#A7ADB6` — **Pewter** — mid cool-gray; the leather-grain texture's base fill, secondary text, the pearl outlines.
- `#5C636E` — **Slate** — darker cool-gray; the leather-grain's grain-lines and the small-caps labels.
- `#2B2F36` — **Anthracite** — the darkest panel ("The Hide" full-bleed leather field background).
- `#8FA1B8` — **Frost** — the one cool accent: a desaturated dusty-blue, used *only* for the bubble-playful pearls' fill and the single hover state. It is the most colour the page ever shows, and it is barely colour at all.

Contrast pairings are flat and quiet: Ink on Chalk, Slate on Vellum, Chalk on Anthracite. The leather-grain texture is built from Pewter fills with Slate hairlines — no third tone, no highlight.

## Imagery and Motifs

**No photography (99% of the corpus uses it — hil.st refuses). No 3D renders. No stock illustration. No icon library. No Lottie.** Every visual is hand-built SVG or a CSS-tiled pattern. Three systems carry the entire page:

**1. Flat leather-grain (the leather-texture imagery, 4% of the corpus — uncommon, and here re-imagined as flat).** A seamless tileable SVG pattern: an irregular pebbled grain — overlapping soft polygons and short curved creases drawn as 1px `#5C636E` strokes over a `#A7ADB6` fill, with the cell-interiors very subtly varied by a tiny set of opacity steps so the tile reads as *hide* not *wallpaper*. Crucially it has **no gradient, no shadow, no specular blob** — it is flat, the way a swatch scanned on a flatbed scanner is flat. It fills the card-faces' lower third (the "leather sample" band on each portfolio card), the entire "The Hide" panel, and the maker's-mark glyph's interior. This is the design's signature collision: a luxury-leather material rendered with flat-design honesty.

**2. The maker's mark.** A single hand-drawn SVG monogram — the letters *h* and *l* (for "hil.st", and for the fictional house "Hil & Last") interlocked inside a soft-cornered shield outline, all in flat `#0F1115` strokes, the shield interior filled with the leather-grain. It appears three times: huge and faint behind the wordmark in panel 1, small in the colophon, and 16px as the favicon. It is the only "logo" element and it never has a glow or bevel.

**3. Bubble-playful pearls (4% of the corpus — uncommon).** Soft, perfectly round circles, 8px–34px diameter, drawn as 1.5px `#A7ADB6` outlines with a `#8FA1B8` Frost fill at 14% opacity — translucent, like air bubbles rising through tanning liquor. They cluster in loose constellations: a scatter of 5–7 behind the wordmark, a thin rising stream along the left pearl-column, and a single large one that sits beside each panel label like a bullet. They are the maison's one indulgence in whimsy. They never bounce off each other, never pop — they just drift, slow and opulent.

**Card anatomy (the portfolio-grid object cards):** each card is a flat `#D9DCE1` Vellum rectangle, no border, no shadow; top two-thirds is empty Vellum holding the object's name in Cormorant Garamond and a one-line description; bottom third is a band of the flat leather-grain texture with a tiny `#5C636E` small-caps caption ("Cut №07 — full-grain, 2026"). That's it. No "Add to cart", no price, no rating stars.

## Prompts for Implementation

Build hil.st as **one HTML document, one CSS file, one ES module, one inline SVG sprite (the maker's-mark monogram, one pearl symbol, and the leather-grain `<pattern>` definition), and one favicon SVG (the maker's mark, 16px)**. No framework. No bundler. No raster images. No canvas. No WebGL. No video. No analytics. No service worker. No router. The page is **a flat luxury catalogue: rendered once, scrolled slowly, read like a lookbook.**

**Document skeleton:**

```
<body>
  <header class="mark">          <!-- panel 1: wordmark, maker's mark behind, pearl scatter, one opulent line -->
  <main>
    <section class="board">      <!-- panel 2: the portfolio grid of leather-object cards -->
    <section class="hide">       <!-- panel 3: full-bleed flat leather-grain field + one prose paragraph, narrow measure -->
    <section class="atelier">    <!-- panel 4: slim justified serif column about the fictional house -->
    <section class="index">      <!-- panel 5: typographic list of object names + years, on the grid -->
  </main>
  <footer class="colophon">      <!-- panel 6: fonts, palette as flat squares, maker's mark small -->
  <aside class="pearl-column">   <!-- the left-margin hairline guide; pearls drift up it on scroll -->
  <svg class="sprite" hidden>    <!-- monogram, pearl, leather-grain pattern -->
</body>
```

**Layout / CSS:**
- CSS Grid for the atelier board: `grid-template-columns: repeat(12, 1fr); column-gap: 56px; row-gap: 18vh;` inside a `max-width: 1280px; margin-inline: auto; padding-inline: 96px;` container. Cards `grid-column: span 5 / span 4 / span 3` in the repeating 5-4-3 then 3-5-4 rhythm. On tablet collapse to a 6-column grid (spans 3+3, 2+2+2); on phone, single column, each card full-width with 24px side padding and 12vh between.
- Everything flat: `box-shadow: none` is the global default and is *never* overridden. No `border-radius` above 4px except the pearls (perfect circles) and the maker's-mark shield (soft 8px corners). No gradients anywhere — `background` is always a solid cool-gray or the SVG leather `<pattern>`.
- The leather-grain is an inline SVG `<pattern>` (≈48×48 tile) referenced via `fill="url(#grain)"` on card-band rects and the "The Hide" backdrop rect, and also exposed as a CSS `background-image` (data-URI of the same tile) for the maker's-mark interior. Tune the tile so seams are invisible at 1× and 2×.
- 18vh of empty Chalk between every panel. "The Hide" panel is the lone dark moment: full-viewport `background: #2B2F36` (Anthracite) with the leather-grain `<pattern>` drawn over it at low opacity, and one paragraph of Cormorant Garamond 400 in Chalk, max 58ch, centred.
- The pearl-column is `position: fixed; left: 0; width: 96px;` with a 1px `#A7ADB6` vertical rule at its right edge; pearls are absolutely positioned inside it and translated upward as scroll progresses.

**Animation — restrained, opulent, slow. The signature pattern is bounce-enter (only 3% of the corpus — uncommon); use it sparingly so it reads as ceremonial, not bouncy.**
- **bounce-enter on the portfolio cards:** as each card scrolls into view (IntersectionObserver), it animates from `transform: translateY(28px) scale(0.985); opacity: 0` to rest with a gentle two-stage overshoot — settle slightly past final position, then ease back — over ~720ms with a custom `cubic-bezier(0.34, 1.32, 0.5, 1)`-style curve, staggered ~110ms per card across a row. This is the *only* element that bounces, and the overshoot is tiny (a few px) — a dignified curtsey, not a trampoline.
- **The pearls** drift continuously: each pearl translates upward at its own slow rate (1–3 px per 100px of scroll) and has a tiny independent CSS `@keyframes` float (±6px, 7–11s, ease-in-out) so the constellation breathes. They fade in over 1.2s on load. They never collide, never burst.
- **The wordmark** in panel 1: letter-spacing animates from +0.18em to +0.04em over 1.4s ease-out on load, while the maker's-mark behind it fades from 0 to 8% opacity. Nothing else on that screen moves.
- **Hover** (desktop only): a card's object-name shifts from Ink to Frost (`#8FA1B8`) over 200ms; the card itself does **not** lift, scale, or shadow — flat-design discipline holds. The leather-grain band stays put.
- `prefers-reduced-motion`: kill the bounce overshoot (cards just fade in), freeze the pearls in place, skip the wordmark tracking animation. Everything still reads.

**Storytelling spine:** the visitor descends from *the mark* (a name stamped in a hide) → *the board* (the few finished objects, hung like museum samples) → *the hide* (the raw material itself, flat and honest) → *the atelier* (the quiet house that made them) → *the index* (the catalogue, year by year) → *the colophon* (the recipe). The arc is "from the finished object back to the material and the maker" — a luxury house showing its work, slowly, with the pearls drifting up the margin the whole way.

**Forbidden:** CTA-heavy hero blocks, "Buy Now" buttons, pricing tables, stat-grids, testimonial carousels, drop-shadows of any kind, gradients of any kind, glossy "leather" renders with highlights, warm/sepia tints, neon, parallax-heavy section reveals. If it would look at home on a SaaS landing page, it does not belong here.

## Uniqueness Notes

This design's deliberate departures from the 240 designs already in the registry, and from the seed's own clichés:

1. **The single rarest layout in the corpus, used as a museum sample-board, not an e-commerce grid.** Portfolio-grid is 1% of all 240 designs — the rarest layout on record. hil.st claims it, but refuses the obvious "product-tile shop" reading: the grid is ragged, half-empty, sized like vitrine labels, with full-gutter air around every card and a 5-4-3 / 3-5-4 zig-zag rhythm. It is a *board of leather swatches*, not a storefront.

2. **Flat-design + leather-texture + opulent-grand resolved as "flat luxury".** Flat-design (2%) almost never co-occurs with luxury, and leather-texture (4%) is almost always rendered glossy and skeu), with highlights and bevels. hil.st collides them on purpose: the leather is a *flat tiled pattern* with zero specular, zero shadow, the way a scanned swatch is flat — and the opulence comes entirely from enormous margins, one knife-thin serif, and 18vh of empty cool-gray between panels. No gold, no gloss, no embossing — luxury by subtraction.

3. **Cool-grays (2%) as the entire palette, with one near-monochrome dusty-blue accent.** Among the rarest palettes in the corpus. Temperature-true, blue-leaning grays from `#0F1115` Ink to `#F4F5F7` Chalk, and the *only* colour anywhere is `#8FA1B8` Frost — used solely for the bubble-pearls' translucent fill and the single hover state. The page is, functionally, grayscale-with-a-secret.

4. **Bubble-playful as the maison's one crack of a smile — never bouncy, never popping.** Bubble-playful is 4% of the corpus and usually means loud, candy-coloured, kinetic blobs. Here the bubbles are *air trapped in tanning liquor*: 14%-opacity Frost circles drifting slowly up the left margin, the single indulgent gesture in an otherwise composed, ceremonial page.

5. **bounce-enter (3%) downgraded to a dignified curtsey.** The signature animation pattern bounces only the portfolio cards, and the overshoot is a few pixels over ~720ms — opulent-grand pacing, not playful spring. Everything else moves slow or not at all.

6. **No photography at all** in a corpus where 99% of designs lean on it — every visual (leather-grain, maker's-mark monogram, pearls) is hand-built SVG/CSS, and there are no CTAs, prices, or stat-grids anywhere on the page.

**Chosen seed/style:** *aesthetic: flat-design, layout: portfolio-grid, typography: elegant-serif, palette: cool-grays, patterns: bounce-enter, imagery: leather-texture, motifs: bubble-playful, tone: opulent-grand* — every axis honoured, every axis bent away from its usual reading.

**Avoided per frequency analysis:** photography imagery (99%), card-grid layout (86%), warm/gradient palettes (97% each), parallax & cursor-follow & spring & stagger & magnetic patterns (the 80–96% cluster), hand-drawn & glassmorphism aesthetics (96% / 66%), mono & humanist typography (95% / 53%), full-bleed & centered layouts (94% / 83%) — hil.st reaches instead for the long tail in every category.
<!-- DESIGN STAMP
  timestamp: 2026-05-10T12:58:26
  domain: hil.st
  seed: seed
  aesthetic: hil.st is **a flat-design atelier catalogue for a fictional house of leather — r...
  content_hash: 4e8f78f06aec
-->