# Design Language for renai.works ## Aesthetics and Tone Inflated-3d aesthetic - the "puffy soft 3D" of contemporary web illustration (Bonjour Sasha, Olu Niyi-Awosusi's puffy buttons, the 3D balloon-like UI of recent Apple OS aesthetics) - rendered in a navy-metallic palette that grounds the playful inflation in serious editorial intent. The tone is zen-contemplative: the studio's portfolio site speaks softly about deep work, treating each project as a careful object rather than a sales pitch. Leaf-organic motifs (rendered as inflated 3D objects: a balloon-shaped leaf, a pillowy palm frond, an inflated lotus) drift through the composition. The mood is "a quiet design studio at dusk where every object - the chair, the lamp, the books, the plants - has been gently inflated like a balloon, photographed in soft navy and chrome light. Nothing is hard-edged; everything is buoyant; the room is silent and considered." ## Layout Motifs and Structure Editorial-flow composition: text and 3D objects flow together in an asymmetric, magazine-style layout that follows reading rhythm rather than grid discipline. Long paragraphs of project descriptions are interrupted by floating inflated-3d objects placed at specific reading-rhythm moments - an inflated leaf-shape sits where the eye needs a rest, a pillowy 3D number marks the beginning of a section. Each project chamber is a 100vh+ editorial spread combining: a left text column (40vw), a right object stage (50vw) hosting the inflated-3d project visualization, and floating leaf-organic accents drifting between them. Section transitions are 60vh of empty navy space with a single inflated-3d leaf rotating slowly at center. ## Typography and Palette Display and headline face: Space Grotesk (Google Fonts) - the geometric-sans spec - at weights 300-700, used at clamp(64px, 10vw, 144px) with -1.5% tracking and 0.95 line-height. The geometric sans pairs beautifully with inflated-3d - its slightly warm geometric forms read as the same "rounded but disciplined" feeling. Body text in Space Grotesk light at 17px/1.7. Accent display for project numbers in Space Grotesk 700 at 96-160px - massive numerals that anchor each project. Metadata and captions in Space Mono (Google Fonts) at 12px tracked +5%. Palette (navy-metallic): - #0F1B2D deep-navy (primary background, the studio's interior light) - #1E3A5F navy-mid (secondary surface, card backgrounds) - #C8D4E5 frost-platinum (primary text, near-white with cool warmth) - #8FA6BD chrome-mist (secondary text, captions) - #D4AF37 brass-warm (rare accent, drop caps, project numbers) - #6B9BD1 sky-chrome (highlight color, link states, leaf-organic mid-tones) - #2A4A6E steel-blue (gradient mid-stop on inflated objects) ## Imagery and Motifs Lens-flare imagery: inflated-3d objects are rendered as if photographed in studio light, with subtle anamorphic lens-flare streaks across their highlights. The lens flares are tasteful (not 1970s loud): a single 1px horizontal streak in sky-chrome across each object's brightest highlight, plus a faint radial bloom at 8% opacity. Subjects are studio objects rendered as inflated 3D balloons: chairs, lamps, books, plants, coffee cups, design tools. All rendered with soft global illumination, no harsh shadows, smooth subdivision-surface modeling - the "puffy" feeling is achieved through volumetric form and gentle chrome lighting. Leaf-organic motifs: inflated leaves and palm fronds drift through compositions as decorative elements, each rotating slowly on its own axis at 30-60 second intervals. Brass-warm "page numbers" appear inflated as 3D objects at the bottom of each chamber. ## Prompts for Implementation Build the site as a studio's quiet portfolio review - each project considered as a 3D object on a stage. Hero: full viewport. The studio's name "renai.works" appears in Space Grotesk 700 at 160px, with each letter rendered as if it were itself an inflated 3D balloon-letterform. The hero stages a single inflated leaf-object that rotates gently at 0.05 radians per second around its Y-axis. The page background is deep-navy with a subtle vignette darkening the corners. Use slide-reveal pattern (4% corpus): scrolling into each project chamber triggers a slide from the right - the inflated-3d object slides in from off-screen-right while the text content slides up from below, both arriving over 1200ms with cubic-bezier easing. Each project's main inflated-3d object can be rotated by cursor movement - hovering causes a subtle 3D-tilt response (max 15 degrees) following cursor position. Lens-flare streaks pulse subtly across inflated objects every 8 seconds. NO pricing, NO buy-now CTAs, NO conventional case-study templates - this is a studio's contemplative archive. Cursor is a small inflated sphere (6px) with a sky-chrome highlight, leaving a 300ms decay trail of 3 fading orbs. Section dividers are single rotating leaf-organic objects centered in empty space. ## Uniqueness Notes - Inflated-3d aesthetic (1% corpus) deployed at full commitment with every object inflated, including typography rendered as 3D balloon-forms - extreme commitment to the aesthetic absent from the corpus. - Navy-metallic palette (2% corpus) paired with inflated-3d and zen-contemplative tone - the cool-luxury inflation reads completely differently from the typical playful inflated-3d pairings. - Editorial-flow layout (3% corpus) combining text columns with 3D-object stages in asymmetric magazine rhythm - distinct from the corpus norm of card grids or hero-then-features. - Chosen seed: aesthetic: inflated-3d, layout: editorial-flow, typography: geometric-sans, palette: navy-metallic, patterns: slide-reveal, imagery: lens-flare, motifs: leaf-organic, tone: zen-contemplative - Avoided patterns from frequency analysis: parallax (94%), card-grid (90%), photography (90%) - imagery is 3D-rendered, warm palette (93%) - navy-metallic is structured coolness, mono typography (81%), mysterious-moody tone (70%) - zen-contemplative used.