# Design Language for saram.quest ## Aesthetics and Tone saram.quest ("saram" meaning "person" in Korean) inhabits the visual territory of a **botanical futurism laboratory** -- a place where pressed fern specimens are catalogued under cold halogen light, where cyanotype prints of root systems hang next to electron microscopy scans, and where the boundary between the living and the engineered has dissolved into something quietly uncanny. The aesthetic is **botanical** but stripped of its usual warmth and pastoral associations; instead, these are plants rendered with the clinical precision of a speculative research institute. Think of the herbarium collections at the Natural History Museum in London, but reimagined by a production designer working on a near-future film about synthetic biology. The tone is **dreamy-ethereal** -- not the saccharine ethereal of fairy lights and bokeh, but the liminal ethereal of half-remembered dreams about walking through a greenhouse at 3AM, where the glass walls reflect deep navy darkness and the only illumination comes from the cold silver of moonlight hitting damp leaves. There is a slowness here, a suspended-in-amber quality where each element floats with deliberate weightlessness. The site should feel like opening a specimen drawer in a museum that exists between sleep and waking -- precise and catalogued, yet haunted by an atmosphere of unreality. The Korean etymology anchors a subtle cultural undercurrent: the idea of "person" as a botanical entity, a living system to be studied with the same attentive curiosity one would bring to a rare orchid. This philosophical layer -- humans as specimens, specimens as portraits -- gives the entire design a conceptual spine that prevents it from becoming merely decorative. ## Layout Motifs and Structure The layout employs a **masonry grid** that deliberately evokes the irregular arrangement of specimens in a botanist's field journal or the asymmetric pinning of dried plants on a mounting board. This is not the Pinterest-style masonry of equal-width columns with varying heights; rather, it uses a CSS Grid with `grid-template-columns: repeat(auto-fill, minmax(260px, 1fr))` combined with explicit `grid-row: span 2` declarations on featured items, creating a composition where some cards are tall and narrow (pressed stems, elongated leaf specimens) while others are squat and wide (cross-sections, macro photography details). **Spatial Architecture:** - **The Vitrine Header:** The top of the page is a full-viewport pane of deep navy (#0B1628) with a single botanical photograph -- a high-contrast, desaturated image of a fern frond or monstera leaf -- positioned off-center to the right, occupying roughly 40% of the width and 70% of the height. The image is rendered with a subtle CSS `mix-blend-mode: luminosity` overlay that strips its natural greens and renders it in silvery metallic tones against the navy. The site title appears at the left, vertically stacked in Frutiger-descended typography, with generous letter-spacing (0.3em) and a metallic silver color (#C0C8D4). Below the title, a thin horizontal rule (1px, #3A4F6B) extends rightward but stops before reaching the image -- a deliberate incomplete gesture. - **The Specimen Grid:** Below the vitrine, the masonry grid begins. Each cell is a "specimen card" -- a rectangular element with a 1px border of muted steel blue (#3A4F6B), no border-radius (sharp corners are essential to the clinical feel), and a background of very dark navy (#0D1A2D). Cards have internal padding of 24px and sit within a grid gap of 16px. The overall grid is inset from the viewport edges by 5vw on each side, never touching the screen edge -- creating a "display case" framing. - **Negative Space as Atmosphere:** Between the vitrine header and the specimen grid, there is exactly 120px of empty navy space. This void is not a margin; it is the darkness of the drawer being pulled open, the moment between lifting the glass lid and seeing what lies beneath. Similarly, the page ends with 200px of navy void below the last grid row -- no footer, no call to action, just the darkness closing back in. - **No Navigation Bar:** There is no traditional navbar. Instead, a single small glyph -- a stylized leaf silhouette rendered as an inline SVG, 18px tall, in metallic silver -- sits fixed at the top-left corner (position: fixed, top: 24px, left: 5vw). On hover, it performs a card-flip animation, rotating 180 degrees on the Y-axis to reveal a minimal navigation list on its "reverse side" (achieved with CSS transforms and backface-visibility). This is the only interactive navigation element. ## Typography and Palette **Typography:** - **Display / Headlines:** "Nunito Sans" (Google Fonts) -- a clean, geometric humanist sans-serif in the Frutiger lineage. Used at weight 300 (Light) for a delicate, almost translucent presence. Sizes range from 2.4rem for card titles to 5.5vw for the hero title on the vitrine. Letter-spacing is always expanded: 0.15em for body-scale headings, 0.3em for the hero. Text-transform: uppercase for the hero title only; all other headings in sentence case. The lightness of the weight combined with the expanded tracking creates a typographic texture that feels etched rather than printed -- as if the letters were scored into glass with a diamond-tipped tool. - **Body / Descriptions:** "Source Sans 3" (Google Fonts) at weight 350 (between Light and Regular), size 0.95rem, line-height 1.75. Color: #8A96A8 (a muted steel blue-gray that recedes into the navy backgrounds without disappearing). This text should feel like the specimen labels in a museum -- informative, understated, present but not demanding attention. Paragraphs are set with a max-width of 540px to prevent line lengths from becoming clinical-report-wide. - **Accent / Metadata:** "IBM Plex Mono" (Google Fonts) at weight 400, size 0.75rem, letter-spacing 0.08em, color #5B6D82. Used for dates, categories, specimen numbers, and any taxonomic or classificatory text. This monospaced accent layer reinforces the cataloguing metaphor -- every card bears its metadata like a museum accession number. **Palette:** The palette is **navy-metallic** -- a narrow tonal range that moves between abyssal darkness and cold silver luminescence, with a single warm accent that appears sparingly like a specimen pin catching light. | Role | Color | Hex | |------|-------|-----| | Primary Background | Abyssal Navy | #0B1628 | | Card Background | Specimen Dark | #0D1A2D | | Card Border / Rules | Steel Mist | #3A4F6B | | Heading Text | Platinum Silver | #C0C8D4 | | Body Text | Faded Graphite | #8A96A8 | | Metadata Text | Deep Slate | #5B6D82 | | Accent (sparse) | Oxidized Copper | #8B6E4F | | Hover / Active State | Bright Frost | #D8E2EE | | Image Overlay | Cyanotype Blue | #1A2D45 | The oxidized copper (#8B6E4F) appears only in three places across the entire site: as the color of the thin underline beneath the hero title, as the dot separating metadata items on specimen cards, and as the hover color of the leaf navigation glyph. Its warmth against the cold navy-metallic field creates a subtle tension -- like finding a copper specimen pin in a drawer full of steel instruments. ## Imagery and Motifs **Photography as Specimen Documentation:** The primary imagery mode is **photography** -- but specifically the photography of botanical specimens rendered through a futuristic, almost forensic lens. Every image should feel like it was captured in a controlled environment: flat lighting with minimal shadow, high resolution revealing cellular-level texture, and a deliberate desaturation that removes the lush greens of living plants and replaces them with silvery, steely, almost X-ray-like tones. This is achieved through CSS filters applied globally to all images: `filter: saturate(0.2) brightness(0.85) contrast(1.15)`, creating a unified visual language where every photograph -- regardless of its original color -- is absorbed into the navy-metallic world. **Specific Image Treatments:** 1. **The Vitrine Hero Image:** A single large botanical photograph (monstera deliciosa, fern frond, or dried seed pod) occupying the right portion of the viewport header. Rendered with `mix-blend-mode: luminosity` against the navy background, so it appears as a ghostly silver impression -- the plant as apparition. On scroll, this image undergoes a slow parallax shift (translateY at 0.3x scroll speed) while simultaneously increasing its blur via `filter: blur()` that scales from 0px to 4px over the first 50vh of scroll, creating the effect of the specimen receding behind glass as the viewer moves deeper into the collection. 2. **Specimen Card Images:** Each masonry card that contains an image displays it at the top of the card, flush with the card edges (no internal padding for images), with a consistent aspect ratio maintained by `object-fit: cover`. Below the image, a 1px line in #3A4F6B separates it from the card's text content. On hover, the entire card performs a **card-flip** animation: a 180-degree rotation on the Y-axis (transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1)) with `backface-visibility: hidden`, revealing a "reverse side" that contains extended descriptive text, metadata, and a small circular thumbnail of the original image (48px, border-radius: 50%, border: 1px solid #3A4F6B). The flip is the primary interaction pattern -- there are no modals, no expand-in-place animations, just the specimen card turning over to reveal its verso, like turning a mounted specimen board to read the collector's notes on the back. 3. **Cyanotype Overlay Panels:** Interspersed within the masonry grid at irregular intervals (every 5th-7th card), full-width "cyanotype panels" span the entire grid width. These are photographic images processed with a CSS filter stack (`filter: sepia(1) saturate(2) hue-rotate(180deg) brightness(0.6)`) that simulates the cyanotype printing process -- rendering botanical photographs in deep Prussian blue tones against the navy background. These panels break the rhythm of the masonry grid and create moments of full-width immersion. **Decorative Motifs -- Futuristic Botanical:** - **Circuit-Vein Patterns:** Thin SVG line patterns that trace the branching structure of leaf venation but extend beyond the organic into geometric regularity -- veins that terminate in small circles (like circuit board nodes) or that bend at precise 45-degree angles. These patterns appear as background textures on specific cards (at very low opacity, 0.03-0.06) and as decorative borders on cyanotype panels. - **Specimen Pin Dots:** Small circles (6px diameter, fill: #8B6E4F, the copper accent) positioned at the four corners of selected cards, sitting exactly on the border intersection -- evoking the pins that hold mounted specimens in place. These appear on approximately 30% of cards, seemingly at random (actually on every 3rd card via :nth-child(3n+1)). - **Grid Coordinate Labels:** In the bottom-right corner of the specimen grid area, a faint set of coordinates appears in IBM Plex Mono at 0.65rem, color #2A3A50 -- something like "37.5N / 127.0E" (coordinates of Seoul, referencing the Korean etymology). This is purely atmospheric decoration, almost invisible against the navy background but discoverable on close inspection. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to the full-viewport vitrine -- nothing visible except the deep navy (#0B1628) background, which fades in from black over 0.8 seconds. Then the hero botanical image materializes from the right side, sliding in from translateX(30px) to its final position while simultaneously transitioning from opacity 0 to full visibility, with the luminosity blend mode already applied. The title text on the left appears character by character using a staggered animation (each character delayed by 40ms, entering from opacity 0 and translateY(8px)), creating a slow reveal that mimics the careful labeling of a specimen. The horizontal rule beneath the title draws itself from left to right using an SVG path animation over 1.2 seconds. Only after all these entrance animations complete (approximately 2.5 seconds total) does the scroll indicator appear: a subtle downward-pointing chevron at the bottom center, pulsing slowly with a 3-second animation cycle (opacity oscillating between 0.3 and 0.7). **Card-Flip Interaction Pattern:** Every specimen card in the masonry grid is a flip-card. The front face displays the botanical image (or a solid navy rectangle with circuit-vein pattern for text-only cards) plus a title in Nunito Sans Light and a one-line description. The back face, revealed on hover via a Y-axis rotation, contains: the full descriptive text in Source Sans 3, metadata in IBM Plex Mono (date, category, classification), and a small circular thumbnail of the front image as a reference anchor. The flip animation uses `transform: rotateY(180deg)` with a `perspective(1200px)` on the parent container to create convincing depth. The back face has a slightly different background (#101F33) to subtly distinguish it from the front. On mobile (touch devices), the flip triggers on tap rather than hover, with a second tap flipping back. **Scroll Behavior:** As the user scrolls past the vitrine header, the masonry grid cards enter the viewport using a staggered fade-in: each card animates from `opacity: 0; transform: translateY(20px)` to its final state, with each successive card delayed by 80ms from the previous one. The stagger follows the masonry column order (top-to-bottom within each column, left-to-right across columns), creating a wave-like reveal pattern that moves diagonally across the grid. Cards that have already been revealed do not re-animate on scroll-back. The IntersectionObserver threshold is set to 0.15 (card begins animating when 15% visible). **Cyanotype Panel Scroll Effect:** When a full-width cyanotype panel enters the viewport, it triggers a special animation: the panel's background-position shifts slowly (from `center 40%` to `center 60%` over the duration of the panel's viewport traversal), creating a subtle Ken Burns drift. Simultaneously, a thin white border (1px, #C0C8D4) draws itself around the panel using four separate border-segment animations (top, right, bottom, left, each 0.3s, staggered by 0.15s), framing the cyanotype like a mounted print. **Atmospheric Micro-Details:** - On the vitrine header, an extremely subtle CSS radial gradient (centered on the hero image, radius: 50vw, from transparent to rgba(11,22,40,0.4)) creates a vignette effect that draws the eye toward the specimen. - All card borders have a hover transition: on mouseenter, the border color shifts from #3A4F6B to #5B7A9E over 0.4s, creating a soft brightening effect that precedes the flip animation. - The copper accent dots on specimen pin cards pulse once (a single scale(1.3) bounce over 0.3s) when their parent card first enters the viewport via scroll. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero sliders, hamburger menus, gradient backgrounds, rounded corners on cards, colorful buttons, footer link columns. ## Uniqueness Notes **Differentiators from other designs:** 1. **Botanical Futurism as Unified Concept:** No other design in the portfolio combines the botanical aesthetic (19% frequency) with futuristic motifs (10% frequency) and a navy-metallic palette (3% frequency). The collision of organic specimen imagery with clinical, almost sci-fi presentation creates a visual language that is neither nature-site nor tech-site but something genuinely hybrid -- a speculative herbarium. The cyanotype processing of botanical photography is a technique not found elsewhere. 2. **Card-Flip as Primary Navigation Paradigm:** While card-flip appears at only 4% frequency, no other design uses it as the *sole* interaction pattern for content discovery. Here, every piece of content is accessed by flipping a specimen card, transforming browsing into an act of physical investigation -- turning objects over in one's hands. The absence of modals, expand-in-place, or page transitions makes this interaction model distinctive and cohesive. 3. **Frutiger-Clean Typography in a Dark Context:** The frutiger-clean typography category sits at just 1% frequency. Most designs using clean sans-serifs pair them with light backgrounds. saram.quest inverts this by placing Nunito Sans Light (a Frutiger-lineage typeface) against deep navy, with extreme letter-spacing that transforms the type from "clean and readable" to "etched and atmospheric." The combination of ultra-light weight, wide tracking, and metallic silver color on dark navy is typographically unusual within this portfolio. 4. **Korean Etymological Layer:** The geographic coordinates (Seoul), the conceptual framing of "person as specimen," and the cultural resonance of the domain name add an intellectual depth that is embedded in the design rather than stated explicitly. This is design-as-essay, where the visual choices carry meaning beyond aesthetics. 5. **No Warm Colors in the Primary Palette:** In a portfolio where 100% of designs use warm palettes, saram.quest is entirely cold -- navy, steel, silver, graphite. The sole warm element (oxidized copper #8B6E4F) appears in exactly three places, making its scarcity a design choice rather than an oversight. This deliberate temperature inversion is the most immediately visible differentiator. **Chosen seed/style:** aesthetic: botanical, layout: masonry, typography: frutiger-clean, palette: navy-metallic, patterns: card-flip, imagery: photography, motifs: futuristic, tone: dreamy-ethereal **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered as primary pattern (96%), friendly tone (98%), vintage motifs (88%), minimal imagery (95%). None of these dominant patterns appear in this design's primary identity.