# Design Language for nonri.xyz ## Aesthetics and Tone nonri.xyz channels a light-academia aesthetic — the sun-dappled warmth of university libraries, well-loved books, and the intellectual romanticism of classical education applied to a personal portfolio and creative showcase platform. The site carries the golden-hour glow of a reading room in autumn — warm woods, leather-bound volumes, and the quiet confidence of knowledge accumulated through careful study. Inspiration draws from the editorial design of The Paris Review, the warm photography of Slim Aarons, the typographic richness of Penguin Classics covers, and the intimate gallery spaces of The Frick Collection. The tone is opulent-grand — ceremonial, elevated language that treats every creative work as an exhibition worthy of institutional presentation. ## Layout Motifs and Structure The layout uses a **portfolio-grid** architecture — works displayed in a curated gallery grid, like paintings hung in a well-lit exhibition hall with precise spacing. **Portfolio Grid Architecture:** - CSS Grid: repeat(auto-fill, minmax(300px, 1fr)) - Works maintain consistent aspect ratios (4:3 or 3:4) - Feature works span 2 columns for prominence - Gap: 20px between works - Container: max-width: 1080px centered - Gallery-quality spacing and presentation **Section Sequence:** 1. **Foyer:** Hero with eclectic-hybrid title on warm gradient, photography golden-hour atmospheric treatment, flowing-curves calligraphic accent decorations 2. **Gallery:** Portfolio works in grid — pulse-attention interactive highlights with photography warm-toned treatments 3. **Study:** Featured projects in expanded grid cells with flowing-curves ornamental frames 4. **Library:** Process and methodology section with photography documentary styling and warm academic atmosphere 5. **Evening:** Footer as closing hour — opulent-grand farewell with flowing-curves signature flourish and warm sign-off ## Typography and Palette **Typography:** - **Headlines:** Mixed "Playfair Display" (Google Fonts) serif at 2.5rem weight 700 with "DM Sans" (Google Fonts) geometric sans at 1rem weight 400 — the eclectic hybrid creates the scholarly-meets-modern tension of light academia. - **Body Text:** "Crimson Text" (Google Fonts) — literary serif at 0.95rem, weight 400, line height 1.8. - **Accent:** "Playfair Display" at 1.2rem, weight 400, italic for project descriptions and quotes. - **Labels:** "DM Sans" at 0.7rem, weight 500, uppercase, letter-spacing 0.08em. **Color Palette:** - **Library Cream:** #f8f0e0 — warm library cream for backgrounds - **Parchment:** #ece0c8 — aged parchment for cards - **Mahogany:** #6c3828 — rich mahogany for primary accent - **Ink Navy:** #283848 — deep ink navy for secondary accent - **Gold Leaf:** #b89838 — warm gold leaf for tertiary accent - **Text Warm:** #1a1410 — warm near-black for body text - **Dust:** #807060 — warm dust for secondary text - **Border Linen:** #d0c0a8 — warm linen border ## Imagery and Motifs **Photography Golden-Hour Treatment:** Portfolio imagery presented with warm golden-hour quality — CSS filters: contrast(1.05) saturate(0.9) brightness(1.02) with warm overlay (rgba(184,152,56,0.04)). The warm treatment bathes every work in the flattering light of a late-afternoon gallery visit. **Pulse-Attention Featured Highlights:** Featured works pulse to draw attention — slow breathing animation: @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(108,56,40,0); } 50% { box-shadow: 0 0 24px 4px rgba(108,56,40,0.06); } } over 3.5s infinite. The subtle pulsing suggests the living, breathing quality of creative work. **Flowing-Curves Calligraphic Accents:** Elegant curved lines (SVG paths, 1.5px strokes) in Gold Leaf at 0.08-0.12 opacity flowing near section headings and between grid rows. The curves suggest calligraphic pen flourishes — the decorative tradition of signed works and illuminated manuscripts. **Warm Atmospheric Depth:** Backgrounds use warm, golden tones — Library Cream with subtle radial warmth (rgba(184,152,56,0.03)) and slight vignetting (box-shadow: inset 0 0 100px rgba(26,20,16,0.03)). The atmosphere creates the feeling of entering a room where every surface has absorbed decades of warm afternoon light. **Portfolio Gallery Spacing:** Works presented with generous matting — each grid cell has internal padding that creates the gallery-quality whitespace of professionally framed art. Border: none — the work floats in its space without visible frame. ## Prompts for Implementation Build the page as a light-academia portfolio gallery. Grid: display: grid, grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)), gap: 20px. Container: max-width: 1080px, margin: 0 auto, padding: 60px 24px. Pulse: .featured-work { animation: warmPulse 3.5s ease-in-out infinite; } @keyframes warmPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(108,56,40,0); } 50% { box-shadow: 0 0 24px 4px rgba(108,56,40,0.06); } } Golden-hour: .portfolio-image { filter: contrast(1.05) saturate(0.9) brightness(1.02); position: relative; } .portfolio-image::after { content: ''; position: absolute; inset: 0; background: rgba(184,152,56,0.04); } Flowing curves: .calligraphic-accent { position: absolute; opacity: 0.1; } .calligraphic-accent svg path { stroke: #b89838; stroke-width: 1.5; fill: none; } Warm atmosphere: .gallery-section { background: #f8f0e0; } .gallery-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(at 50% 50%, rgba(184,152,56,0.03), transparent 60%); box-shadow: inset 0 0 100px rgba(26,20,16,0.03); } AVOID: Modern portfolio templates, minimalist project grids, and tech-focused developer showcases. Let light-academia warmth and opulent-grand ceremony create a portfolio where creative work is presented with the reverence of a gallery exhibition in a beloved institution. ## Uniqueness Notes 1. **Light-academia for portfolio:** University-library warmth elevates creative work to the status of scholarly exhibition rather than digital showcase. 2. **Portfolio-grid as gallery hanging:** Curated grid spacing recreates the precision of professionally hung works in a well-lit gallery. 3. **Pulse-attention as living work:** Subtle pulsing suggests creative work as living, breathing entities rather than static artifacts. 4. **Flowing-curves as calligraphy:** Pen-flourish accents connect digital portfolio to the tradition of signed, authenticated works. 5. **Golden-hour photography as flattering light:** Warm treatment bathes every piece in the most flattering possible gallery lighting. **Seed/Style:** aesthetic: light-academia, layout: portfolio-grid, typography: eclectic-hybrid, palette: warm, patterns: pulse-attention, imagery: photography, motifs: flowing-curves, tone: opulent-grand **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses light-academia aesthetic, portfolio-grid layout, warm palette, photography imagery, and opulent-grand tone.