# Design Language for 계엄령.quest ## Aesthetics and Tone The visual identity of 계엄령.quest (martial law / quest) channels the paradox of oppressive political force rendered through the refined geometry of 1920s-1930s Art Deco design -- as if a clandestine resistance leaflet were typeset by a master Parisian printer working in gilded bronze and muted silk. The aesthetic draws from the grand civic architecture of the Deco era (the Chrysler Building's sunburst crown, the stepped ziggurat facades of Seoul's colonial-era government buildings, the radial patterns of the Palais de Chaillot) but filtered through a haze of aged newsprint, faded photographs, and the quiet tension of a state of emergency. The tone is **calm-serene** -- not the calm of comfort, but the eerie calm of a city under curfew at 3am, where the streetlights still glow amber through frosted glass and the geometry of the buildings feels more present than ever in the silence. There is no aggression in this design; instead, it communicates through restraint, through the weight of heavy serif letterforms spaced with deliberate precision, through muted colors that feel like they have been filtered through decades of institutional memory. The mood is contemplative and archival -- a digital exhibition space where the concept of martial law is examined as historical artifact rather than polemic. The inspiration is specifically the intersection of Korean political history (the martial law declarations of 1972, 1979, and 2024) with the Art Deco movement's fascination with geometric order, symmetry, and monumental scale. The decorative vocabulary of Deco -- sunbursts, chevrons, stepped forms, stylized flora -- becomes a visual metaphor for the tension between authoritarian order and organic human resistance. ## Layout Motifs and Structure The layout follows a **z-pattern** reading flow, guiding the eye diagonally across each viewport section in the natural scan path of someone reading a broadsheet newspaper or official government proclamation. Each section is structured as a full-viewport tableau, with content positioned along the z-path: top-left anchor (headline or date), diagonal midpoint (central image or key text), bottom-right resolution (contextual information or navigation prompt). **Primary grid:** A 12-column CSS grid with a strong central axis, but content deliberately offset to create the z-pattern diagonal energy. Columns 2-5 and 8-11 are the primary content zones, with columns 1, 6-7, and 12 serving as breathing channels filled with decorative Deco borders and geometric dividers. **Section architecture:** - **Hero section:** Full-viewport. A large Art Deco sunburst radiates from the center, rendered in thin gold (#b8a06a) lines over a deep charcoal (#2a2a2e) background. The domain name is centered in the sunburst, set in Playfair Display at approximately 6vw. Below it, the Korean text 계엄령 appears in a secondary weight, flanked by horizontal Deco rule lines with stepped terminals. - **Timeline sections (3-5 sections):** Each section presents a historical moment or thematic concept. The z-pattern alternates: odd sections place the primary image top-left with text bottom-right; even sections reverse this. Each section is separated by a full-width decorative Deco divider -- a horizontal band of chevrons, stepped pyramids, or stylized lotus patterns rendered in SVG. - **Archive section:** A grid of 6-8 photographic thumbnails arranged in a 3-column layout with Deco-styled frames (double-rule borders with corner ornaments). Each thumbnail uses a sepia-toned CSS filter and transitions to full color on hover. - **Closing section:** A single centered text block with a final Deco ornament, serving as an epilogue or contemplative statement. **Vertical rhythm:** Each section uses `min-height: 100vh` with `scroll-snap-align: start` to create a chapter-by-chapter reading experience. Sections use generous internal padding (8-12vh top/bottom) to prevent content from feeling cramped against viewport edges. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- weight 700 for primary titles, weight 400 italic for subtitles and pull quotes. The high-contrast thick-thin strokes of Playfair evoke engraved Art Deco signage and the masthead typography of 1930s broadsheet newspapers. Set at clamp(2.5rem, 5vw, 5rem) for h1, clamp(1.5rem, 3vw, 2.8rem) for h2. Letter-spacing: 0.06em for display sizes to create the airy, monumental quality of Deco architectural lettering. - **Body Text:** "Cormorant Garamond" (Google Fonts) -- weight 400 for body, weight 600 for emphasis. A refined transitional serif with elegant proportions that complement Playfair's Didone contrast. Set at clamp(1rem, 1.15vw, 1.15rem) with line-height 1.75 for generous, contemplative reading rhythm. Letter-spacing: 0.01em. - **Accent / Captions / Metadata:** "Josefin Sans" (Google Fonts) -- weight 300 for dates, captions, and navigational labels. This geometric sans-serif has distinctly Art Deco proportions (high x-height, geometric 'o', pointed vertices) that bridge the decorative serif headlines and the functional needs of UI text. Set at 0.8-0.95rem, uppercase with letter-spacing: 0.12em for caption use, creating the quality of engraved institutional plaques. - **Korean text:** Korean characters rendered in system fonts (Apple SD Gothic Neo / Noto Sans KR from Google Fonts weight 300/500) at sizes that optically match the Latin body text. Korean headlines use Noto Serif KR (Google Fonts) weight 700 for formal gravitas. **Palette:** The palette is **muted-vintage** -- colors that feel like they have been exposed to decades of institutional fluorescent light and archival storage. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background (primary) | Aged Parchment | `#f0ebe3` | Warm off-white with yellow undertone, like aged government paper | | Background (deep) | Curfew Charcoal | `#2a2a2e` | Near-black with a slight warm cast, for hero and contrast sections | | Text (primary) | Archive Ink | `#3b3836` | Warm dark brown-black, softer than pure black | | Text (secondary) | Institutional Gray | `#7a746d` | Muted warm gray for body text on light backgrounds | | Accent (primary) | Deco Gold | `#b8a06a` | Tarnished gold, neither bright nor dull -- the patina of brass fixtures | | Accent (secondary) | Gazette Olive | `#8a8868` | Muted olive-gold, for borders and secondary decorative elements | | Highlight | Censor Red | `#9e4a4a` | Desaturated brick red, used sparingly for dates and critical markers | | Surface | Smoke Glass | `#d8d2c8` | Light warm gray for card backgrounds and overlay panels | **Color usage rules:** - Never use the Censor Red for large surfaces; reserve it for dates, small markers, and hover states on critical elements - Deco Gold is the primary decorative color, used for all SVG ornaments, borders, and geometric patterns - The deep charcoal sections should not exceed 30% of total scroll height to maintain the archival brightness of the overall experience - All photography receives a CSS filter: `sepia(20%) contrast(90%) brightness(95%)` to harmonize with the muted palette ## Imagery and Motifs **Photography Treatment:** All photographic imagery is treated as archival documentation rather than decorative illustration. Images should evoke the aesthetic of press photography from the 1970s-1980s: slightly desaturated, with visible grain, printed on matte paper. This is achieved through layered CSS filters: a base sepia wash (`sepia(20%)`), reduced contrast (`contrast(90%)`), and a subtle warm brightness adjustment (`brightness(95%)`). On hover, images transition (0.6s ease) to a slightly more saturated state (`sepia(8%) contrast(95%) brightness(100%)`), as if the viewer is lifting the image closer to a light source to examine it more carefully. **Art Deco SVG Ornaments:** A custom library of 8-10 SVG decorative elements, all rendered in stroke-only treatment (stroke: Deco Gold #b8a06a, stroke-width: 1-2px, no fill): 1. **Sunburst:** Radial lines emanating from a central point, with alternating long and short rays -- the primary hero motif. 60-80 rays, animated to draw on page load using stroke-dasharray/stroke-dashoffset transitions. 2. **Chevron band:** A repeating horizontal strip of nested V-shapes, used as section dividers. Each chevron nests 3 layers deep, creating a stepped pyramid profile. 3. **Stepped pyramid:** Vertical ziggurats used as corner ornaments on content frames. 5-7 steps, with the narrowest step at top. 4. **Stylized lotus/chrysanthemum:** A geometric interpretation of the Korean national flower (mugunghwa/Rose of Sharon) rendered as concentric arcs with petal tips -- bridges the Deco geometric vocabulary with Korean botanical identity. 5. **Fan motif:** A quarter-circle radiating pattern used in corners and as background watermarks at very low opacity (3-5%). 6. **Vertical rule with terminals:** A simple vertical line capped with small geometric shapes (diamond, circle, or step) used for text column borders. 7. **Geometric frame:** A double-rule rectangular frame with decorative corner pieces (stepped or fan-shaped) used to contain photographs and featured text blocks. 8. **Wave pattern:** A continuous horizontal undulation (sine-wave derivative) with Deco angularity -- each crest is a pointed peak rather than a smooth curve. Used as a subtle background texture. **Floral-Botanical Motif Integration:** The floral-botanical motifs are specifically Art Deco interpretations of Korean flora -- not naturalistic illustrations but geometric stylizations: - The mugunghwa (Rose of Sharon) appears as a 5-petal radial form with golden ratio proportions, petals rendered as overlapping arcs rather than organic curves - Bamboo leaves appear as angular chevron clusters, used as repeating border patterns - Pine needle fans appear as radiating line groups, decorating the margins of text sections - These botanical elements are always rendered in the Deco Gold or Gazette Olive, maintaining the metallic, engraved quality of Deco decoration ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must function as a single-page vertical scroll narrative divided into 5-7 viewport-height chapters. There is no traditional navigation bar. Instead, a thin fixed vertical line (1px, Deco Gold, 80% viewport height) sits at the far right edge of the screen with small diamond-shaped markers indicating section positions -- a minimal scroll indicator that doubles as Deco decoration. Clicking a diamond smooth-scrolls to that section. **Slide-Reveal Animation Pattern:** The primary animation vocabulary is **slide-reveal**: content enters the viewport by sliding in from the edges (left, right, or bottom) while simultaneously revealing through a clipping mask. Specifically: - Headlines slide in from the left with a `clip-path: inset(0 100% 0 0)` that animates to `clip-path: inset(0 0 0 0)` over 0.8s with an ease-out curve - Body text blocks slide up from the bottom with a 0.3s delay after the headline - Images slide in from the opposite side of the headline (maintaining the z-pattern diagonal) with a slightly longer 1.0s duration - Decorative SVG dividers animate their stroke-dashoffset to "draw" themselves from center outward as they enter view - All animations are triggered by Intersection Observer with a 0.15 threshold, so content begins animating just as the top edge enters the viewport **Section Transition Choreography:** As the user scrolls between sections, each z-pattern tableau enters as a coordinated sequence: 1. First: the decorative Deco divider draws itself (0.6s) 2. Then: the headline slides in from its z-pattern origin point (0.8s, 0.2s delay) 3. Then: the photographic element slides in from the opposite corner (1.0s, 0.4s delay) 4. Finally: body text and caption elements fade up (0.5s, 0.7s delay) This staggered choreography creates a measured, dignified pace that matches the calm-serene tone -- content arrives deliberately, like documents being laid out on a reading table one by one. **Scroll Snap Behavior:** Use `scroll-snap-type: y proximity` on the main container (not `mandatory`, which feels too rigid for contemplative browsing). Each section has `scroll-snap-align: start`. This creates soft landing points that guide but don't force the reading experience. **Interactive Details:** - Photographic frames respond to hover with a subtle inner shadow deepening (as if the print is sinking into its mat) and the sepia filter lightening - Deco Gold decorative elements pulse very subtly on hover (opacity oscillation between 0.85 and 1.0 over 2s, using a CSS animation) to indicate they are alive, not static - The vertical scroll indicator's diamond markers fill with Deco Gold as their corresponding section is active (tracked via Intersection Observer) - On mobile, the z-pattern collapses to a single-column flow with full-width images and left-aligned text, but all Deco ornaments remain, scaled to fit the narrower viewport **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, newsletter signup forms, testimonial carousels, cookie banners, chatbot widgets, or any element that breaks the archival exhibition atmosphere. This is a contemplative space, not a conversion funnel. **Technical Notes:** - All Deco SVG ornaments should be inline SVG (not img tags) for animation control - Use CSS custom properties for the palette to enable easy theming - The sunburst hero animation should use requestAnimationFrame for smooth ray drawing, not CSS transitions, to allow precise timing of individual rays - Implement `prefers-reduced-motion` media query to disable slide-reveal animations and show all content statically for accessibility-sensitive contexts ## Uniqueness Notes **Differentiators from other designs:** 1. **Art Deco as political metaphor:** No other design in the portfolio uses Art Deco geometry as a deliberate visual metaphor for authoritarian order and institutional power. The Deco ornaments here are not merely decorative -- they represent the rigid geometric structures of state control (chevrons like military insignia, sunbursts like propaganda imagery, stepped pyramids like government architecture), creating a layer of conceptual meaning beneath the surface beauty. 2. **Korean botanical Deco fusion:** The floral-botanical motifs are specifically Korean flora (mugunghwa, bamboo, pine) reinterpreted through Art Deco geometric stylization. This cultural-geometric hybrid is unique in the portfolio -- it is neither generic Western Deco nor generic Asian botanical, but a specific cross-cultural design vocabulary that reflects the Korean political subject matter. 3. **Z-pattern archival choreography:** While other designs use z-pattern scanning, this implementation ties it to a specific narrative metaphor -- the way one reads an official government document or archival exhibit panel. The z-pattern here is not a generic eye-tracking optimization but a deliberate evocation of document reading, with each section structured as an exhibit case in a political history museum. 4. **Curfew calm as design tone:** The calm-serene tone is deployed in a deliberately unsettling context -- the serenity of a city under martial law rather than the serenity of a spa or meditation app. This creates cognitive tension between the beautiful, restrained design language and the heavy political subject matter, making the experience more memorable and thought-provoking. 5. **Photography as archival evidence:** Unlike the 72% of portfolio designs that use photography decoratively, here every image is treated as a historical document -- filtered, framed in Deco double-rule borders, captioned with Josefin Sans uppercase metadata (date, location, context). The photography is forensic rather than aesthetic, serving the narrative rather than filling space. **Documented seed/style:** aesthetic: art-deco, layout: z-pattern, typography: serif-classic, palette: muted-vintage, patterns: slide-reveal, imagery: photography, motifs: floral-botanical, tone: calm-serene **Avoided overused patterns from frequency analysis:** - AVOIDED playful aesthetic (96%) -- used art-deco (2%) instead - AVOIDED centered layout (99%) -- used z-pattern (3%) instead - AVOIDED mono typography (99%) -- used serif-classic (1%) instead - AVOIDED warm palette (100%) -- used muted-vintage (2%) instead - AVOIDED scroll-triggered as primary pattern (97%) -- used slide-reveal (4%) as primary, with scroll-triggered only as the trigger mechanism - AVOIDED minimal imagery (95%) -- used photography with specific archival treatment - AVOIDED vintage motifs (89%) -- used floral-botanical (2%) with Deco geometric reinterpretation - AVOIDED friendly tone (99%) -- used calm-serene (4%) with deliberate political tension