# Design Language for saram.ai ## Aesthetics and Tone saram.ai takes its name from the Korean word **사람 — "person," "human being."** The entire site is built around a single, stubborn idea: that the most advanced intelligence on Earth is still a pair of warm hands shaping cool clay. So the visual world here is not the chrome-and-glow of a typical AI company. It is the **inside of a hillside pottery studio at the end of an afternoon** — kiln still ticking as it cools, a window of low amber light, fingerprints fossilised into the rim of a half-finished bowl, a wobble in the foot-ring nobody will sand away. The governing aesthetic is **wabi-sabi**: beauty in the asymmetric, the weathered, the deliberately unfinished. The frequency analysis shows wabi-sabi appears in only ~9% of the archive and almost never as the *primary* spine of a tech company's site — that gap is the point. Where other AI sites perform precision, saram.ai performs **patina**. Hairline glaze crackle. A chipped corner left chipped. A page that breathes slightly off-grid, the way a hand-thrown cylinder is never quite a cylinder. The tone is **zen-contemplative** (only ~12% of the archive): unhurried, low-volume, declarative without selling. Sentences are short. The site never raises its voice. It speaks the way a master potter explains a kiln schedule — plainly, with long pauses, trusting you to sit with it. There is no urgency, no countdown, no "limited spots." Nothing here is in a hurry, because clay isn't, and neither — the site quietly argues — is the kind of intelligence worth building. Mood words pinned above the desk: *kiln-warm. unsanded. patient. earthen. honest about the seams.* ## Layout Motifs and Structure The page is a **single vertical timeline** (the timeline-vertical layout sits at only ~5% of the archive) — but not a corporate "our milestones" timeline. It is the **firing log of one bowl**, read top to bottom: *wedging the clay → centering on the wheel → opening → pulling the wall → trimming the foot → bisque → glaze → the long cool.* Eight stations. Each station is one full-viewport panel. The narrative of the company — what saram.ai is, what it believes, how it works, who it's for — is told *through* these eight ceramic stages, never as a separate "About" page. **The spine.** Running down the page is a literal vertical line — not straight. It is a **hand-drawn SVG path with a 1.5px earthen stroke that wavers ±6px off true vertical**, the way a brushstroke does. Eight clay-coloured nodes sit on it, slightly unevenly spaced (the gaps are 11vh, 9vh, 13vh, 10vh… never uniform). As you scroll, the path *draws itself ahead of you* (path-draw-svg, ~46% archive — used, but here it's a clay-trailing brush, not a tech circuit) and the passed nodes fill with a warm terracotta wash. **Off-grid composition.** Each panel uses an **asymmetric 12-column grid where the content column is intentionally never centered** — it sits at columns 2–8 on odd stations, 5–11 on even ones, so the eye rocks left-right down the page like a thumb walking up a pot wall. Generous negative space (the *ma* of Japanese ceramics display) surrounds every block: no panel is more than ~55% full. Whitespace is treated as the cooling air around the kiln, not as "padding to fill later." **No header chrome.** There is no sticky nav bar, no hamburger, no logo lockup cluster. The wordmark **사람 / saram.ai** appears once, hand-set, at the very top, and once more at the very bottom, stamped like a potter's chop-mark into the corner. Navigation is the scroll itself plus the eight nodes on the spine, which on hover reveal a thin label (*01 — wedging*, *02 — centering* …). **Forbidden structures:** no pricing tier blocks, no stat-grid ("10M requests/day"), no testimonial carousel, no logo wall, no CTA-stacked footer, no feature bento. If the company needs to say something, it says it as a line in the firing log. ## Typography and Palette **Typefaces — Google Fonts only, three families, each with one job:** - **Newsreader** (variable, 300/400 + 400 italic) — the display and body voice. A serif-revival face (serif-revival is ~16% of the archive) with a literary, slightly inky warmth and beautiful true italics; it reads like a well-set essay about craft. Used for the wordmark, every headline (set large, ~clamp(2.4rem, 5vw, 4.2rem), weight 300, line-height 1.15), and all running text (~1.125rem, weight 400, line-height 1.7, measure capped at 62ch). Headlines get `letter-spacing: -0.01em`; nothing is ever bold — emphasis is italic only, the way handwriting emphasises. - **Gowun Batang** — a Korean serif (batang = the traditional Korean book-serif style) used wherever Hangul appears: 사람, station kanji-style numerals rendered as Hangul ordinals, and a few seeded Korean phrases (도자기 — *pottery*; 손 — *hand*; 흙 — *earth/clay*). Pairing a Latin serif-revival with an actual batang face is the typographic signature here and ties the name to its roots honestly rather than decoratively. - **Spectral SC** (small-caps, 400) — used *only* for the micro-labels on the spine nodes and figure captions (*"01 — WEDGING"*, *"FOOT-RING, UNSANDED"*), tracked at `0.14em`, set in muted clay-grey. Small-caps here behave like the pencilled annotations on a studio shelf-tag. No monospace anywhere. No grotesque. No display-bold. The page should feel *set*, not *coded*. **Palette — warm-earthy, the inside of a kiln (warm-earthy ~6% as a named palette):** - `#E9E0CF` — **raw porcelain slip.** The page ground. A warm off-white with a clay-dust grey under it; never pure #fff. - `#1E1813` — **kiln-soot black.** Body text and the wavering spine stroke. Brown-black, not neutral. - `#B6502E` — **terracotta wash.** Primary accent — filled spine nodes, the drawing brush-trail, the chop-mark stamp, link underlines. - `#7A8B6F` — **celadon glaze.** Secondary accent — hover states, the "cooled" portion of the kiln-temperature gauge, small leaf marks. - `#C9A24B` — **amber low-light.** The single warm glow that washes the active panel; used at low opacity as a radial bloom from the right edge, mimicking late studio sun. - `#8C7B66` — **shelf-tag grey.** Spectral SC micro-labels, captions, and the unfilled spine nodes. - `#3A2E1F` — **wet-clay umber.** Surface tint for the rare inset "throwing notes" block (a slightly recessed, darker rectangle like a wet sponge mark). All colour transitions on scroll are slow (600–900ms) and `ease-out`, like temperature changing in a brick chamber. ## Imagery and Motifs **No photography. No 3D renders. No stock.** Every visual is either a hand-drawn SVG or a CSS-generated texture. The imagery register is **paper-aged** (~7% of archive): the whole page sits on a faint, generated paper-grain (SVG `feTurbulence` at very low alpha, plus a subtle vignette and two or three "foxing" specks in fixed positions, like an old studio notebook). **The ceramic inventory — one custom SVG per station, all in 0.6–1.4px earthen line, drawn as if with a worn brush:** 1. **A folded mound of wedged clay** — irregular blob, 9 bezier points, a single diagonal "shell-pattern" fold line through it. 2. **A pot centred on the wheel-head** — three concentric ellipses, deliberately not concentric (the wabi-sabi tell), with motion-arc ticks suggesting spin. 3. **Two thumbs opening the clay** — minimal, two curved forms and a small dark well. 4. **A wall being pulled** — a tall lopsided cylinder, the rim drawn higher on one side, finger-ridge horizontals climbing it. 5. **A foot-ring being trimmed** — an inverted bowl, a trimming-tool wedge, and a curl of clay ribbon coming off it. 6. **A bisque bowl** — same bowl, now hatched with a dry stipple texture, matte. 7. **A glaze-dip** — the bowl half-submerged in a celadon arc, drip-lines beading off the rim. 8. **The cooling kiln** — a small brick chamber with a peephole glowing amber; beside it a hand-drawn **temperature gauge** that animates downward as you reach the panel (counter-animate, ~16% — here counting *down* from cone 6 to room temp). **Recurring decorative motifs:** **glaze crackle** (a fine, branching SVG craquelure line, ~0.4px, drifting at a barely-perceptible speed behind headlines — leaf-organic branching, since leaf-organic is only ~7% of archive and the crackle borrows its dendritic geometry); the **potter's chop-mark** (a small terracotta seal-stamp glyph, the 사 of 사람 in a rounded square, used as the bullet for any list and as the favicon); and **thumbprint whorls** — a single faint concentric-loop fingerprint that appears, pressed, in the bottom-right of each panel like a maker's mark, rotated a few degrees differently each time. ## Prompts for Implementation Build saram.ai as **one static HTML document, one CSS file, one small vanilla-JS ES module** — no framework, no build step, no service worker. Preconnect to Google Fonts and load **Newsreader, Gowun Batang, and Spectral SC** in a single `display=swap` request. Total payload before fonts under ~95KB. All SVGs inline in the document so they can be styled and animated by CSS. **The narrative spine — the visitor watches one bowl get made:** The page tells the saram.ai story as the **eight-stage firing log of a single hand-thrown bowl**. The scroll *is* the wheel turning. Each of the eight full-viewport panels carries one ceramic stage *and* one piece of what the company wants to say — woven together, never separated: 1. **Wedging (the clay).** Title: large Newsreader line — *"Before intelligence, raw material."* Body: what saram.ai is, in three short sentences, framed as: every model starts as undifferentiated clay; the work is in the hands. The wedged-clay SVG sits off-centre right; the spine begins here as a single terracotta node, the brush-trail not yet started. 2. **Centering.** *"The hard part is being still."* The company's core belief — that human-centered AI means resisting the wobble, returning to centre. The pot-on-wheel SVG; faint motion-arc ticks rotate slowly (CSS `@keyframes`, ~22s per turn). As the panel enters, the wavering spine path *draws downward* (path-draw-svg, stroke-dasharray reveal tied to scroll) and node 02 fills terracotta with a soft `ease-out`. 3. **Opening.** *"Make room in the middle."* What the product/idea does — opening a well in the dense mass so something can be held. Two-thumbs SVG; a small dark interior "well" that gently widens on scroll (blur-focus, ~10% of archive — the well starts slightly blurred and `filter: blur(0)` resolves as it reaches centre, like focus arriving). 4. **Pulling the wall.** *"It rises by the height of a hand."* How the team works — slow, iterative passes, each one a few millimetres taller. The lopsided cylinder SVG; finger-ridge horizontals draw on one by one, staggered (stagger, but soft — 120ms apart, no bounce). 5. **Trimming the foot.** *"What you remove is the design."* The discipline / what saram.ai refuses to do (no dark patterns, no engagement-bait) — said as: trimming is subtraction, and the foot-ring is unsanded on purpose. The trimming-tool SVG with a clay-ribbon curl that unspools on a path as the panel arrives. 6. **Bisque.** *"First fire. Now it holds shape."* The "for whom" — researchers, builders, anyone who wants tools that admit they're tools. Panel surface shifts to the matte-stipple texture; an inset wet-clay-umber "throwing notes" block holds two short quotes from the imagined potter (used as the *only* place anything quote-like appears — no testimonial carousel). 7. **Glaze.** *"Colour is a promise about how it'll be used."* Ethic / stewardship statement, framed as glaze chemistry — what looks like decoration is actually about food-safety, daily contact, trust at the rim. The half-dipped-bowl SVG with celadon drip-beads that fall on a slow `cubic-bezier` and stop, mid-bead, unfinished. 8. **The long cool.** *"Patience is the last ingredient."* Closing — an invitation to read more / get in touch, but stated as *"the kiln is still warm; sit with it"* with a single understated mailto link (terracotta underline, celadon on hover). The brick-kiln SVG with the amber peephole `glow` pulsing very slowly; the temperature gauge counts down from "cone 6" to "room temp" as you settle on the panel. Below it, the 사람 chop-mark stamped into the bottom-right corner. Footer is one line: *"saram.ai — 사람 — made by hand, fired slow."* **Motion language overall:** everything is slow and warm. Scroll-linked, not autoplay. The amber low-light bloom (#C9A24B radial gradient, ~12% max opacity) follows the *active* panel, drifting in from the right edge over ~800ms — the studio's window-light moving across the bench. The wavering spine, the glaze-crackle behind headlines, the rotating wheel-arcs, and the thumbprint whorls are the only ambient motion; nothing flashes, nothing slides in fast, nothing demands a click. Honour `prefers-reduced-motion` by freezing the spine fully drawn, the bloom static on the centred panel, and disabling the wheel-arcs. **Explicitly do NOT build:** hero with a giant CTA button, pricing/tier cards, a stat-grid of big numbers, a testimonial slider, a logo wall, a feature bento, a sticky top nav, a chatbot bubble, a newsletter modal, an "as seen in" strip. The firing log is the whole page. ## Uniqueness Notes Differentiators from other CMassC sites: 1. **A working pottery firing-log as the page structure.** The eight panels are literal ceramic stages (wedge → centre → open → pull → trim → bisque → glaze → cool), and the company's entire message is told *inside* those stages. No other site organises itself as a single object's making-process. The timeline-vertical layout it uses sits at only ~5% of the archive — and even those are conventional milestone timelines, not a craft process. 2. **Wabi-sabi as the spine of an AI company.** wabi-sabi is ~9% of the archive and is essentially never the primary aesthetic for a tech product. saram.ai inverts the entire AI-site visual genre (chrome, neon, gradient-mesh, glassmorphism at 84%) into kiln-warmth, unsanded foot-rings, deliberate crackle, and a spine line that wavers off true vertical on purpose. 3. **Bilingual serif typography tied to the name's meaning.** Pairing **Newsreader** (serif-revival) with **Gowun Batang** (an actual Korean batang serif) — and seeding real Hangul (사람 / 손 / 흙 / 도자기) plus a 사-glyph chop-mark used as the bullet and favicon — makes the Korean root structural, not ornamental. Almost nothing in the archive uses a Korean book-serif as a co-primary face. 4. **Paper-aged ground with fixed foxing specks and a generated grain**, plus a recurring pressed-thumbprint maker's mark in every panel — the page reads as a studio notebook, not a UI. paper-aged imagery is only ~7% of the archive. 5. **Zero photography, zero 3D, zero stock; ~9 inline brush-line SVGs** (the ceramic inventory + glaze crackle + chop-mark) doing all visual work, with the only ambient motion being slow wheel-arcs, a self-drawing wavering spine, beading glaze drips that stop unfinished, and a cool-down temperature gauge counting from cone 6 to room temp. Chosen seed / style: **`aesthetic: wabi-sabi, layout: timeline-vertical, typography: serif-revival, palette: warm-earthy, patterns: path-draw-svg, imagery: paper-aged, motifs: leaf-organic, tone: zen-contemplative`** (fallback selection — no seed supplied in assignment; picked for low archive frequency across wabi-sabi, timeline-vertical, warm-earthy, paper-aged, leaf-organic, and zen-contemplative). Avoided patterns from the frequency analysis: glassmorphism (84%), hand-drawn-as-childish-doodle aesthetic (94% — this site's hand-drawn quality is brush-on-clay, not marker-doodle), photography (98%), card-grid (92%), full-bleed-section stacks (87%), centered layouts (81%), mono typography (94%), warm-but-*gradient* palettes (94% gradient), cursor-follow/magnetic/spring kinetic flourishes (89/79/84%), and the CTA-heavy / stat-grid / pricing-block / testimonial-carousel template entirely.