# Design Language for iisugi.com ## Aesthetics and Tone iisugi.com (이이스기 — a Korean-Japanese linguistic blend suggesting "above/beyond cedar") channels a dopamine aesthetic — high-saturation color combinations, unexpected visual rewards, and a design language engineered to trigger delight at every scroll position. Think confetti cannons meeting editorial sophistication — a magazine spread that refuses to be boring. The site draws inspiration from Tyler the Creator's GOLF brand visuals, Japanese variety show graphics, and the unapologetic color maximalism of 2020s design trends. The tone is raw-authentic — no pretense, no corporate polish, just vibrant honest expression. The dopamine approach creates an addictive browsing experience where each scroll reveal provides a small hit of visual pleasure through unexpected color combinations, playful scale shifts, and micro-animation surprises. The cedar (sugi) reference adds an organic grounding — natural growth expressed through synthetic color. ## Layout Motifs and Structure The layout uses a **magazine-spread** architecture — editorial-style compositions that treat each viewport-height section as a double-page spread in a high-fashion publication. **Magazine Spread Architecture:** - Each section spans 100vh, divided asymmetrically into a dominant image/visual zone (65%) and a text zone (35%) - The split alternates sides: odd sections have visual-left/text-right, even sections reverse - Within the text zones: large pull quotes, body text, and small detail captions create typographic hierarchy - Between sections: full-width color-block dividers (40px height) in contrasting palette colors **Spread Components:** - Spread 1 (Hero): Oversized title filling the visual zone with chromatic color, subtitle in the text zone - Spread 2: Feature showcase with large imagery zone, feature description in text zone - Spread 3: Quote/testimonial with decorative text treatment across visual zone, attribution in text zone - Spread 4: Multi-image collage in visual zone (4 images in a 2x2 grid with 4px gaps), narrative text in text zone - Spread 5: Contact/CTA with bold typographic treatment spanning both zones **Responsive Adaptation:** On mobile, the magazine spread stacks: visual zone on top (60vh), text zone below, maintaining the editorial rhythm vertically. ## Typography and Palette **Typography:** - **Headlines:** "Syne" (Google Fonts) — a bold variable typeface with distinctive character widths at 3rem-6rem, weight 700-800. Its wide, attention-grabbing forms embody the dopamine energy. - **Body Text:** "DM Sans" (Google Fonts) — clean and modern at 1rem, weight 400, line height 1.6. Provides calm readability that balances the headline energy. - **Pull Quotes:** "Syne" at 2rem-2.5rem, weight 600, italic, with increased line height (1.4) for dramatic editorial presence. - **Captions/Labels:** "Syne Mono" (Google Fonts) — matching monospace at 0.75rem for image captions, section numbers, and metadata. **Color Palette:** - **Chrome Silver:** #c0c0d0 — metallic mid-tone for surfaces and cards - **Hot Magenta:** #ff2d7b — primary dopamine color, used for headlines, accents, and primary interactions - **Electric Chartreuse:** #c6f420 — acid green-yellow for secondary highlights and hover states - **Ultra Violet:** #6c3ec1 — deep purple for text on light backgrounds and tertiary accents - **Sunburn Orange:** #ff6b35 — warm orange for CTA elements and warming accents - **Deep Night:** #0f0f1a — near-black with blue tint for dark sections and primary body text - **Bleach White:** #fafafa — clean white for light backgrounds and reversed text - **Bubblegum Pink:** #ffb3d1 — soft pink for secondary surfaces and gentle highlights ## Imagery and Motifs **Nature Element Accents:** - Stylized cedar/conifer SVG silhouettes placed as decorative elements at section edges, rendered in palette colors at low opacity (0.1-0.15) - Organic curved shapes inspired by tree growth rings used as background patterns - Small leaf-like icons as bullet points and list markers **Tropical Fish Color Logic:** - The color combinations draw inspiration from tropical fish — unexpected pairings of hot magenta with electric chartreuse, ultraviolet with sunburn orange - Each section introduces a new color dominant, creating a reef-like variety as the user scrolls through the page - Color blocks between sections serve as "coral formations" — small bursts of concentrated color **Blur-Focus Effects:** - On section entry, the visual zone begins blurred (filter: blur(8px)) and focuses to sharp over 600ms - This creates a camera rack-focus effect that draws attention to new content - Hover effects on images add a slight blur to surrounding elements, keeping the hovered item in sharp focus **Kinetic Scale Shifts:** - Headlines scale from 0.8 to 1.0 on scroll entry with overshoot (cubic-bezier with bounce) - Images in the visual zone scale from 1.05 to 1.0 (slight zoom-out settle) on section entry - These micro-scale animations create the dopamine reward feeling at each scroll milestone ## Prompts for Implementation Build the page as a vertical sequence of magazine spreads. Each section is a flex container (flex-direction: row on desktop, column on mobile) with 100vh minimum height. The visual zone uses overflow: hidden with an inner container that handles the scale animation on the image/visual content. The blur-focus scroll reveal: use Intersection Observer with a threshold array [0, 0.25, 0.5, 0.75, 1]. As the section enters from 0 to 0.5 intersection, interpolate the blur filter from 8px to 0px on the visual zone. Simultaneously scale the image from 1.05 to 1.0. The dopamine color system: each section div has a CSS custom property (--section-accent) set to its dominant color. All child elements reference this variable, so changing the section's accent color automatically updates its entire visual system. Implement the color-block dividers between sections as full-width divs (40px height) with the accent color of the upcoming section, creating a preview/transition signal. The headline bounce animation uses transform: scale() with a spring-like cubic-bezier(0.175, 0.885, 0.32, 1.275) that overshoots and settles. Trigger on scroll entry via Intersection Observer. For the chrome silver card surfaces: use background: linear-gradient(135deg, #c0c0d0 0%, #e0e0e8 50%, #c0c0d0 100%) to create a subtle metallic gradient sheen. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the magazine editorial format and dopamine color system create engagement through visual pleasure rather than conversion pressure. ## Uniqueness Notes 1. **Magazine-spread editorial with dopamine color science:** The formal editorial structure combined with intentionally overstimulating color choices creates a unique push-pull between sophistication and exuberance. 2. **Blur-to-focus scroll reveal:** The camera rack-focus effect on section entry is a distinctive cinematic technique rarely seen in web design scroll animations. 3. **Tropical fish color logic:** Using tropical reef fish as the inspiration for unexpected color pairings creates a natural-yet-electric palette rationale that avoids arbitrary color choices. 4. **Cedar tree organic motifs in chromatic context:** Subtle tree-ring and conifer silhouettes ground the synthetic dopamine colors in natural forms, creating unusual visual tension. 5. **Section-scoped CSS custom properties for color theming:** Each section controlling its own accent color variable creates a technically elegant color-shifting system. **Seed/Style:** aesthetic: dopamine, layout: magazine-spread, typography: slab-serif, palette: chrome-metallic, patterns: blur-focus, imagery: nature-elements, motifs: tropical-fish, tone: raw-authentic **Avoided Overused Patterns:** corporate aesthetic (74%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (75%), minimal imagery (84%), tech motifs (81%). This design uses dopamine aesthetic, magazine-spread layout, chrome-metallic palette, nature-elements imagery, and raw-authentic tone.