# Design Language for tnhec.com ## Aesthetics and Tone tnhec.com is the public hall of a civic body whose initials read like a seal stamped in wax — and the site treats that seriousness literally. Imagine the **1933 annual register of a state institution** reissued not as a dusty PDF but as a **WPA-era engraved keepsake folio**: thick cream stock, intaglio borders, a frontispiece you'd find behind glass in a marble lobby. The governing aesthetic is **art-deco ornate luxury** in its *civic* register — not Gatsby champagne, not Miami pastel deco, but the **bank-lobby, courthouse-frieze, public-library-rotunda** strain of the style: stepped ziggurat motifs, sunburst fanlights, fluted pilasters, brass elevator dials, and the quiet authority of a building that expects you to lower your voice. The tone is **opulent-grand** crossed with **scholarly-intellectual**: weighty, measured, a little ceremonial. Copy should read like it was set by a press that also prints diplomas — full sentences, no exclamation marks, no growth-hacking verbs. The site is a *place you enter*, not a funnel you fall through. Warmth comes from material, not from emoji: the warmth of polished walnut, aged brass, and lamplight on gold leaf. Every screen should feel as if it were **die-stamped and gilded**, then photographed under a single warm lamp. ## Layout Motifs and Structure The site is a **single long vertical procession through five Halls**, each Hall a full-bleed "plate" with its own ornamental frame — no card-grid, no bento boxes, no equal-weight section stack. The composition borrows from **engraved title pages and certificate layouts**: strong vertical axis of symmetry, content held inside a **double-ruled border with mitred art-deco corners** (stepped, not curved), and a generous outer margin of bare paper so each Hall reads as a mounted plate. Grid mechanics: - A **9-column** symmetric grid with wide outer columns kept deliberately empty (the "matting"). Primary text columns are 1, 3, or 5 columns wide, always centered or mirrored — **no asymmetric off-axis drift**; this design earns its tension from *ornament density*, not from broken grids. - Each Hall opens with a **lintel band**: a horizontal strip carrying the Hall numeral as a deco-numeral medallion (I, II, III, IV, V), a thin sunburst rule, and the Hall title in spaced capitals. - Vertical rhythm is **architectural, not modular**: section heights are large and unequal, like the bays of a colonnade. Between Halls, a **transom divider** — a narrow horizontal panel with a repeating ziggurat fret and a centered brass rosette. - A persistent **left-edge gauge**: a slim vertical brass rule with engraved tick marks and the current Hall numeral, behaving like the floor indicator above an elevator door as the reader descends. - The footer is a **colophon plate**: centered, set like the back of a bound report — "printed and bound for the public record," issue numerals, and a small embossed-looking seal. ## Typography and Palette **Typefaces — all on Google Fonts:** - **Cinzel** (400, 600, 700) — the engraved-capitals voice for Hall titles, the wordmark, and lintel bands. Set in all caps with wide tracking (0.12–0.22em), sizes `clamp(1.6rem, 4vw, 4.5rem)`. This is the "carved into the entablature" face. - **Poiret One** (400) — the true art-deco display accent: hairline geometric letterforms for Hall numerals spelled out, pull-quotes, and the frontispiece subtitle. Used large and airy, never for running text. - **Cormorant Garamond** (400, 500, 600 italic) — the body voice: a high-contrast old-style serif that reads like a finely set register. Body copy 1.125rem, line-height 1.8, measure ~64ch, centered or mirrored within its column. Italic for captions and asides. - **Bitter** (400, 600) — the "official footnote" voice: a slab serif for small structured matter — colophon lines, table-of-halls, the left-edge gauge labels, dates and numerals. **Palette (gold-black-luxury, warm):** - `#14110D` — Lampblack: the deep near-black of the outer matting and ink. - `#F4E8D0` — Ledger Cream: the primary paper field, warm and slightly aged. - `#C8A24E` — Old Brass / gilt: rules, rosettes, the elevator gauge, deco corners. Used as line and inlay, never as a flat fill block. - `#7A1F2B` — Sealing-Wax Maroon: the single accent — Hall numerals' medallion fill, links, the embossed seal. - `#5B4A2E` — Walnut: secondary text, frame shadows, the underside of "engraved" relief. - `#EFE2C4` — Vellum highlight: faint inner glow on plates, lighter than the cream for layered depth. Gilt is applied as **thin gold leaf**: 1px hairlines, fine fretwork, a subtle metallic gradient (`#B98E3C → #E6C879 → #B98E3C`) only on rules and rosettes — never on big areas. Maroon appears sparingly, like wax — one drop per Hall. ## Imagery and Motifs - **Engraved frontispiece.** The opening Hall is a full-screen **certificate-style title plate**: the wordmark in Cinzel inside a double-ruled deco border, a central sunburst fanlight rendered in fine gold strokes, two fluted pilasters flanking the text, and a maroon wax seal at the foot. It should look scanned from a 1930s charter. - **Ziggurat fretwork.** The recurring decorative pattern is the **stepped art-deco fret** — used as transom dividers, as a thin border along the left-edge gauge, and as corner ornaments on every plate. Generated as CSS borders / SVG, tileable. - **Sunburst fanlights.** Radiating line-fans (the kind set above 1930s lobby doors) appear behind Hall titles and the seal — pure stroke, gold on cream or gold on lampblack. - **Brass hardware.** Rosettes, push-plate dials, a stylized elevator floor-indicator (the left gauge), and small medallions — all drawn as flat SVG with a thin metallic gradient and a 1px inner shadow to read as low relief. - **Botanical inlay, deco-stylized.** Where most civic sites use stock photography, this one uses **geometric laurel and oak-leaf swags** — symmetrical, faceted, almost heraldic — as headers above key passages. No photographs anywhere; the entire visual world is engraving, fretwork, and inlay. - **Marble-classical accents.** A faint, slow-moving **veined-marble texture** behind the lampblack matting bands — barely visible, like the wall of the rotunda you're standing in. ## Prompts for Implementation Build tnhec.com as **one long single-document HTML page** — five Halls, no SPA framework, no router, no modal dialogs, no cookie-banner chrome, no top navbar. The reader descends through a gilded folio as if walking from the lobby to the records room. - **Frontispiece on load:** the certificate title plate fills the viewport. Animate the **double border drawing itself** (SVG `path-draw-svg` / `stroke-dashoffset`) from the mitred corners inward, then the sunburst fanlight rays fan out one by one (`stagger`), then the wax seal **presses down** (a quick `scale` + soft shadow bloom, like a stamp). All within ~1.6s, then it settles and waits. - **Hall transitions:** as each transom divider enters the viewport, its ziggurat fret **unrolls horizontally** and the central brass rosette **rotates a quarter turn into place** with a slight `spring` overshoot. Subtle, ceremonial — not bouncy. - **The left-edge gauge** updates the active Hall numeral with a small mechanical **tick** animation (the indicator nub slides one notch, `elastic` settle) as you cross into a new Hall — an homage to an elevator floor dial. - **Headings reveal** by a slow `fade-reveal` upward with letter-spacing easing in (Cinzel caps tracking animating from 0.30em → 0.14em over 700ms) — like type resolving as a press impresses it. - **Gilt rules** draw left-to-right on scroll (`path-draw-svg`); rosettes have a faint continuous metallic shimmer (a slow gradient sweep, 6s loop, very low contrast). - **Cursor:** a soft warm `cursor-follow` halo, like lamplight, brightening gold ornaments it passes near (`blur-focus` on nearby fretwork). Optional `tilt-3d` of *only* the frontispiece plate on pointer move — gentle, ≤4deg, to suggest thick paper catching light. - **Marble background:** a barely-moving `parallax` layer behind the lampblack matting. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, FAQ accordions, feature-comparison tables, hero buttons, signup forms styled as conversion units. There are no buttons that say "Get Started." The only interactive affordances are the quiet descent itself and small anchor links in Bitter that behave like a table of contents in the back of a bound book. - **Respect the procession:** atmosphere over information, ornament over density, one slow vertical walk over branching navigation. Every plate should feel **die-stamped, gilded, and photographed under one warm lamp.** ## Uniqueness Notes **Differentiators from sibling designs:** 1. **Civic art-deco, not party art-deco.** This is the bank-lobby / courthouse-frieze / public-library-rotunda strain — stepped ziggurat frets, sunburst fanlights, fluted pilasters, brass elevator dials — rather than the Jazz-Age or Miami-pastel deco that's more common. Art-deco itself sits at only ~6% across the corpus, and a *civic/institutional* reading of it is essentially absent. 2. **Certificate-as-interface.** The entire IA is a **bound public register**: an engraved frontispiece, numbered Halls, transom dividers, an elevator-floor left-edge gauge, and a colophon footer. No site in the set frames itself as a die-stamped charter you walk through. 3. **Zero photography, zero glass.** The visual world is *only* engraving, gold-leaf hairlines, ziggurat fretwork, and faceted heraldic laurel — explicitly avoiding photography (~98% of the corpus), glassmorphism (~85%), and card-grid layouts (~92%). 4. **Ornament-density tension, not broken-grid tension.** Strictly symmetric 9-column architectural grid; the visual interest comes from layered gilt ornament and unequal colonnade-bay heights, the opposite of the asymmetric / broken-grid approach that's heavily represented. 5. **Maroon-as-wax restraint.** A near-monochrome cream-and-lampblack field with gilt hairlines and exactly one drop of sealing-wax maroon per Hall — a disciplined gold-black-luxury palette (~2% of corpus) used as line and inlay, never as flat fills. **Chosen seed/style:** `art-deco ornate luxury` (art-deco-display typography, gold-black-luxury palette, marble-classical + ziggurat motifs, opulent-grand × scholarly-intellectual tone) — a deliberately underused lane (luxury-premium 0%, art-deco ~6%, gold-black-luxury ~2%). **Avoided patterns from frequency analysis:** photography (98%), glassmorphism (85%), card-grid (92%), full-bleed-as-generic-stack, hand-drawn (94%), mono typography (94%), warm-gradient-mesh, cursor-follow-as-default-gimmick (kept but reframed as lamplight), bento-box, dashboard, asymmetric/broken-grid.