# Design Language for bada.casa ## Aesthetics and Tone bada.casa (bada = 바다, Korean for "sea"; casa = house in Spanish/Italian) is a beach house that belongs to both cultures and neither -- a sun-bleached Mediterranean villa on the Korean coast where Art Deco metalwork frames windows overlooking the East Sea. The visual identity fuses the disciplined grid logic of Swiss International Style with the geometric opulence of 1920s Art Deco ornamentation: think of a Josef Muller-Brockmann poster redesigned by the architect of the Chrysler Building's lobby, then hung on the whitewashed wall of a Jeju Island stone house. The site presents a curated collection of architectural and interior spaces where ocean meets dwelling -- rooms with sea views, terraces over tide pools, stone walls where waves have carved patterns over centuries. The tone is raw-authentic: no pretense of luxury branding, no aspirational lifestyle copy. Instead, a direct, honest voice that describes spaces with the precision of an architect's notes and the warmth of someone who actually lives there. ## Layout Motifs and Structure The layout uses a **single-column** structure that scrolls vertically like an architectural portfolio -- one idea presented at a time, each given the full width of the viewport to breathe. **Primary structure:** - **Opening viewport (100vh):** A stark black (#1A1A1A) background with a single Art Deco geometric frame centered in the viewport -- a tall, narrow rectangle (roughly 40vw x 70vh) with stepped corner details and thin gold (#C9A96E) border lines. Inside this frame: the "bada.casa" logotype in a geometric display typeface, vertically centered. Below the logotype, a thin horizontal rule, then "바다의 집" (House of the Sea) in smaller text. The frame itself is the hero -- no imagery, no busy decoration, just the power of a beautifully proportioned rectangle. - **Content sections (below fold):** Each section occupies 80-100vh and presents one "room" or space concept. The content is a single-column text block (max-width: 60ch) with an Art Deco header ornament above it -- a different geometric motif per section (sunburst, chevron stack, stepped pyramid, fan shape) rendered as inline SVG in gold on black, or black on cream. - **Card-flip photography:** Within sections, photographs are presented as "postcards" -- rectangular elements with Art Deco border treatment that rest face-down (showing only the decorative back pattern). On click/tap, the card flips 180deg on its Y-axis to reveal the photograph on the other side. This creates intentional mystery and user agency -- you choose what to reveal. - **Alternating color blocks:** Sections alternate between two palettes: (A) black background with gold/cream text and ornaments, (B) cream background with black/gold text and ornaments. This alternation creates a rhythmic pulse down the page, like the rhythm of waves: dark, light, dark, light. - **Footer section:** A full-width gold (#C9A96E) background with black text -- the most luminous section, representing sunrise/sunset on the sea. Contains credits and navigation as simple text links. ## Typography and Palette **Fonts:** - **Headlines/Logotype:** "Poiret One" (Google Fonts) -- a geometric Art Deco display typeface with distinctive circular letterforms and thin, elegant strokes. Weight 400 (its only weight). Size: clamp(28px, 5vw, 64px) for the logotype, clamp(22px, 3vw, 40px) for section headers. Letter-spacing: 0.1em. Its refined geometry perfectly bridges Swiss precision and Deco glamour. - **Body text:** "Work Sans" (Google Fonts) -- a grotesque sans-serif with a neutral, Swiss-influenced character. Weight 400 for body, 500 for emphasis. Line-height: 1.8. Size: clamp(15px, 1.15vw, 18px). Its clean proportions create effortless readability in the single-column format and provide utilitarian contrast to the decorative Deco headlines. - **Accents/Korean text:** "Noto Serif KR" (Google Fonts) -- used for Korean text passages (바다의 집, section subtitles in Korean). Weight 400, size matches body text. The serif treatment differentiates Korean text from the Latin sans-serif body while maintaining elegance. **Color Palette:** - **Obsidian** #1A1A1A -- primary dark background, deep matte black - **Antiqued Gold** #C9A96E -- primary accent, the warm metallic gold of Art Deco fixtures - **Parchment Cream** #F2EDE4 -- light background for alternating sections, warm and inviting - **Carbon** #2C2C2C -- secondary dark for subtle contrast within dark sections (card backs, dividers) - **Ivory** #FEFCF7 -- text on dark backgrounds, warmer than pure white for a less clinical feel - **Sea Verdigris** #5B8A72 -- sparse accent for sea-related elements (wave motifs, Korean text), the patina green of aged copper coastal fixtures - **Dusk Rose** #A67B7B -- minimal warm accent for highlighted states and the occasional floral-botanical element A gold-black-luxury palette executed with restraint. Gold never overwhelms -- it highlights, frames, and punctuates. ## Imagery and Motifs **Core visual motifs:** - **Art Deco geometric ornaments:** Each section header is crowned by a unique geometric ornament rendered in SVG. Designs include: (1) a stepped sunburst with radiating lines converging to a point, (2) a fan of concentric arcs, (3) a chevron stack (inverted Vs nested 5 deep), (4) a ziggurat profile with symmetrical steps, (5) interlocking circles forming a flower-of-life fragment. All rendered in #C9A96E with 1.5px stroke, no fill, against their respective backgrounds. - **Card-flip postcards:** Photographs presented as flippable cards. The "back" of each card displays a repeating Art Deco pattern (small geometric tiles -- hexagons, diamonds, or fan shapes in #C9A96E on #2C2C2C). The flip animation is a smooth 600ms rotateY(180deg) with a slight perspective(1000px). Photos on the "front" are desaturated (filter: saturate(0.3)) with a warm sepia tone (filter: sepia(0.2)), giving them the feel of vintage postcards. - **Floral-botanical accents:** Sparse, geometric interpretations of sea plants and coastal flora -- stylized kelp fronds, sea fan corals, wave-smoothed pebble arrangements -- rendered as thin line SVGs in #5B8A72. These appear at section transitions, never within the main content column, always in the margins or between sections. - **Thin-rule architecture:** The entire page is connected by thin horizontal rules (#C9A96E, 1px) that appear between content elements -- above and below headings, between paragraphs where a section shift occurs, at the very top and bottom of the viewport. These lines are the structural skeleton, echoing the thin metalwork of Art Deco buildings. - **Wave pattern footer border:** The transition to the gold footer section is marked by a repeating wave pattern (SVG) -- stylized Art Deco ocean waves (geometric, not naturalistic) in #1A1A1A against the gold background, forming a decorative border between content and footer. ## Prompts for Implementation **Full-screen narrative experience:** The page opens on pure black (#1A1A1A). The Art Deco frame draws itself: first the four corner step-details (SVG stroke animation, 400ms each, staggered by 100ms starting from top-left clockwise), then the connecting lines between corners (200ms each). Total frame assembly: ~2s. Then the "bada.casa" logotype fades in (opacity 0 to 1, 600ms) followed by the Korean subtitle sliding up from below the frame (translateY: 20px to 0, 400ms). **Card-flip interaction:** Implement with CSS `transform-style: preserve-3d` on a container, with front and back faces using `backface-visibility: hidden`. Back face has rotateY(180deg) by default. On click, toggle a `.flipped` class that applies rotateY(180deg) to the container. The back (Deco pattern) is the default visible side. The front (photograph) is the hidden side. Users must actively choose to flip, creating engagement and curiosity. **Alternating sections:** Use `:nth-child(odd)` and `:nth-child(even)` selectors on section elements. Odd sections: background #1A1A1A, text #FEFCF7, ornaments #C9A96E. Even sections: background #F2EDE4, text #1A1A1A, ornaments #C9A96E. The gold accent bridges both palettes. **Responsive approach:** On mobile (<768px), the Art Deco frame in the hero section reduces to just corner ornaments (no connecting lines -- the phone edges serve as the frame). Card-flip interactions remain (they work well with tap). Section padding reduces but maintains the single-column breathability. Korean text maintains its serif treatment. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, neon gradients, card-grid layouts, parallax scrolling, busy hero sections. No videos. No floating elements competing for attention. **Storytelling emphasis:** The narrative is a tour of bada.casa -- entering through the Art Deco frame (the front door), then moving through rooms/spaces (sections), with each flippable postcard revealing a specific view or detail. The alternating dark/light sections create a sense of passing through doorways between lit and shadowed rooms. The sea is present through its absence in the gold/black palette (sea verdigris used only as punctuation) and through the wave motif at the footer -- you reach the sea only at journey's end. ## Uniqueness Notes **Differentiators from other designs:** 1. **Card-flip as primary image revelation mechanic:** No other design hides its imagery behind interactive flippable cards. The user must choose to reveal each photograph, creating agency and suspense. The Art Deco pattern on the card backs is itself a visual reward. 2. **Art Deco section ornaments as structural punctuation:** Each section crowned by a unique geometric ornament (sunburst, fan, chevron, ziggurat) creates a visual chapter-heading system not found in other designs. These are functional art, not decoration. 3. **Korean-Spanish bilingual identity grounded in architecture:** The fusion of Korean sea (바다) and Spanish house (casa) with Art Deco architectural ornamentation creates a culturally layered identity. Noto Serif KR for Korean passages alongside Swiss-influenced Latin type is a unique typographic pairing. 4. **Alternating black/cream rhythmic sections:** The strict light-dark alternation mimics wave rhythm and room-to-room transitions, creating a visual breathing pattern unique among designs in the collection, most of which maintain a single background throughout. **Chosen seed/style:** swiss aesthetic, single-column layout, art-deco-display typography (Poiret One), gold-black-luxury palette, card-flip patterns, photography imagery (via flip cards), floral-botanical motifs, raw-authentic tone **Avoided overused patterns:** Avoided centered layout as primary (93%), card-grid (80%), gradient palette (96%), parallax (90%), scroll-triggered as primary (83%), mono typography (90%), mysterious-moody tone (73%). Instead used single-column (36% but here uniquely with Deco ornaments), card-flip (3%), gold-black-luxury (6%), art-deco-display (6%), raw-authentic tone (not previously tracked).