# Design Language for luminant.dev ## Aesthetics and Tone `luminant.dev` is a **tool for people who build things that will outlast them** — software infrastructure, creative systems, long-arching products. The aesthetic is **evolved-minimal**: not the cold, evacuated minimalism of 2014 tech landing pages, but the warm, confident minimalism of a master craftsperson's workshop — surfaces cleared of everything except what is in use right now, with deep evidence of serious work having happened here. The room still smells of raw linseed oil and hot solder. The tone is **futuristic-cutting-edge** but rooted rather than weightless. Think: a scientist describing a decade-long discovery with the same understated precision she uses to describe where she parks her bicycle. The site does not shout; it radiates. The word "luminant" is literal — the interface emits low, steady light the way a cathode tube warms through glass. Not neon. Not LED-cold. The light of a thing that has been on for a long time and will be on long after you leave. Inspiration: the typographic restraint of an early Knuth paper; the spatial confidence of a Dieter Rams product photo; the slow temporal weight of a James Turrell light installation; the quiet precision of a Cartier-Bresson photograph taken one second before everything changed. Mood words: **latent energy**, **earned clarity**, **structural warmth**, **long horizon**. ## Layout Motifs and Structure The primary layout is a **portfolio-grid** — but rigorously anti-Pinterest. This is not a masonry wall of thumbnails. It is a **weighted editorial grid** built on a 12-column base with deliberate asymmetry: the grid breathes in odd ratios (5:7, 3:9, 4:8). Each work item occupies a cell proportioned to its conceptual weight, not its visual size. Small pivotal projects get large cells; sprawling platform projects may get tighter framing. **Grid logic:** - Desktop (≥1280px): 3-column primary grid, cells spanning 4, 8, or 12 columns. Row heights determined by content — no forced squares, no forced ratios. Gaps are 32px, generous and clean. - Tablet (768–1279px): 2-column grid, 6-column spans. The asymmetry survives. - Mobile (<768px): Single column. Each card becomes a full-width panel with generous 24px side padding. **Above the fold:** A single full-viewport introduction — not a hero banner. The viewport is bisected diagonally (not horizontally): the left 60% holds the typographic identity, the right 40% holds a single large abstract shape that breathes on scroll entry. No background image. No illustration. The shape is drawn in SVG, animated, composed of layered semi-transparent planes. **Scroll behavior:** As the user scrolls from the intro into the grid, the diagonal bisector dissolves into the grid's first row — a spatial transition that makes the intro and the portfolio feel like one continuous surface rather than stacked sections. **Navigation:** A single floating pill in the upper-right corner. It shows only the current section name in 11px caps. On click it expands to a sparse vertical list. No hamburger. No sticky bar. **Layered depth motif** runs throughout: every grid cell has a subtle z-axis treatment — a faint shadow rim (not box-shadow, but a ::after pseudo-element with a gradient border) that implies the card is slightly raised from the page substrate. Hovering deepens this depth without scaling the card. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display & titles — `Cormorant Garamond`** (variable, wght 300–700, italic axis). This is the garamond-classic seed executed with structural purpose: Cormorant Garamond carries the weight of Renaissance letterpress while remaining optically precise at large sizes on screen. H1 is set at 72px, weight 300, italic, tracking at -0.02em. H2 is 36px, weight 400, roman, tracking at -0.01em. Section labels are 11px, weight 600, all-caps, tracked at 0.12em, roman — using the contrast between Cormorant's delicate display size and its taut caption register to create vertical rhythm. - **Body & UI — `DM Sans`** (variable, wght 100–700). Clean, humanist, slightly warmer than Inter. Set at 16px/1.7 for body, 14px/1.5 for metadata. DM Sans at weight 300–400 sits beside Cormorant Garamond without competing; together they are a conversation between a calligrapher and an engineer. - **Monospace accents — `DM Mono`** (wght 300–500). Used only for code snippets, technical labels, and date stamps. Keeps the DM family coherent and avoids the editorial vs. technical friction that plagues mixed-serif/mono combinations. **Palette — earth-tones, warm and geological:** | Role | Name | Hex | |------|------|-----| | Page ground | Raw linen | `#F4EFE6` | | Primary text | Charcoal graphite | `#1C1A17` | | Card surface | Warm ivory | `#EDE8DC` | | Accent primary | Fired sienna | `#A0522D` | | Accent secondary | Pale ochre | `#C9A96E` | | Muted mid | Dusty sage | `#7E8C72` | | Deep accent | Smoked umber | `#3D2B1F` | | Luminant glow | Amber filament | `#D4A017` | The page ground `#F4EFE6` is not white — it is the color of paper that has been in a room with books for twenty years. The cards sit one step lighter at `#EDE8DC`. The accent sienna `#A0522D` is the color of a hot resistor or fired ceramic, not of a startup's brand orange. The amber `#D4A017` appears only as a glow effect — on hover, focus, and the intro shape — never as a flat fill. **No gradients in backgrounds.** Gradients appear only in the ::after depth-shadow pseudo-elements (radial, from `rgba(61,43,31,0.12)` to transparent). ## Imagery and Motifs The site uses **no photographs, no illustrations of people, no icons from libraries**. All visual matter is: 1. **Abstract geometric shapes** — SVG, drawn in code, never exported from design tools. The shapes are composed of overlapping polygons (5–9 sides, never circles, never squares) with semi-transparent fills in palette colors. They are the **layered-depth motif made literal**: each shape is a plane at a different z-depth, and the viewer's eye naturally constructs 3D space from the overlap. The intro shape is 7 layers; smaller accents throughout the grid are 3–4 layers. 2. **Topographic contour lines** — thin (0.5px stroke), drawn in `#7E8C72` at 8% opacity, covering the card backgrounds as a faint texture. The contour lines are generative: each card's topography is seeded by the project's name string (a deterministic hash), so no two cards share the same surface. The contour lines are not decorative — they encode the implicit information that every project has its own terrain. 3. **Typographic matter** — large numerals (01, 02, 03…) set in Cormorant Garamond at 200px, weight 300, at 5% opacity, watermarked into the lower-right corner of each grid cell. They are ordering devices and depth elements simultaneously. **Zoom-focus interaction pattern:** On hover, each grid card performs a precise **zoom-focus**: the card's content scales up 2% (transform: scale(1.02)) while the contour-line texture simultaneously sharpens (filter: contrast(1.4) — the lines strengthen as if the viewer has leaned in). The background grid dims by 15% opacity. The effect is the tactile experience of picking up a physical object from a table: the object comes to you, and the rest of the table recedes. Duration 280ms, cubic-bezier(0.25, 0.46, 0.45, 0.94). **No particle effects, no canvas animations, no WebGL.** The site's motion is deliberate and sparse — the zoom-focus hover, the intro shape's scroll-entry breathe (opacity 0→1, scale 0.95→1, 600ms), and the grid's staggered entrance (cards enter at 80ms intervals, translateY(24px)→0, opacity 0→1). ## Prompts for Implementation Build `luminant.dev` as a **single-page continuous surface** — one HTML file, no routing, no framework. The page is not a portfolio of projects; it is a **record of a particular kind of attention** paid to problems over time. The implementation must honor three structural commitments: **Commitment 1 — The grid is a spatial argument, not a catalog.** Before laying out a single card, establish the grid's argument: projects are not equal, and their visual weight should reflect this. Assign each project a `data-weight` attribute (1, 2, or 3) that controls its column span (4col, 8col, or 12col). Weight is not correlated with project size — it is correlated with conceptual density. A small tool with a profound insight weighs more than a large platform with a predictable idea. This forces the implementer to *think* before placing. **Commitment 2 — The typography is the grid.** The grid does not have decorative borders or colored backgrounds. Its structure is made visible entirely through typography: section labels (11px caps, Cormorant Garamond, tracked) create invisible horizontal rules; the 200px watermark numerals create vertical anchors; body text density differentiates card types. If you removed all the SVG shapes and contour textures, the grid should still be perfectly readable as a typographic composition. **Commitment 3 — Every animation is a physics metaphor.** The zoom-focus hover mimics the physics of leaning toward an object: the object grows slightly, the context dims. The intro shape's entrance mimics the physics of a warm light source reaching operating temperature: gradual, slightly non-linear (ease-out), leveling off at full opacity rather than snapping. The staggered card entrance mimics the physics of cards settling onto a surface: translateY with a slight overshoot (spring-out, not ease-out). Do not use CSS animations that have no physical analogue. **Section structure:** 1. **Intro panel** (full viewport) — name, tagline (one sentence, no buzzwords), the layered SVG shape. No CTA. No "scroll down" prompt. 2. **Work grid** — the 12-column editorial portfolio grid. Cards show: project name in Cormorant Garamond display, 2-line description in DM Sans, a single metadata line (year · domain · type) in DM Mono 11px. 3. **Process note** — a single 3–4 paragraph typographic essay, no sidebar, no bullets, set in 21px Cormorant Garamond at 56ch line width. About how work gets made, not about what work was done. 4. **Reach** — a minimal contact surface: one email address, one line of context, set in DM Sans 14px. No form. No icons. No social links grid. **CSS architecture:** - Custom properties for all palette values, font stacks, and spacing scale - Grid via CSS Grid (no flexbox for layout) - Depth shadows via ::after pseudo-elements, never box-shadow on the card itself - The contour line textures are inline SVG data URIs in background-image, generated at build time - No CSS frameworks, no utility libraries **Animation guard:** Wrap all transitions in `@media (prefers-reduced-motion: no-preference)`. Users who prefer reduced motion see the full grid without any translate/scale effects; the zoom-focus hover becomes a simple border-color change in `--accent-primary`. ## Uniqueness Notes **Chosen seed:** aesthetic: evolved-minimal | layout: portfolio-grid | typography: garamond-classic | palette: earth-tones | patterns: zoom-focus | imagery: abstract-shapes | motifs: layered-depth | tone: futuristic-cutting-edge **Differentiators from the 231-design corpus (frequency analysis applied):** 1. **Garamond-classic typography at 2% frequency, used as a structural grid tool rather than a decorative serif.** The corpus is dominated by display-bold (high usage), variable-fluid, and expressive-variable. Cormorant Garamond at 300-weight italic functions here as both typeface and layout scaffold — the 200px watermark numerals, the 11px tracked section labels, and the 72px display titles are all the same font doing three jobs at three scales. No other design in the corpus uses a classical serif as its spatial grid infrastructure. 2. **Abstract-shape imagery (2% frequency) generated deterministically from content data.** The corpus uses abstract-shapes rarely, and when present they are static decorative assets. Here, each card's contour-line texture is seeded by a hash of the project name — meaning the textures are *data*, not decoration. The viewer cannot know this, but the designer can: the topography of each card is determined by what the project is called, not by how it looks. This is a conceptual commitment that operates below the surface. 3. **Earth-tones palette deployed as geological time rather than warmth-and-nature branding.** The corpus treats earth tones as inviting and organic. Here, the palette references fired ceramic, smoked umber, amber filament — materials under transformation by heat or time. The `#A0522D` sienna is not terracotta-cozy; it is the color of a resistor near its thermal limit. The amber `#D4A017` is specifically a filament glow — it appears only on interaction states, referencing the physics of a thing emitting light under load. 4. **Zero decorative imagery, no photography, no illustration, no icon library.** At a corpus level, 85%+ of designs use photography and 97% use some form of iconography. luminant.dev uses none. All visual matter is either typographic or procedurally generated SVG. The decision is not minimalism for its own sake — it is a statement about what kind of work the site represents: work that cannot be illustrated with stock imagery because it does not have a face. 5. **Zoom-focus hover (underused pattern) implemented as a physics metaphor rather than a UI affordance.** The pattern is rare in the corpus; where it appears it is typically a scale + shadow pop. Here, the zoom-focus is paired with a contour-texture sharpening effect (CSS filter: contrast) that has no precedent in the corpus — the card's hidden terrain becomes more visible as you approach it, as if the act of attention itself reveals structure.