# Design Language for nonri.net ## Aesthetics and Tone nonri.net channels an art-deco aesthetic — the geometric grandeur and ornamental precision of 1920s design applied to a networking and community connection platform. The site gleams with the angular elegance of the Chrysler Building — stepped forms, sunburst patterns, and the confident geometry of an era that believed modernity deserved monumental beauty. Inspiration draws from the poster design of A.M. Cassandre, the architectural detailing of the Empire State Building lobby, the geometric luxury of Erte's fashion illustrations, and the gilded interiors of the Palais de Chaillot. The tone is elegant-sophisticated — polished, refined language that treats every connection as an occasion worthy of formal presentation. ## Layout Motifs and Structure The layout uses a **bento-box** architecture — content organized in geometric compartments of varying sizes, like an art-deco jewelry display case with precisely fitted chambers. **Bento Box Architecture:** - CSS Grid with named template areas creating varied compartments - Desktop: mix of 1x1, 2x1, 1x2 cells - Gap: 14px between cells with gold accent borders - Each cell: art-deco styled with stepped corner treatments - Container: max-width: 1000px centered - Cells arranged with the geometric precision of deco tile patterns **Section Sequence:** 1. **Grand Foyer:** Hero as oversized bento cell with serif-classic title on analogous gradient, watercolor soft wash accents, futuristic geometric sunburst overlay 2. **Registry:** Connection profiles in bento grid — scale-hover interactive cards with watercolor portrait washes 3. **Salon:** Featured connections in expanded bento cells with futuristic geometric frames and watercolor detail accents 4. **Exchange:** Networking features in geometric bento arrangement with art-deco divider ornaments 5. **Farewell:** Footer as closing ceremony — elegant-sophisticated parting with futuristic geometric border and watercolor flourish ## Typography and Palette **Typography:** - **Headlines:** "Playfair Display" (Google Fonts) — classic high-contrast serif at 2.5rem-3rem, weight 700. Its refined, authoritative strokes create the monumental quality of art-deco architectural lettering. - **Body Text:** "Source Serif 4" (Google Fonts) — editorial serif at 0.95rem, weight 400, line height 1.75. - **Accent:** "Playfair Display" at 1.2rem, weight 400, italic for connection descriptions. - **Labels:** "Source Serif 4" at 0.7rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Deco Navy:** #141830 — deep navy for dark sections - **Deco Midnight:** #1c2040 — midnight blue for panels - **Gold Deco:** #c8a040 — rich gold for primary accent - **Copper Warm:** #b88050 — warm copper for secondary accent - **Teal Deco:** #389088 — muted deco teal for tertiary accent - **Ivory:** #f0e8d8 — warm ivory for light sections - **Cream Soft:** #e8dcc8 — soft cream for cards - **Border Gold:** rgba(200,160,64,0.15) — gold border accent ## Imagery and Motifs **Watercolor Connection Portraits:** Network connections illustrated with watercolor-style washes — SVG shapes with soft gradient fills (stops at varying opacity 0.15-0.4) in Teal Deco and Copper Warm suggesting impressionistic portraits. Each watercolor wash is unique, representing the individual character of each connection. **Scale-Hover Connection Cards:** Bento cells scale slightly on hover — transform: scale(1.03) with box-shadow expanding from 0 2px 8px rgba(200,160,64,0.05) to 0 8px 24px rgba(200,160,64,0.1). Border transitions to Gold Deco at 0.3 opacity. Transition: 250ms ease. The scaling suggests connections rising to attention when approached. **Futuristic Geometric Sunbursts:** Art-deco sunburst patterns (SVG, radiating lines from a central point, 1px strokes) in Gold Deco at 0.06-0.1 opacity positioned at section headers and within feature cells. The sunbursts combine deco's geometric heritage with forward-looking optimism. **Analogous Color Harmony:** Color palette works in analogous relationships — Navy, Teal, and Copper sitting adjacent on the color wheel, with Gold as the unifying metallic accent. Backgrounds use subtle analogous gradients: linear-gradient(135deg, rgba(20,24,48,0.95), rgba(28,32,64,0.95)). **Art-Deco Stepped Corners:** Bento cells feature stepped-corner treatments — CSS clip-path or pseudo-elements creating small stepped notches at corners (8px steps). The stepped geometry is art deco's signature architectural detail applied to digital interface elements. ## Prompts for Implementation Build the page as an art-deco bento networking platform. Grid: display: grid, grid-template-columns: repeat(3, 1fr), gap: 14px. Bento cells: border-radius: 4px, border: 1px solid rgba(200,160,64,0.15), padding: 24px. Container: max-width: 1000px, margin: 0 auto. Scale-hover: .bento-card { transition: transform 250ms ease, box-shadow 250ms ease; } .bento-card:hover { transform: scale(1.03); box-shadow: 0 8px 24px rgba(200,160,64,0.1); } Watercolor: SVG with gradient fills. Sunburst: .sunburst { position: absolute; opacity: 0.08; } .sunburst svg line { stroke: #c8a040; stroke-width: 1; } Stepped corners: .deco-cell { position: relative; } .deco-cell::before { content: ''; position: absolute; top: 0; left: 0; width: 8px; height: 8px; border-top: 2px solid rgba(200,160,64,0.2); border-left: 2px solid rgba(200,160,64,0.2); } AVOID: Casual social networking platforms, modern connection apps, and tech-forward community sites. Let art-deco grandeur and elegant-sophisticated refinement create a networking platform where every connection deserves the ceremony of a formal introduction. ## Uniqueness Notes 1. **Art-deco for networking platform:** 1920s geometric grandeur elevates digital connections to the status of formal, beautiful occasions. 2. **Bento-box as jewelry display:** Geometric compartments present connections like precious items in a precisely fitted display case. 3. **Watercolor as individual character:** Soft wash illustrations give each connection a unique, impressionistic personality. 4. **Stepped corners as architectural detail:** Art-deco's signature building motif translated to digital interface geometry. 5. **Analogous palette as harmonious connections:** Adjacent-color relationships mirror the harmonious nature of good professional connections. **Seed/Style:** aesthetic: art-deco, layout: bento-box, typography: serif-classic, palette: analogous, patterns: scale-hover, imagery: watercolor, motifs: futuristic, tone: elegant-sophisticated **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 art-deco aesthetic, bento-box layout, analogous palette, watercolor imagery, and elegant-sophisticated tone.