# Design Language for gunsul.studio ## Aesthetics and Tone gunsul.studio inhabits the visual world of a Korean architectural drafting office from the late 1970s -- the kind of room where vellum blueprints curl at their edges on tilted drawing tables, where Rotring pens lie uncapped next to rulers stained with decades of India ink, and where the amber light of a desk lamp turns every surface the color of aged parchment. The word "gunsul" (건설) means construction or building in Korean, and this site treats that etymology as its entire design philosophy: everything visible is a constructed artifact, drawn by hand, built with intention, showing the marks of its own making. The aesthetic is **retro-architectural** -- not the nostalgic sentimentality of Instagram filters or the twee approximation of vintage that decorates coffee shops, but the specific, tactile reality of mid-century Asian architectural practice. Every element on screen should feel as though it was drafted with a parallel ruler and triangle, printed on paper that has since yellowed, and filed in a cabinet that smells of cedar and cigarette smoke. The tone is **nostalgic-retro** in the truest sense: a genuine ache for the discipline and craft of analog construction drawing, before CAD software flattened everything into clinical precision. The mood draws from three specific sources: (1) the architectural plates of Korean modernist architect Kim Swoo-geun, whose hand-rendered perspectives of the Olympic Gymnasium and Space Group buildings combined brutal concrete forms with almost calligraphic linework; (2) the sepia-toned construction photography of post-war Seoul, where scaffolding made of bamboo and steel framed rising concrete shells against hazy skies; (3) the visual language of 1960s-70s Korean industrial design manuals, with their meticulous cross-sections, exploded views, and hand-lettered annotations in a mix of Hangul and technical English. This is not a celebration of architecture as finished product. It is a celebration of architecture as process -- the blueprint before the building, the section before the pour, the annotation before the approval. The site itself is a drawing in progress, always revealing its own construction lines. ## Layout Motifs and Structure The layout follows a **modular-blocks** architecture inspired by the rigid, rectilinear discipline of architectural drawing sheets. The page is divided into discrete rectangular modules -- each one framed by thin hairline borders (#5C4A3A at 0.5px) that evoke the title block borders of a technical drawing. These modules do not float freely; they snap to a strict underlying grid of 8 columns with 16px gutters, max-width 1200px, creating a composition that feels engineered rather than designed. **The Drawing Sheet Metaphor:** The entire viewport is treated as a single oversized architectural drawing sheet. The background is not white but aged vellum (#F5ECD7), with a subtle paper-fiber texture applied via CSS background-image using a repeating SVG pattern of faint, irregular horizontal lines (opacity 0.03). In the bottom-right corner of each "sheet" (i.e., each major page section), a title block appears: a small rectangular module (roughly 280px x 120px) containing the section name in technical lettering, a revision number, a date stamp, and a thin horizontal rule. This title block is always present, always in the same relative position, establishing a visual rhythm that anchors every section of the scroll. **Module Types:** There are exactly four module types, and all content must fit into one of them: 1. **Full-Width Drawing Module (FWD):** Spans all 8 columns. Used for hero sections, panoramic imagery, and full-bleed narrative moments. Height is variable but always a multiple of 80px (the baseline unit). Contains a 1px dashed border in #8B7355 that suggests a fold line. 2. **Half-Sheet Module (HSM):** Spans 4 columns. Used for paired content -- text on one side, diagram on the other. These always appear in pairs, side by side, creating a bilateral symmetry that echoes the left-page/right-page spread of an architectural document set. 3. **Detail Module (DM):** Spans 2 columns. Used for small, focused content -- a single statistic, a callout annotation, a thumbnail diagram. These appear in clusters of 2-4, arranged in rows, creating a density that feels like the margin notes on a working drawing. 4. **Annotation Strip (AS):** Spans the full width but is only 48-64px tall. Used for horizontal dividers that carry text -- revision notes, section labels, dates. These strips have a slightly darker background (#EDE0C4) and text set in a monospaced technical font, creating a visual rhythm that breaks the vertical scroll into discrete "sheets." **Vertical Rhythm:** Sections are separated not by whitespace alone but by fold lines -- thin dashed horizontal rules that span the full viewport width, extending beyond the content area into the margins. These fold lines carry small triangular fold markers at their endpoints (CSS triangles using border tricks), suggesting the physical creases of a folded drawing set. The spacing between sections is exactly 120px, a deliberate pause that feels like turning to the next sheet in a set. **No Traditional Navigation:** There is no sticky header, no hamburger menu, no footer with links. Navigation is handled through an "index sheet" -- a fixed-position module in the top-left corner (48px x 48px when collapsed, expanding to 320px x auto on hover) that displays a miniature table of contents styled as a drawing index, with section numbers (A1, A2, B1, B2...) in the alphanumeric format used in architectural drawing sets. Clicking a section number scrolls to that sheet. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- weight 700, regular (not italic) for this site. Playfair's high-contrast thick-thin strokes evoke the precision of engraved lettering on architectural title blocks -- the kind of elegant, authoritative letterforms that appeared on presentation drawings meant for clients and review boards. Used at 3rem-5.5rem for sheet titles and primary headings. Letter-spacing is set to 0.04em, line-height 1.05. Always rendered in #3D2B1A (dark walnut), creating a rich, inky presence against the vellum background. Section numbers prefixing titles (e.g., "A1. ") are set in the same face but at 60% of the heading size, vertically aligned to the baseline. - **Body / Running Text:** "Source Serif 4" (Google Fonts) -- weight 400, regular. This transitional serif carries the quiet authority of specification documents and construction notes. Its moderate contrast and generous x-height make it eminently readable at body sizes (1rem / 16px, line-height 1.72). Color: #5C4A3A (warm dark brown), which reads as a faded but legible ink on the vellum ground. Paragraphs are set with a first-line indent of 1.5em (no space between paragraphs) -- a deliberately bookish convention that reinforces the archival quality. - **Technical / Annotations:** "IBM Plex Mono" (Google Fonts) -- weight 400 and 300. This is the workhorse font for all technical elements: module labels, title block text, revision stamps, section indices, code snippets, metadata. Used at 0.75rem-0.875rem, always in uppercase with letter-spacing 0.12em, color #8B7355 (faded brown). This font is the voice of the draftsperson's annotations -- precise, impersonal, functional. It appears in title blocks, annotation strips, and margin notes. - **Accent / Hand-Lettering Feel:** "Caveat" (Google Fonts) -- weight 400-700. Used sparingly for elements that should feel hand-written: margin annotations, correction notes, sketch labels. This font appears at 1rem-1.25rem, always at a slight CSS rotation (transform: rotate(-1.5deg) to rotate(1deg)), in #9B4D3A (brick-red, like a correction pen). It is never used for primary content -- only for the delightful moments where a human hand seems to have intervened on the mechanical drawing. **Palette:** The palette is drawn entirely from the tonal range of aged paper, faded inks, and oxidized metal -- the sepia-nostalgic spectrum of a document archive. | Role | Color | Hex | Reference | |------|-------|-----|-----------| | Vellum Ground | Aged parchment | #F5ECD7 | The yellowed background of every drawing sheet | | Warm Cream | Lighter vellum | #FAF4E8 | Highlight areas, hover states, expanded modules | | Walnut Ink | Primary text | #3D2B1A | The dark brown-black of concentrated India ink | | Faded Ink | Secondary text | #5C4A3A | Text that has been exposed to light for decades | | Annotation Brown | Tertiary text | #8B7355 | Technical annotations, metadata, labels | | Blueprint Trace | Accent line | #4A6A8C | The blue of a faded blueprint diazo print | | Correction Red | Hand annotations | #9B4D3A | Red pencil corrections on working drawings | | Patina Green | Accent highlight | #5B7A5E | The verdigris of oxidized copper flashing | | Title Block BG | Section dividers | #EDE0C4 | Slightly darker vellum for annotation strips | | Deep Shadow | Darkest tone | #2A1F14 | Drop shadows, deepest contrast moments | The palette never includes pure black (#000) or pure white (#fff). The darkest value is #2A1F14 (deep shadow); the lightest is #FAF4E8 (warm cream). This constrained tonal range ensures the entire site feels like a single, cohesive material -- paper -- rather than a screen. ## Imagery and Motifs **Paper-Aged Imagery:** The primary imagery mode is **paper-aged** -- all visual elements are treated as if they exist on physical paper that has aged for decades. Photographs (if any appear) are processed through a CSS filter chain: `filter: sepia(0.45) contrast(0.92) brightness(1.04) saturate(0.7)`, giving them the warm, desaturated quality of 1970s color photography. But photographs are rare. The dominant imagery is **architectural line drawing** -- diagrams, sections, elevations, and plan views rendered as SVG line art with a deliberately hand-drawn quality. **Line Drawing Techniques:** All SVG illustrations use a stroke style that simulates drafting pen work: stroke-width varies between 0.5px (dimension lines) and 2.5px (section cuts), stroke-linecap is "round," and a subtle dash pattern (stroke-dasharray: 0.5 1) is applied to secondary lines to simulate the slightly imperfect ink flow of a Rapidograph pen. Primary contour lines are solid and confident; secondary annotation lines are thinner and dashed; hidden lines use the architectural convention of short dashes (stroke-dasharray: 4 3). Colors follow the palette strictly: primary lines in #3D2B1A, annotation lines in #8B7355, accent elements in #4A6A8C (the blueprint trace blue). **The Paper Grain:** A persistent paper texture overlays the entire site. This is achieved through a full-viewport pseudo-element (::after on body) with a repeating noise SVG pattern at opacity 0.04, pointer-events: none. The noise pattern is warm-biased (slightly more variation in the red/yellow channels) to reinforce the aged-paper quality. On scroll, this grain layer remains fixed (background-attachment: fixed), creating a parallax effect where content slides beneath the paper surface -- as if the user is not scrolling a page but sliding a drawing beneath a fixed sheet of tracing paper. **Vintage Motifs -- Architectural Specifics:** The "vintage" motif vocabulary is drawn exclusively from architectural drafting conventions, avoiding the generic vintage cliches (no typewriters, no film cameras, no vinyl records): 1. **Section Markers:** Small circles (12px diameter) with a diagonal line through them, placed at the edges of modules to indicate cross-section references. These are pure SVG, animated with a slow fade-in (opacity 0 to 1 over 800ms) as they enter the viewport. They reference the standard architectural convention for indicating where a section cut is taken. 2. **Dimension Lines:** Thin lines with small perpendicular ticks at each end, spanning between elements to indicate spatial relationships. These are decorative -- they don't measure anything real -- but they create the visual language of measured, deliberate composition. Animated with a draw-on effect (stroke-dashoffset animation) that makes them appear to be drawn by an invisible hand. 3. **North Arrows:** Small compass roses or simple north arrows appear in the corner of major modules, purely decorative but reinforcing the cartographic/architectural language. Rendered as SVG with the #4A6A8C blueprint blue. 4. **Revision Clouds:** Instead of standard highlights or emphasis markers, important content is enclosed in revision clouds -- the irregular, bulging outlines that architects use to mark changes on a revised drawing. These clouds are rendered as SVG paths with a deliberately bumpy cubic-bezier outline, stroke-width 1.5px in #9B4D3A (correction red), no fill. 5. **Fold Marks and Registration Crosses:** Small + marks appear at the corners of major sections, simulating the registration marks used in print production. Fold marks (small triangular notches) appear along the edges of full-width modules. 6. **Stamp Marks:** Certain modules carry a faint circular "APPROVED" or "REVIEWED" stamp mark in the corner -- a CSS-only element using border-radius, transform: rotate(-12deg), and text set in IBM Plex Mono uppercase. These stamps are rendered at very low opacity (0.08-0.12) in #9B4D3A, barely visible, like the ghost of a rubber stamp impression that has faded over decades. ## Prompts for Implementation **Full-Screen Narrative Architecture:** The entire site must be experienced as a single continuous scroll through an architectural drawing set. There is no traditional homepage-about-contact structure. Instead, the site is organized as a sequence of "sheets" (A-series, B-series), each unfolding a different aspect of gunsul.studio's identity. The scroll itself is the narrative -- the act of moving through the drawing set IS the story of the studio. **The Opening Sheet (Sheet A0):** The site opens to a full-viewport aged vellum field (#F5ECD7) with the paper grain overlay. In the center-left of the viewport, the domain "gunsul.studio" appears in Playfair Display 700 at 4.5rem, #3D2B1A, with a thin horizontal rule extending from the last letter to the right edge of the viewport (like a leader line on a drawing). Below, in IBM Plex Mono 300 at 0.8rem, uppercase, letter-spacing 0.15em, the subtitle reads as a technical description. In the bottom-right, a title block module carries metadata: "SHEET A0 / REV 03 / 2026.03.09" in IBM Plex Mono. Nothing else. No animation on load -- the stillness is the statement. After 2 seconds of inactivity, a single dimension line fades in between the title and the title block, with tick marks at each end, measuring the space between them. This is the only motion on the opening sheet. **Scroll-Activated Drawing Reveals:** As the user scrolls past Sheet A0, subsequent content modules are revealed through a pulse-attention animation pattern: modules begin at opacity 0 and transform: translateY(24px), then transition to their final position over 600ms with an ease-out curve. But the key differentiator is that the module's border (the hairline frame) draws itself on FIRST -- a stroke-dashoffset animation that traces the rectangle's perimeter over 400ms -- and only AFTER the border is complete does the interior content fade in. This creates the illusion that each module is being drafted into existence: first the frame is drawn, then the content is filled in. The timing is staggered by 80ms per module in a row, so a row of four Detail Modules draws left-to-right like a draftsperson working across the sheet. **The Section Transition:** Between major sections (A-series to B-series), a full-width Annotation Strip slides into view carrying a section label in IBM Plex Mono. As this strip enters the viewport, the paper grain overlay shifts subtly in hue (a CSS filter: hue-rotate(3deg) transition on the grain layer), simulating the slight color variation between different sheets of aged paper in a document set. This is an almost imperceptible change -- viewers may not consciously notice it, but it creates a subliminal sense of turning to a new sheet. **Interactive Revision Clouds:** Key content blocks (pull quotes, important statements, highlighted data) are enclosed in SVG revision clouds. On hover, the revision cloud's stroke animates from #9B4D3A at 0.15 opacity to full opacity over 300ms, and the enclosed content gains a subtle warm glow (box-shadow: 0 0 20px rgba(155, 77, 58, 0.08)). This hover effect is the primary interactive affordance on the site -- it is the equivalent of holding a drawing up to the light to examine a revision. **Parallax Drawing Layers:** Certain full-width modules contain layered SVG illustrations (an architectural elevation, for example) composed of 3-4 separate SVG layers: (1) a background context layer (light, #8B7355 at 0.2 opacity), (2) a primary structure layer (#3D2B1A, full opacity), (3) an annotation layer (#4A6A8C dimension lines and labels), and (4) a correction layer (#9B4D3A revision marks). These layers are attached to a parallax scroll effect where each layer moves at a slightly different rate (transform: translateY(calc(var(--scroll) * -0.02)) through translateY(calc(var(--scroll) * -0.08))), creating a subtle depth effect that makes the drawing feel three-dimensional -- as if the annotation layer floats above the structural layer on a separate sheet of tracing paper. **AVOID:** - CTA buttons, pricing blocks, testimonial carousels, stat-grids, or any SaaS landing page conventions - Smooth scroll hijacking or scroll-jacking that overrides native scroll behavior - Loading spinners or skeleton screens (the paper is always there; content draws itself onto it) - Generic vintage elements (typewriters, film grain for its own sake, vinyl records, cassette tapes) - Bright or saturated colors that break the sepia-nostalgic palette constraint - Drop shadows with blue or gray tones (all shadows use #2A1F14 at low opacity) ## Uniqueness Notes **Differentiators from other designs:** 1. **Architectural Drawing Set as Navigation Metaphor:** No other design in the portfolio uses the structure of a technical architectural drawing set as its organizational framework. The sheet numbering system (A0, A1, B1, B2), title blocks, revision stamps, and section markers create a navigation language borrowed entirely from construction documentation. This is not "architecture-themed decoration" -- it is a functional appropriation of how architects actually organize information, applied to a web experience. The modular-blocks layout at 8% frequency supports this since it is underused enough to feel fresh, and the specific adaptation to architectural modules (FWD, HSM, DM, AS) is entirely novel. 2. **Border-First Animation Sequence:** The pulse-attention animation pattern (5% frequency, deeply underused) is implemented here in a way found nowhere else in the portfolio: module borders draw themselves on via stroke-dashoffset BEFORE content fades in, creating a drafting-in-progress illusion. Every other design that uses fade-in treats the border and content as a single unit. By separating them temporally -- border first, content second -- this design creates a unique animation signature that directly serves the architectural drafting metaphor. 3. **Paper-as-Material-Not-Background:** At 3% frequency, paper-aged imagery is nearly absent from the portfolio. But even where it appears elsewhere, paper is treated as a background texture -- a decorative overlay. Here, paper is the primary material: the vellum ground, the paper grain parallax, the tracing paper layering of SVG illustrations, the fold marks and registration crosses. The entire site is built FROM paper, not decorated WITH it. The fixed-position grain overlay that creates a tracing-paper parallax effect -- content sliding beneath a stationary paper surface -- is a specific technical implementation found nowhere else. 4. **Korean Architectural Vernacular:** The specific cultural reference point -- Korean modernist architectural practice from the 1960s-70s, the work of Kim Swoo-geun, the visual language of post-war Seoul construction -- is entirely absent from any other design. While "vintage" motifs appear at 78% frequency across the portfolio, those instances reference Western vintage conventions (typewriters, film cameras, Victorian ornament). This design's vintage vocabulary is specifically and exclusively architectural-Korean: section markers, dimension lines, north arrows, revision clouds, title blocks, and the particular drafting conventions of an Asian architectural office. 5. **No Pure Black or White:** The strict tonal constraint (#2A1F14 to #FAF4E8, no #000 or #fff) creates a perceptual environment unlike any other design in the portfolio. Every element exists within the narrow tonal range of aged paper and faded ink, producing a visual unity that makes the entire site feel like a single physical artifact rather than a collection of screen elements. **Documented Seed/Style:** aesthetic: retro, layout: modular-blocks, typography: playfair-elegant, palette: sepia-nostalgic, patterns: pulse-attention, imagery: paper-aged, motifs: vintage, tone: nostalgic-retro **Avoided Overused Patterns:** - "playful" aesthetic (97% -- completely avoided; this design is sober, disciplined, and professional) - "centered" layout (99% -- avoided; content uses a grid-snapped modular system with left-biased composition) - "minimal" imagery (95% -- avoided; imagery is dense, layered, and materially specific) - "friendly" tone (97% -- avoided; tone is authoritative and technical, the voice of a drafting office) - "scroll-triggered" at 96% and "parallax" at 80% are used but in highly specific, non-generic implementations: scroll triggers the border-first drawing animation (unique), and parallax is used for the tracing-paper grain layering (unique), not standard section parallax - "vintage" motifs at 78% are technically present but completely recontextualized through architectural drafting vocabulary rather than generic vintage tropes