# Design Language for mosun.xyz ## Aesthetics and Tone mosun.xyz (Mosun — evokes the warmth and radiance of the sun) channels a blobitecture aesthetic — the soft, amorphous, organic forms of blob-shaped architecture applied to a creative platform celebrating solar energy, light, and radiant warmth. The site flows like molten glass — no sharp edges, no rigid grids, just smooth organic shapes that pool and flow like sunlight across surfaces. Inspiration draws from Greg Lynn's blob architecture, the organic buildings of Future Systems, the fluid forms of Zaha Hadid's early work, and the soft materiality of inflatable architecture. The tone is approachable-casual — relaxed, easygoing language that makes the platform feel like a sunny afternoon conversation. ## Layout Motifs and Structure The layout uses a **sidebar** architecture — a persistent navigation sidebar alongside main content, with blobitecture-influenced organic shapes softening the structural framework. **Sidebar Architecture:** - Persistent left sidebar: 240px wide, fixed position on desktop - Sidebar edges: organic blob shape (border-radius variations) rather than straight - Main content: remainder of viewport, scrolls independently - Sidebar contains navigation with blob-shaped active indicators - On mobile: sidebar collapses to bottom navigation bar - Background: sidebar darker, main lighter, blob-shaped transition between them **Section Sequence:** 1. **Dawn:** Hero in main area with tech-mono title on triadic color gradient, noise-texture organic backgrounds, retro-patterns dot-matrix accents 2. **Rays:** Solar energy features in sidebar-navigated sections with lottie-animation interactive sun diagrams and noise-texture atmospheric depth 3. **Spectrum:** Light spectrum exploration with triadic color demonstrations and retro-patterns decorative borders 4. **Glow:** Community showcase with blob-shaped profile containers and lottie-animation interactive light effects 5. **Dusk:** Footer as warm fade — approachable sign-off with noise-texture gradient dissolving into warmth ## Typography and Palette **Typography:** - **Headlines:** "Space Mono" (Google Fonts) — tech monospace at 2rem-3rem, weight 700. Its rigid mono forms create deliberate tension against the soft blobitecture shapes, making both more interesting. - **Body Text:** "Inter" (Google Fonts) — clean sans at 0.95rem, weight 400, line height 1.75. - **Code/Data:** "Space Mono" at 0.85rem, weight 400 for technical specifications and energy data. - **Labels:** "Inter" at 0.7rem, weight 500, uppercase, letter-spacing 0.06em. **Color Palette:** - **Sun Gold:** #d0a020 — rich golden yellow for primary accent - **Violet Deep:** #6030a0 — deep violet for secondary accent (triadic) - **Teal Bright:** #20a0a0 — bright teal for tertiary accent (triadic) - **Cream Warm:** #faf4e4 — warm cream for light backgrounds - **Amber Soft:** #f0e4c8 — soft amber for card backgrounds - **Dark Warm:** #181418 — warm near-black for dark sections - **Text Deep:** #1a1418 — warm dark for body text - **Border Soft:** #e0d8c4 — soft warm border ## Imagery and Motifs **Lottie-Animation Solar Diagrams:** Solar and light concepts illustrated with Lottie-format animations (or CSS @keyframes equivalents) — smoothly animating sun rays that pulse and rotate, light beams that refract through prismatic shapes, and energy flow particles that travel along curved paths. Animations loop seamlessly at 3-5 second cycles, creating living diagrams that embody solar energy. **Noise-Texture Atmospheric Surfaces:** All backgrounds feature a warm noise texture — pseudo-element with a subtle grain pattern at 0.04 opacity layered over gradients, creating the atmospheric haze of warm sunlight. Dark sections: noise at 0.06 opacity. The texture adds the organic imperfection that blobitecture demands. **Retro-Patterns Dot-Matrix Accents:** Decorative elements use retro dot-matrix patterns — repeating-radial-gradient creating regular dot grids (3px dots, 12px spacing) in Sun Gold at 0.06 opacity on light, 0.08 on dark. These patterns reference early solar panel grid arrays and vintage computing aesthetics. **Blobitecture Organic Containers:** Content containers use blob-shaped border-radius — border-radius: 40% 60% 55% 45% / 55% 45% 60% 40% (irregular organic curves). Cards, buttons, and section dividers all feature asymmetric rounded forms. Hover: border-radius values shift (transition: 600ms ease) creating the impression of organic shapes breathing. **Triadic Color Harmony:** The three accent colors (Sun Gold, Violet Deep, Teal Bright) form a triadic harmony on the color wheel, used in balanced proportion — Gold at 50% frequency, Violet at 30%, Teal at 20%. Each section features all three in varying proportions, creating the full-spectrum richness of sunlight split through a prism. ## Prompts for Implementation Build the page as a blobitecture solar platform. Layout: display: grid, grid-template-columns: 240px 1fr. Sidebar: position: sticky, top: 0, height: 100vh, overflow-y: auto. Blob containers: .blob-card { border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%; transition: border-radius 600ms ease; padding: 28px; } .blob-card:hover { border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%; } Noise texture: .noisy::after { content: ''; position: absolute; inset: 0; opacity: 0.04; background-size: 150px 150px; pointer-events: none; mix-blend-mode: overlay; } Retro dots: .dot-pattern { background: radial-gradient(circle, rgba(208,160,32,0.06) 1.5px, transparent 1.5px); background-size: 12px 12px; } Solar animation: @keyframes sunPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.05); opacity: 1; } } .sun-ray { animation: sunPulse 4s ease-in-out infinite; transform-origin: center; } Sidebar blob edge: .sidebar { border-right: none; clip-path: polygon(0 0, 90% 0, 100% 10%, 95% 30%, 100% 50%, 92% 70%, 100% 90%, 88% 100%, 0 100%); } AVOID: Sharp geometric solar panel aesthetics, sterile energy dashboards, and rigid technical layouts. Let the blobitecture fluidity and approachable-casual warmth create a solar platform that flows like sunlight itself. ## Uniqueness Notes 1. **Blobitecture for solar energy:** Soft organic forms embody the fluid, radiant quality of sunlight and solar energy. 2. **Sidebar with blob edges:** The structural sidebar gains organic personality through irregular clip-path edges. 3. **Tech-mono against blob forms:** Rigid monospace typography in deliberate tension with soft shapes creates visual interest through contrast. 4. **Triadic color as prismatic light:** Three-color harmony recreates the full spectrum of sunlight split through a prism. 5. **Approachable-casual tone for energy platform:** Relaxed language makes solar energy feel like a sunny conversation rather than technical documentation. **Seed/Style:** aesthetic: blobitecture, layout: sidebar, typography: tech-mono, palette: triadic, patterns: lottie-animation, imagery: noise-texture, motifs: retro-patterns, tone: approachable-casual **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses blobitecture aesthetic, sidebar layout, triadic palette, noise-texture imagery, and approachable-casual tone.