# Design Language for gunsul.studio ## Aesthetics and Tone **gunsul.studio** is a Korean word — 건설 (*geonseol*), construction — carrying within it both the physical act of building a city and the quieter, romantic dream of what that city might become. The site lives precisely at that threshold: **the pastoral-romantic memory of a city that does not yet exist**. It is a studio portfolio that refuses the noise of modernity while using the vocabulary of modernity — flat, precise, candy-colored — to render something that feels like an old postcard from a future city. Think Toulouse-Lautrec's lithograph posters filtered through the geometric silhouettes of Art Deco travel placards, then reprinted on matte paper that smells faintly of rain on warm concrete. The tone is **pastoral-romantic but architecturally precise**. There is no cynicism here, no ironic detachment. The city in these illustrations is one where the streetcar runs on time, the canal reflects the evening sky in flat planes of deep teal, and the tower in the distance — always the same tower, always slightly different — appears on every page as a recurring motif like a signature. The mood is dusk-golden: neither nostalgic collapse nor futurist proclamation, just the long light before the streetlamps come on. **Aesthetic direction:** Flat-design with strict value separation — no gradients, no shadows, no texture on primary shapes. Color fields butt directly against each other, silhouettes crisp as die-cuts. The Art Deco influence lives in geometry: radial sunrise bursts, chevron ornaments, stepped piers, fan-vault arcades reduced to flat planes. Every element that could be rounded is instead faceted. The noise-texture appears only as a fine overlay grain on the background canvas — not on shapes — referencing letterpress print stock, not digital distress. **Candy-bright palette discipline:** The candy palette is deliberately constrained to four hues plus near-black and paper-white, so the brightness reads as intentional and printerly rather than chaotic. These are the colors of vintage travel poster ink, not carnival lights. --- ## Layout Motifs and Structure **Primary layout: Split-screen narrative with hero-dominant left panel.** The viewport divides into a 5:7 ratio at desktop — a narrow left editorial strip versus a dominant right illustration field — reversing on mobile to a single stacked column. This combats the corpus's 90% centered dominance. **Compositional logic:** - Left panel: typographic matter anchored to a baseline grid of 8px. All type sits on explicit horizontal rules — visible 1px lines in `Concrete (#1C1C1E)` that function as Art Deco register marks. The left panel has zero illustration; it is purely typographic architecture. - Right panel: the **city-urban illustration field**, a single full-bleed flat-design cityscape that shifts composition from section to section. Buildings are geometric silhouettes — stepped pyramids, fan-shaped radio towers, arched bridges, repeating arcade columns — in the four candy colors against the paper-white ground. No photography. - The split is broken deliberately at one point per scroll session: the cityscape floods into the left panel for a single full-bleed interlude, then retreats. This is the only "immersive" moment. **Scroll behavior:** Ripple-wave transitions between sections. When the user scrolls past a threshold, a radial ripple (like a stone dropped in the canal) expands outward from the scroll trigger point, revealing the next composition underneath. The ripple is not a CSS blur — it is a geometric wavefront rendered in SVG/canvas, each concentric ring a solid-color band cycling through the candy palette, animating at 200–400ms with a spring easing curve. **Navigation:** Minimal-navigation — a single horizontal bar at the top, no hamburger menus, no sticky overlays. Four words maximum in the nav. At desktop, the nav sits in the left panel's top 64px. At mobile it floats as a thin top bar with zero decoration. No dropdowns. The nav items are separated by Art Deco diamond dividers (◆) rather than pipes or spaces. **Grid:** 12-column at wide viewport, 4-column at mobile. Gutters are 24px. All major content blocks occupy multiples of 3 columns — never 5 or 7. The asymmetry comes from the split, not from irregular column counts. --- ## Typography and Palette **Primary Display — [`Josefin Sans`](https://fonts.google.com/specimen/Josefin+Sans)**, weight 700, all-caps. Josefin Sans is a geometric sans with deliberately short descenders, an inline stroke on certain glyphs, and strong Art Deco geometry in its letterforms — the angled terminals, the nearly-monoline construction, the diamond dots on `i` and `j`. Used for: site name, section titles, navigation labels. Tracking: +0.15em. Size: clamp(2.4rem, 5vw, 6rem) for display; 0.75rem for nav. **Secondary Body — [`DM Sans`](https://fonts.google.com/specimen/DM+Sans)**, weight 300 for prose, weight 500 for subheadings. DM Sans has the clean warmth of a mid-century book typeface without historical costume — it reads as "designed today but informed by the past." Size: 1rem / 1.7 line-height for body; 1.125rem / 1.5 for subheads. **Accent Numerals — [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue)**, weight 400. Used exclusively for project year dates, sequence numbers, and the single large numeral that decorates the editorial strip between sections. A vertical Bebas Neue numeral (e.g. "2024") rotated 90° counter-clockwise, serving as an Art Deco column capital. **Palette — five working colors plus two neutrals:** | Role | Name | Hex | |------|------|-----| | Ink / Near-black | Concrete | `#1C1C1E` | | Background / Paper | Chalk | `#F5F0E8` | | Primary candy accent | Tangerine | `#FF6B35` | | Secondary candy accent | Cobalt | `#2D5BE3` | | Tertiary candy accent | Citron | `#E8D44D` | | Quaternary candy accent | Cerise | `#E8335A` | | Neutral mid | Canal | `#6B8CAE` | All six colors are used in the cityscape flat illustrations. Tangerine is the dominant shape color. Cobalt and Cerise are used for architectural accent planes. Citron appears in exactly one element per section — never repeated. Canal is reserved for water, sky bands, and the noise-texture tint. **Noise texture implementation:** A single SVG `feTurbulence` + `feColorMatrix` filter, applied at 4% opacity as a background overlay on `Chalk`. The grain scale is 0.65 (fine), monochromatic, not multicolor. Shapes underneath remain flat — only the background reads as printed-paper rather than screen. --- ## Imagery and Motifs **All imagery is custom SVG flat illustration — zero photography.** Photography appears in 92% of the corpus; this site abstains completely. **The city iconography system — recurring geometric motifs:** - **The Tower**: A stepped Art Deco spire, 7 geometric tiers, flat silhouette in `Tangerine`. Appears as the wordmark companion in the nav, as a large hero illustration, and as a small repeating ornament in footers. Never the same scale twice. - **The Arcade**: A row of fan-vault arches in flat `Cobalt` — always horizontal, always five arches. Used as a section divider between scroll sections. - **The Canal**: A flat horizontal band split into three color planes — `Chalk` (sky), `Canal` (water), and one candy accent (reflection). Used at the bottom of illustration panels. The ripple animation originates from this element. - **The Tram**: A geometric flat side-profile tram in `Cerise` — rectangular body, circular wheels in `Concrete`. Appears sliding into frame from the left edge during the full-bleed interlude section. - **Sunrise Fan**: Radial burst of alternating `Citron` and `Chalk` rays, semicircular, emanating from the horizon line of the cityscape. Classic Art Deco travel poster motif. **Ornamental vocabulary:** - Diamond dividers ◆ in `Concrete` at 0.6em - Stepped border rules: 3px solid `Tangerine` + 1px gap + 1px solid `Concrete` - Art Deco register marks: thin 1px horizontal rules at every major type baseline - Chevron repeating pattern as SVG `` for section background accents (used sparingly — once per scroll session) **What is strictly forbidden:** gradients of any kind, drop shadows, rounded corners on any shape, photography, stock icons, emoji, 3D effects, parallax depth simulation, blurred backgrounds. --- ## Prompts for Implementation **The story to tell.** A visitor arrives at gunsul.studio the way one arrives at a city for the first time by train — you come in through the back, past the repair yards and the canal warehouses, and only at the last moment does the tower appear above the roofline. The site is that train journey compressed into a single scroll. The left panel narrates (spare, precise, typographic) while the right panel shows (city silhouettes building section by section). By the last section, the full skyline is assembled: every motif placed. Then the tram passes through. **Specific implementation guidance:** 1. **Ripple transition engine:** On scroll threshold, fire a radial SVG/canvas animation. A circle expands from the trigger point (always the bottom edge of the current section's canal element). Each 40px band of the expanding radius is a different candy color in order: `Tangerine → Cobalt → Citron → Cerise`. Total animation: 350ms, custom cubic-bezier(0.22, 1, 0.36, 1). The new section content is revealed underneath as the outermost ring clears it. Do NOT use CSS clip-path reveal — use actual canvas compositing or SVG mask animation. 2. **Art Deco register lines:** Every `

` in the left panel has a `::before` pseudo-element: a 1px horizontal rule in `Concrete`, full width of the panel, 12px above the heading. Every `

` also has a `::after` rule: same line, 8px below. This frames headings as typographic plates. 3. **Noise texture layer:** Single fixed-position `
` behind all content, `pointer-events: none`, containing an SVG with `feTurbulence baseFrequency="0.65" numOctaves="4"` filtered to monochrome at 4% opacity. The layer does NOT move on scroll. 4. **The Tower motif in the wordmark:** The nav logo is the word GUNSUL in Josefin Sans 700 all-caps + a small inline SVG of the Tower (20px tall, same `Tangerine` color) placed between the two words. Not a separate logo file — inline SVG within the `` tag. 5. **The full-bleed interlude:** Between sections 2 and 3, the right illustration panel expands to 100vw using a CSS transition on `width` (not `transform`), held for 2 seconds, then contracts back. During this moment, the left panel fades to opacity 0. The cityscape shown is the complete skyline — all motifs visible simultaneously. 6. **Tram animation:** At the end of the full-bleed interlude, the Tram SVG slides in from the left edge at `translateX(-100vw)` to `translateX(110vw)` over 1.8 seconds with linear easing (trams don't accelerate dramatically). It passes in front of the Arcade motif. 7. **Section cadence:** Four primary sections — Studio / Work / Method / Contact. Each section introduces one new motif into the cityscape: Studio = Tower, Work = Arcade, Method = Canal + Sunrise Fan, Contact = Tram. The skyline accumulates as the visitor reads. 8. **Biases to enforce:** No CTA buttons with rounded corners (use rectangular flat buttons in `Tangerine` with `Concrete` border). No pricing blocks. No stat grids. No testimonial carousels. The Work section shows 3–4 project tiles as flat illustrated cards, no hover shadows — hover reveals project name via a solid `Cobalt` color-fill overlay. --- ## Uniqueness Notes **Three differentiators that no other registry entry replicates:** 1. **Accumulating cityscape as narrative structure.** Most portfolios use static layouts with section dividers. Here the cityscape illustration literally builds — one architectural element per section — so the visitor's scroll position maps directly to a city under construction. By the last section, the city is complete. This is the site's primary storytelling device, not decoration. 2. **Ripple-wave as section transition using candy-palette color bands.** The corpus uses scroll-triggered animations at 38% but almost exclusively as fade-in or parallax. This ripple uses concentric solid-color rings — a direct reference to the canal motif — making the transition itself thematically connected to the content. The animation is not ornamental; it IS the canal. 3. **Art Deco geometry without ornamental excess.** Art Deco in the corpus appears as "art-deco ornate luxury" (gold, filigree, opulence). Here it is reduced to its geometric skeleton: stepped forms, radial fans, faceted silhouettes — all in flat candy colors, all derived from the city-construction semantic of the domain name. The Deco influence is structural, not decorative. **Chosen seed/style:** aesthetic: flat-design, layout: minimal-navigation, typography: art-deco-display, palette: candy-bright, patterns: ripple, imagery: noise-texture, motifs: city-urban, tone: pastoral-romantic **Avoided patterns (frequency analysis):** parallax (90% — overused), centered (90% — overused), hand-drawn (65% — overused), photography (90% — overused), stagger (62% — overused). This design uses ripple (14%), noise-texture (4%), city-urban (5%), minimal-navigation (underused), and flat-design aesthetic instead.