# Design Language for nlbd.dev ## Aesthetics and Tone nlbd.dev is a personal developer portfolio disguised as a **1920s supper-club program** — the kind of folded card stock printed in gold on black that a maître d' would set on your table at a jazz-age Manhattan speakeasy, but the performer listed inside is someone who writes code. The site's mood is **warm-inviting** without being sentimental: the gold is real gold, not novelty shimmer; the black is the black of a properly darkened theatre, not the default dark of a developer portfolio. Every pixel has been considered the way a typesetter considered each character in a hot-lead composing stick. The visual inspiration is the intersection of **Chrysler Building ornament** (eagle gargoyles, sunburst crown, chevron spandrels), **Paris Exposition Internationale 1925 pavilion graphics**, and the measured confidence of a Parisian atelier's business card printed on Crane's plate-finish. The site does not announce its sophistication — it assumes it. Tone: warm, assured, unhurried. A candlelit room with good music just below audible. The visitor is a guest, not a user. ## Layout Motifs and Structure The governing structure is a **broken-grid with deco symmetry axes** — a contradiction that is the entire point. Every section breaks the underlying column grid by exactly one deliberate unit (a 40 px overhang here, a headline that bleeds into the gutter there) while maintaining invisible bilateral symmetry on the vertical center. The effect is a page that feels hand-composed — slightly off, intentionally so — but never chaotic. **Structural layers:** 1. **Opening curtain panel** — full viewport, black ground, a single gold sunburst SVG that radiates from the upper-third point, behind which the site name types itself in. The SVG rays are drawn with `stroke-dasharray` animation. No scroll prompt. The visitor waits for the curtain. 2. **Broken-grid biography band** — a three-column deco grid (8 columns total, with a 1-column left gutter and a 1.5-column right gutter) where the headline overhangs by 60 px into the left gutter, and the portrait image (a single, duotoned photograph) protrudes 40 px below the band's baseline into the next section. Columns use a `1fr / 2fr / 0.5fr` CSS grid track with a 24 px gap. 3. **Work panels** — each project is a full-width strip, alternating between **gold text on black** and **black text on champagne**. The strip's headline is set at `clamp(4rem, 8vw, 9rem)` and bleeds off the right edge by 1 character width, implying the work continues beyond what is shown. 4. **Celestial interlude** — a narrow band (18 vh) midpage showing a star-map fragment: SVG constellations, gold dots, hairline connecting lines, slow parallax drift at 0.15× scroll speed. No label text. A visual breath between work panels. 5. **Contact footer** — centered, restrained, a single ornamental deco rule above the email address, followed by a colophon line in small caps. Scrolling is vertical, standard. No horizontal scroll, no sticky sidebar. The page is long but reads as a single composed object, not a navigation tree. ## Typography and Palette **Palette — gold-black-luxury:** - `#0A0804` — Deep Black Velvet. Primary background. Not pure black; has a hair of warm brown to prevent cold-screen harshness. - `#C9A84C` — Burnished Gold. Primary accent, headlines, SVG strokes. Close to 18-karat yellow gold under tungsten light. - `#F5EDD6` — Champagne Parchment. Light-section background, body text on dark grounds. - `#7A5C1E` — Aged Bronze. Secondary accent, subheadings, thin decorative rules. - `#1C160D` — Midnight Espresso. Card backgrounds, inset panels, slight elevation from the main ground. - `#E8D9A8` — Pale Gold. Hover states, active links, hairline borders on dark panels. **Typography — art-deco-display:** - **Display / Headlines:** [Tenor Sans](https://fonts.google.com/specimen/Tenor+Sans) — a high-contrast geometric that carries genuine art-deco DNA without being a revival pastiche. Set at `clamp(5rem, 10vw, 11rem)` for hero titles, tracked at `0.12em`, all-caps. Its thin strokes catch light the way a brass door handle does. - **Subheadings:** [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond) — Italic 300 weight. The contrast between Tenor Sans's geometric muscle and Cormorant's calligraphic delicacy is the typographic engine of the entire page. Subheads feel whispered after the display shouts. - **Body:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — Light 300, `1.1rem`, leading `1.85`. Neutral enough to never compete with the display layer; warm enough to not read as a developer's default. - **Monospace / code snippets:** [DM Mono](https://fonts.google.com/specimen/DM+Mono) — Light. Used sparingly for technology stack labels and the typewriter-effect sequence. - **Ornamental numerals / dates:** Tenor Sans again, but set at `0.75em` with `font-variant-numeric: oldstyle-nums` overridden to lining (art deco preferred lining numerals in display contexts). ## Imagery and Motifs **Imagery — minimal with celestial accent:** The site uses at most three photographic or illustrative elements, each performing a specific narrative function: 1. **Portrait** — a single, high-contrast photograph of the developer, duotoned to `#0A0804` shadows and `#C9A84C` highlights. Square crop, 480 × 480 px rendered, placed asymmetrically in the biography band with the aforementioned 40 px bleed below. No border-radius; sharp corners only. 2. **Star-map interlude** — an SVG constellation map, hand-laid, showing 7–9 stars connected by hairline gold rules. The stars pulse slowly at 4 s intervals via `opacity` keyframes between 0.4 and 1.0. The constellation is a custom shape that is not any real constellation — a personal asterism, reinforcing the idea of a unique creative signature. 3. **Deco corner ornaments** — SVG chevron-fan ornaments (four mirrored units) placed at the four corners of the opening curtain panel and the contact footer. These are the only purely decorative elements; they do not animate. 1 px `#C9A84C` stroke on transparent fill. **Motifs — star-celestial / deco geometry:** - Sunburst radiating from a single vanishing point behind the hero title. 24 rays, alternating long (reach 60% of viewport width) and short (reach 30%), stroke width 1 px, opacity 0.18 at rest, 0.28 on page-load completion. - Chevron spandrel pattern: a repeating CSS `background` pattern of 45° `#C9A84C` lines at 0.08 opacity used as a very subtle texture on `#1C160D` card panels. - Gold horizontal rules: 1 px, full-width, used exactly three times on the page (before biography, before contact, after contact colophon). ## Prompts for Implementation **Core narrative arc:** The page tells a single story in four acts — *arrival* (curtain/hero), *person* (biography band), *work* (project strips), *departure* (contact footer). Every implementation decision must serve this arc. There are no tabs, no navigation menu, no mobile hamburger. The page is a theater program; you read it top to bottom. **Typewriter effect (primary interactive moment):** The hero panel's main title arrives via typewriter: `nlbd.dev` is typed character by character at 120 ms per character after the sunburst rays finish drawing (≈ 2.4 s post-load). The cursor is a 2 px `#C9A84C` vertical bar that blinks at 530 ms intervals and then freezes (stops blinking) once the full name is typed. No erase cycle. No re-type. It types once, then rests — like a dedication page. Below the typed name, a subtitle line in Cormorant Garamond italic fades in at `opacity: 0 → 1` over 1.2 s after the cursor freezes: `developer. builder. collaborator.` — three words, three periods, each separated by exactly two em-spaces. **Scroll behavior:** - The celestial interlude band has `position: sticky` stars that move at 0.15× the scroll rate, implemented via CSS `translate` and a `IntersectionObserver` + scroll listener. Not a parallax library — 12 lines of vanilla JS. - The work-strip headlines use `IntersectionObserver` with a threshold of 0.3 to trigger a `translateY(0)` from an initial `translateY(24px)` over 0.7 s. One animation per strip; no stagger (stagger is overused at 43% of the corpus). **Color application rules:** - All work panels alternate strictly: odd panels are `#0A0804` ground with `#C9A84C` headlines and `#F5EDD6` body; even panels are `#F5EDD6` ground with `#0A0804` headlines and `#7A5C1E` body text. - The deco chevron texture (`#C9A84C` at 0.08) appears only on `#1C160D` panels — never on the lightest or darkest grounds. - Links underline with a 1 px `#C9A84C` underline drawn via `text-decoration-thickness: 1px; text-underline-offset: 4px` — no custom underline animations. **AVOID in implementation:** - CTA buttons of any kind (no "Hire Me", no "Download CV", no "Get in Touch" buttons) - Pricing blocks, stat grids ("5 years experience", "42 projects"), testimonial rails - Sticky navigation headers - Card-flip effects, modal overlays, loading spinners - Any animation that loops continuously except the star-pulse (which is extremely subtle) - Gradient fills on the sunburst (stroke only, no fill) - Border-radius on photographs or major layout containers **Typography implementation notes:** - Load Tenor Sans and DM Sans via a single Google Fonts request with `display=swap` - Cormorant Garamond loaded separately with `display=block` (it appears only after the hero typewriter completes, so FOIT is acceptable here) - DM Mono loaded with `display=optional` (non-critical) - Never set Tenor Sans below 1.5 rem — its thin strokes collapse at small sizes - `font-variant-ligatures: discretionary-ligatures` on Cormorant Garamond subheadings for the long-s and ct ligatures ## Uniqueness Notes 1. **Broken-grid deco symmetry as a structural paradox.** The frequency report shows `broken-grid` layout at a low percentage in the corpus, and `gold-black-luxury` palette at only 2%. Combining the two with a strict bilateral symmetry axis produces a layout that is simultaneously rule-breaking and formally disciplined — this tension exists in no other design in the corpus. 2. **Typewriter effect used as a single, non-repeating revelation ritual.** The `typewriter-effect` pattern is in the corpus, but almost always applied as a looping "rotating taglines" component. Here it is used exactly once, types the domain name letter by letter, then freezes permanently. The effect is closer to a marquee being unveiled at a theatre opening than a UI widget. 3. **Star-celestial motif paired with luxury-deco, not sci-fi.** The frequency report shows `star-celestial` at 4% in the motifs category, and in all observed cases it is paired with sci-fi, cyberpunk, or generative aesthetics. Placing it in a 1920s supper-club context — gold-on-black, Cormorant Garamond italics, champagne palette — reframes celestial imagery as Gilded Age aspiration (the Chrysler Building's eagle gargoyles look like they are about to take flight into the stars) rather than science-fiction. 4. **No navigation, no sticky header, no CTAs — but genuinely warm, not austere.** Many "minimal" designs in the corpus achieve minimalism by reducing emotion alongside complexity. This design strips navigation and interactive chrome entirely but compensates with sensory richness: gold duotone, warm typography, a slow-breathing star field. The result is minimal in architecture but opulent in atmosphere — a combination absent from the corpus. 5. **Tenor Sans as deco display vehicle.** The `art-deco-display` typography slot is at only 5% in the corpus, and none of the observed designs use Tenor Sans. The more common choices are geometric revivals (Josefin Sans, Poiret One). Tenor Sans's unusually high stroke-width contrast for a geometric sans reads as authentic deco rather than deco-inspired. Seed: aesthetic: evolved-minimal, layout: broken-grid, typography: art-deco-display, palette: gold-black-luxury, patterns: typewriter-effect, imagery: minimal, motifs: star-celestial, tone: warm-inviting Avoided from frequency analysis: stagger animations (43% of corpus — heavily overused), editorial aesthetic (52% — most common aesthetic), hand-drawn elements (58% — most overused aesthetic category), gradient fills (overused in corpus), sticky navigation (pervasive anti-pattern for storytelling-first sites).