# Design Language for saram.ai ## Aesthetics and Tone **사람** (saram) is the Korean word for *person* — a human being, a face in the crowd, the warm specific weight of someone who exists. The site is built on the tension between that intimacy and the cold geometry of Bauhaus modernism: primary shapes held like a portrait, cropped tight. This is **Bauhaus for the human face** — the Dessau grid reimagined as a lullaby rather than a manifesto. The governing mood is **whimsical-creative**: not the anarchic whimsy of dopamine branding, but the quiet, slightly-wry playfulness of a letterpress printer who slips a tiny ink-stamp fish into the footer margin. The Bauhaus vocabulary (primary red, black, white, controlled yellow) is softened by muting — every hue pulled 25% toward warm gray, as if the color swatches have lived in a sunny studio for a decade and faded just enough. The result is a palette that whispers Bauhaus rather than shouts it. The **bokeh** imagery is not decorative blur — it is the literal visual metaphor of the domain. A bokeh photograph renders a crowd as warm soft orbs, each circle of confusion a separate person who cannot quite be resolved. Saram means person; the bokeh is the crowd you can feel but not name. Every background image on the site is a deep-focus cityscape, garden, or market photograph shot at f/1.4, the foreground razor-sharp (a single typographic element), the background dissolved into warm amber and slate circles. **Tone keywords:** whimsical-creative, warm-inviting, dreamy-ethereal. ## Layout Motifs and Structure The site is a **bento-box composition**: a strict 12-column, 8-row CSS Grid where each content cell is a named, bordered box — the visual language of a Japanese lunch tray, each compartment holding one idea. Unlike a dashboard (which implies scanning) or a portfolio-grid (which implies browsing), the bento layout here is **narrative**: the boxes are read left-to-right, top-to-bottom like a haiku sequence, not clicked like a menu. Grid geometry: - Outer container: `max-width: 1320px`, centered, with `padding: 0 clamp(24px, 5vw, 80px)`. - 12 columns, `gap: 2px` — the 2px white line between cells is the **seam of the bento box**, structural not decorative. - Each bento cell has a crisp `1px solid #C8BCA8` border and a background that is the cell's assigned color field (see Palette). - Named areas: `hero` (6col × 3row), `caption` (6col × 1row), `bokeh-feature` (4col × 2row), `type-showcase` (4col × 2row), `micro-1` through `micro-4` (each 3col × 1row), `footer-strip` (12col × 1row). **Flowing curves** are introduced as the one structural exception to the Bauhaus grid: each bento cell has a `border-radius` that varies — cells in the left column are `4px`, cells in the right column are `24px`, and the hero cell is `0px`. The radii drift rightward, as if the rigid Bauhaus left edge dissolves into soft contemporary right curves. This rightward drift of radius is the *flowing-curves* motif expressed through geometry rather than illustration. The page has no navigation header. A single floating glyph — a red Bauhaus circle, 44px, positioned `fixed top-right` — opens a slide-in drawer on click, housing the four site links. No hamburger icon. No text label. Just the circle. ## Typography and Palette **Typefaces (Google Fonts only):** - **Display & Wordmark:** [Jost](https://fonts.google.com/specimen/Jost) — the 2020 revival of Futura geometry on Google Fonts. Used at `clamp(64px, 12vw, 144px)` for the wordmark `사람`, set as a single centered glyph with `letter-spacing: -0.04em`, `font-weight: 900`. The Latin name "saram.ai" appears beneath in Jost 200 Light at `0.38em` relative size, `letter-spacing: 0.22em`, all-lowercase. The contrast between 900 and 200 within a single geometric family is the typographic spine of the site. - **Body & Captions:** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — geometric humanist, low-contrast, warm at small sizes. Used at `16px / 1.65` for all running text, `font-weight: 400`. Captions use `font-size: 11px`, `letter-spacing: 0.12em`, `text-transform: uppercase`, `font-weight: 500`. - **Accent / Pull Quotes:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville) italic — used sparingly, only for the single pull-quote in the `caption` bento cell. One sentence, `font-size: clamp(18px, 3vw, 28px)`, italic, muted ink color. The serif italic against the geometric sans is a deliberate wabi-sabi intrusion — the one hand-drawn element in the grid. **Color Palette (muted Bauhaus):** | Role | Hex | Name | |------|-----|------| | Background / Bento base | `#F5F0E8` | Warm gesso | | Ink / Primary text | `#2A2520` | Charred oak | | Bauhaus red (muted) | `#C4432A` | Faded vermilion | | Bauhaus yellow (muted) | `#D4A836` | Aged ochre | | Bauhaus blue (muted) | `#3A5F7A` | Slate cobalt | | Bento seam / borders | `#C8BCA8` | Linen crease | | Bokeh cell background | `#1C1916` | Darkroom black | | Soft overlay / caption bg | `#EDE7DA` | Cream vellum | No pure `#000000`, no pure `#FFFFFF`. The entire palette is pulled 8% warm — even the Bauhaus primaries have been left in a sunny studio window until they softened. ## Imagery and Motifs **Bokeh photography as structural material.** The `bokeh-feature` bento cell (4col × 2row) holds the hero photograph: a Tokyo pedestrian crossing at dusk, shot at f/1.2, foreground rendered as soft human-shaped silhouettes against a background of 60–80 shallow-focus light circles in amber `#D4A836`, slate `#3A5F7A`, and warm white `#F5F0E8`. The photograph is not decorative; it is the literal meaning of the domain name made visible. **Bauhaus circle motif.** A single filled circle in `#C4432A`, 12vw diameter, is placed overlapping the seam between the `hero` and `bokeh-feature` cells, z-index above both, with `mix-blend-mode: multiply`. It bleeds across the bento boundary, violating the grid's strict compartmentalization exactly once. This is the site's signature mark — a Bauhaus primary form asserting itself over the lunch-tray logic. **Micro-interaction cells.** The four `micro-1` through `micro-4` cells each hold an animated Bauhaus geometric: a triangle that rotates 60° on hover (0.4s `cubic-bezier(0.34, 1.56, 0.64, 1)` spring), a square that scales to `1.08` on hover, a circle that fills with `#D4A836` on hover, and a plus-cross that draws itself via `stroke-dashoffset` animation on scroll-enter. Each cell's background shifts from `#EDE7DA` to its primary hue at 15% opacity on hover. **Flowing-curve dividers.** Between the primary content rows, a set of three hand-drawn SVG curves in `#C8BCA8` (linen crease) separate the bento rows visually. Each curve is a single `` element, `stroke-width: 1.5`, no fill, rendered as a gentle sine-wave signature flowing left to right. These curves are the *only* curved non-rectangular elements in the design — everything else is a rectangle or circle. The curve-versus-rectangle tension is the flowing-curves motif. **No icons.** No icon libraries. The Bauhaus shapes (circle, square, triangle, plus) serve all iconographic functions. ## Prompts for Implementation Build saram.ai as a **single-page bento grid scroll** — one viewport-filling grid that reveals itself as the reader scrolls. There is no hero section, no above-the-fold CTA, no pricing block. The page is experienced as a single composed tray, read like a poem. **Story arc (bento cells, read sequence):** 1. **`hero` cell (6col × 3row).** White field, `#F5F0E8`. The Korean wordmark `사람` in Jost 900, massive, centered vertically and horizontally. Beneath it, `saram.ai` in Jost 200. No tagline. No subheading. Beneath the name, a single sentence in DM Sans 400: "A network of one." Set the sentence at 14px, muted `#8C8070`, left-aligned, hanging 2em below the wordmark. The Bauhaus red circle (12vw) bleeds from this cell's right edge into `bokeh-feature`. 2. **`caption` cell (6col × 1row).** Cream vellum `#EDE7DA` background. A single Libre Baskerville italic sentence — the pull quote — in `#2A2520`: *"Every face in the crowd is the whole crowd."* Left-aligned, `clamp(18px, 2.5vw, 26px)`. No other content. 3. **`bokeh-feature` cell (4col × 2row).** Darkroom black `#1C1916` background. The bokeh photograph fills the cell via `object-fit: cover`. On scroll-enter, the photograph fades in from `opacity: 0` to `opacity: 1` over 1.2s with a simultaneous `scale(1.04) → scale(1.0)` — a slow breath-in. The Bauhaus red circle overlaps this cell's left edge (see Motifs above). 4. **`type-showcase` cell (4col × 2row).** Slate cobalt `#3A5F7A` background. A large typographic specimen: the word "사람" in Jost 900 white, 18vw, clipped by the cell boundary. Beneath it, in DM Sans 400 white 12px tracked wide: "/ saram / person / human / 人 /". The word in four scripts, one language. No explanatory text. 5. **`micro-1` through `micro-4` cells (each 3col × 1row).** See Imagery section. These four cells introduce micro-interaction choreography using the four Bauhaus shapes. Each shape uses `will-change: transform` for composited animation. Spring easing throughout: `cubic-bezier(0.34, 1.56, 0.64, 1)`. 6. **`footer-strip` cell (12col × 1row).** Charred oak `#2A2520` background, full-width. Three items in a flex row with `justify-content: space-between`: (a) `saram.ai` in Jost 200 white 14px tracked, (b) `사람` in Jost 900 white 14px, (c) a copyright line in DM Sans 400 `#8C8070` 11px. No social links, no nav, no CTA. **Micro-interaction choreography (key technical notes):** - All hover transitions: `transition: all 0.32s cubic-bezier(0.34, 1.56, 0.64, 1)`. - Scroll-triggered reveals: `IntersectionObserver` with `threshold: 0.15`, adding `.is-visible` class that removes `opacity: 0; transform: translateY(12px)`. - The SVG curve dividers draw themselves via `stroke-dashoffset` animation on scroll-enter, 0.8s `ease-out`. - The bento grid itself does NOT animate — only its contents do. The grid seams remain static and structural. - No parallax on any element (parallax is 75% saturated across the corpus; deliberately avoided here). - No stagger sequences (50% saturated; deliberately avoided here). **AVOID:** - CTA buttons, pricing tables, feature grids, stat counters, testimonial sliders. - Parallax scroll effects. - Staggered entrance animations. - Any typeface not listed above. - Pure black (`#000000`) or pure white (`#FFFFFF`). - Navigation headers, sticky bars, mega-menus. ## Uniqueness Notes 1. **First bento-box layout in the corpus (0% frequency).** All other designs use centered, full-bleed, asymmetric, or single-column layouts. The bento-box grid with named, bordered cells and deliberate seam-width is not present in any other design. The 2px bento seam as a structural motif (vs. gap-only spacing) is unique. 2. **Bauhaus at 5% frequency, executed as a muted-palette whimsical variant — not a history-lesson homage.** The two prior bauhaus designs in the corpus treat the aesthetic as a strict exercise. This design softens every Bauhaus primary by 25%, adds a bokeh photograph as the hero visual (zero precedent in the corpus for bokeh-as-structural-metaphor), and crosses the geometric discipline with a Korean wordmark. The result is Bauhaus seen through a warm-studio window, not a textbook. 3. **Korean typography as the primary display element.** No other design in the corpus uses a non-Latin script as the wordmark. `사람` at 12vw in Jost 900 — a geometric Latin font rendering a Korean character — creates an unexpected texture: the Hangul syllable block is structurally angular and grid-native, fitting the Bauhaus grid better than a Latin wordmark would. The multilingual specimen cell ("사람 / saram / person / human / 人 /") doubles down on this, treating linguistic plurality as a design motif. 4. **Flowing-curves expressed through border-radius drift, not illustration.** Most corpus designs that use flowing-curves implement them as decorative SVG blobs or section-divider waves. Here the curves are encoded in the grid's own border-radius values (0px → 4px → 24px, left to right), making the "flow" a structural property of the grid rather than a decorative overlay. The SVG curve dividers between rows are the only explicitly drawn curves, kept to `stroke-width: 1.5` hairlines. 5. **Micro-interactions as four Bauhaus shapes, not generic UI feedback.** The four micro-interaction cells each host one primary Bauhaus form (triangle, square, circle, plus-cross). The interactions (spring rotation, scale, fill-flood, path-draw) are choreographed to the shape's inherent geometry — the triangle rotates because triangles have rotational energy; the circle floods because circles contain; the path-draw cross assembles itself because a cross is two strokes. Interaction and form are semantically matched. **Chosen seed:** aesthetic: bauhaus, layout: bento-box, typography: futura-geometric, palette: muted, patterns: micro-interactions, imagery: bokeh-background, motifs: flowing-curves, tone: whimsical-creative **Patterns avoided from frequency analysis:** - parallax (75% — most saturated pattern in corpus) - stagger (50% — second most saturated) - scroll-triggered (35% — third most saturated; replaced with single IntersectionObserver reveal, not stagger) - centered layout (84% — most saturated layout; bento-box used instead) - full-bleed layout (63% — second most saturated; bento seams used as structural opposition)