# Design Language for yamato.quest ## Aesthetics and Tone yamato.quest inhabits the visual world of a master engineer's watercolor field notebook -- the kind of hand-bound journal an electrical architect might carry while surveying the vast circuit infrastructure of a speculative near-future Japan. Every surface bleeds with diluted pigment washes: indigo pooling along the edges of hexagonal diagram frames, teal seeping through graph-paper grids, magenta bleeding into annotations scrawled beside wiring schematics. The aesthetic is **watercolor** but not the soft, pastoral watercolor of greeting cards -- this is the watercolor of technical illustration, where pigment washes are used to differentiate circuit layers, highlight signal paths, and annotate voltage gradients on hand-drawn PCB layouts. The tone is **tech-tutorial**: instructive, measured, confident. Every element on the page teaches something. The domain name "yamato" evokes the legendary Japanese engineering tradition -- the precision of shipbuilding, the elegance of train systems, the meticulous craft of circuit board design. The site speaks as a patient sensei explaining complex systems through beautiful diagrams. There is no sales pitch, no call to action, no urgency. There is only the quiet authority of someone who understands how things work and draws them beautifully to help others understand too. The mood sits at the intersection of hand-crafted and technical: the warmth of wet pigment on textured paper meeting the cold precision of hexagonal grid systems and circuit trace routing. Watercolor bleeds are never random -- they follow the logic of the underlying technical diagram, as if the pigment itself understands the topology of the system it illustrates. ## Layout Motifs and Structure The layout follows a **hexagonal-honeycomb** grid system -- a departure from the rectangular grids that dominate web design. The hexagonal grid is not decorative but structural: it reflects the actual geometry of circuit board component placement, where hexagonal packing achieves optimal density. The viewport is conceptually divided into a honeycomb tessellation, with content modules occupying clusters of hexagonal cells. **Primary Grid:** The base hexagonal grid uses cells of 180px width (flat-top orientation). Content modules span 1, 3, or 7 hexagonal cells (a single cell, a triangular cluster, or a full rosette). The grid is not perfectly rigid -- cells shift slightly off-axis by 2-4px in randomized directions, creating the impression of hand-drawn grid lines that tremble with the absorbed moisture of watercolor paper. CSS `clip-path: polygon()` creates the hexagonal shapes, with each polygon's vertices offset by a subtle `calc()` randomization. **Section Architecture:** - **Section 1 (Hero/Title):** A single massive hexagonal rosette (7 cells) centered in the viewport. The domain logotype sits at the center cell. The six surrounding cells contain watercolor wash thumbnails that preview the site's content sections -- each wash is a different analogous hue. On hover, each surrounding cell expands slightly (scale 1.08) and its watercolor wash animates with a slow bleeding effect (CSS filter animation on `blur` and `saturate`). - **Section 2 (Circuit Atlas):** A full-viewport honeycomb grid where each cell contains a miniature circuit diagram fragment rendered in SVG. Scrolling reveals cells progressively -- not top-to-bottom but in a spiral pattern outward from the viewport center, using intersection observers with custom thresholds mapped to distance from center. Each cell fades in with a watercolor bloom animation (opacity 0 to 1 plus filter blur 12px to 0px over 0.6s). - **Section 3 (Tutorial Pathway):** A linear sequence of hexagonal cells forming a pathway across the viewport -- a visual circuit trace connecting tutorial steps. Each cell is a glassmorphic card containing a tutorial step. The pathway follows a zigzag pattern matching the natural row-offset of hexagonal grids. Connecting lines between cells are SVG paths styled as circuit traces with animated dash-offset. - **Section 4 (Signal Flow):** A deep-scroll section where the honeycomb grid is sparse -- only 30% of cells are filled. The filled cells contain content; the empty cells show bare watercolor paper texture with faint grid lines. This sparse layout creates breathing room and emulates the negative space of a technical drawing where only relevant components are annotated. **Navigation:** No traditional navbar. Instead, a floating hexagonal cluster of 6 cells in the bottom-right corner serves as persistent navigation. Each cell is a small glassmorphic hexagon with an icon representing a section. The active section's cell pulses gently (the pulse-attention pattern) with a soft glow matching the section's analogous hue. ## Typography and Palette **Typography:** - **Headlines / Section Titles:** "Rockwell" is unavailable on Google Fonts, so instead: "Zilla Slab" (Google Fonts) -- a robust slab-serif with strong rectangular serifs and open counters that echo the rigid geometry of circuit board typography. Used at 2.4rem-4.8rem. Weight: 700 for primary headlines, 500 for sub-headlines. The slab serifs ground the watercolor softness with industrial precision. Letter-spacing: -0.02em for headlines (tight, technical), 0.04em for sub-headlines (slightly expanded for readability). - **Body / Tutorial Text:** "Source Sans 3" (Google Fonts) -- a clean, highly legible sans-serif designed for UI and long-form reading. Weight: 400 for body text, 600 for emphasis. Its large x-height and open apertures ensure clarity at 1rem-1.1rem body size. Line-height: 1.72 for generous vertical rhythm matching the hexagonal grid's vertical spacing. - **Code / Technical Labels:** "IBM Plex Mono" (Google Fonts) -- a monospace face with humanist proportions, used exclusively for code snippets, circuit component labels, and technical annotations. Weight: 400. Size: 0.88rem. Displayed inside hexagonal badge shapes with a subtle watercolor wash background. - **Accent / Callouts:** "Zilla Slab Highlight" (Google Fonts) -- the inline/highlight variant of Zilla Slab, with its distinctive rough edges that mimic ink bleeding into textured paper. Used sparingly for pull quotes and key terms at 1.6rem-2.2rem. This typeface naturally bridges the watercolor and technical aesthetics. **Palette (Analogous):** The palette is built on an analogous range spanning from deep indigo through teal to cool emerald, with a single warm accent. This range mirrors the color behavior of watercolor pigments mixed on a wet palette -- adjacent hues bleeding into each other naturally. | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Circuit | Midnight Indigo | #1a1a3e | Primary background, deepest layer | | Signal Path | Electric Teal | #0d7377 | Primary accent, interactive elements, circuit traces | | Wash Primary | Ocean Cerulean | #1b6ca8 | Watercolor wash base, section backgrounds | | Wash Secondary | Shallow Aqua | #3db8b0 | Secondary wash, hover states, active indicators | | Glow Accent | Phosphor Jade | #2ee8a5 | Pulse-attention glow, notification dots, active nav | | Paper Ground | Warm Vellum | #f0ece4 | Text on dark backgrounds, paper texture base | | Warm Spike | Cinnabar Ember | #c44b2f | Rare warm accent for warnings, critical annotations | | Ink Dark | Sumi Black | #0e0e1a | Deepest shadows, text on light backgrounds | The analogous range (#1a1a3e -> #0d7377 -> #1b6ca8 -> #3db8b0 -> #2ee8a5) creates a continuous spectral flow. When watercolor washes overlap, adjacent colors bleed into each other along this spectrum, never producing muddy mixtures because they are harmonically related. The Cinnabar Ember (#c44b2f) breaks the analogous harmony deliberately -- it is the warning signal, the overheated component, the red annotation circle on a circuit diagram marking a point of failure. ## Imagery and Motifs **Glassmorphic Cards as Circuit Components:** The primary imagery mode is **glassmorphic-cards** -- frosted translucent panels that float above the watercolor wash backgrounds like glass inspection windows placed over a technical drawing. Each card has: `background: rgba(240, 236, 228, 0.08)`, `backdrop-filter: blur(16px) saturate(1.4)`, `border: 1px solid rgba(45, 232, 165, 0.15)`, and a hexagonal clip-path. The cards are not rectangles -- they are hexagons, reinforcing the honeycomb grid. Through the frosted glass, the underlying watercolor washes are visible but softened, creating depth without opacity. **Circuit Motifs:** The **circuit** motif pervades every decorative element. Specifically: 1. **Trace Lines:** SVG paths connecting hexagonal cells are styled as PCB traces -- 2px solid lines with 90-degree and 45-degree bends, colored in Electric Teal (#0d7377) with a subtle glow (`filter: drop-shadow(0 0 4px #0d737766)`). At junction points, small circles (via pads) pulse with the pulse-attention animation. 2. **Component Symbols:** Section dividers use stylized circuit component symbols (resistors as zigzag lines, capacitors as parallel bars, inductors as coiled paths) drawn in SVG and rendered in Sumi Black (#0e0e1a) with watercolor wash fills. These are not literal schematics but abstracted, artistic versions where the symbol shapes are recognizable but rendered with watercolor bleeding effects. 3. **Data Bus Ribbons:** Horizontal bands of parallel lines (8-line bus ribbons) run between major sections, styled as thin SVG lines (0.5px) in Shallow Aqua (#3db8b0) at 40% opacity. These ribbons visually connect the site's sections like data buses connecting components on a motherboard. 4. **Hex Grid Overlay:** A persistent, very faint hexagonal grid overlay covers the entire viewport at 3% opacity in Phosphor Jade (#2ee8a5). This grid is purely decorative -- a watermark that establishes the geometric foundation even in areas with no explicit hexagonal content. **Watercolor Wash Generation:** CSS-generated watercolor effects using layered radial gradients with high blur values. Each section has 3-5 radial gradient blobs (`radial-gradient(ellipse, color 0%, transparent 70%)`) positioned at different viewport coordinates, each with `filter: blur(60px-120px)`. The blobs use colors from the analogous palette at 20-40% opacity. Animation: blobs drift slowly (CSS `@keyframes` translate by 20-40px over 15-25 second cycles), creating the impression of wet pigment slowly migrating across paper. ## Prompts for Implementation **Full-Screen Narrative Entry Sequence:** The site opens with a full-viewport display of Midnight Indigo (#1a1a3e). After 0.8 seconds of stillness, a single watercolor blob fades in at the viewport center -- Ocean Cerulean (#1b6ca8) at 30% opacity, 400px radius, with blur(80px). Over the next 2 seconds, four more blobs fade in at cardinal positions, each a different analogous hue, each drifting slowly toward the center. As the blobs converge, the hexagonal grid overlay fades in (0% to 3% opacity over 1.5s). Then, at the intersection of the converging blobs, the domain logotype "yamato.quest" crystallizes: Zilla Slab at 4.2rem, Warm Vellum (#f0ece4), letter-spacing -0.03em, with each character fading in sequentially at 80ms intervals. Below the logotype, a subtitle in Source Sans 3 at 1.1rem, 400 weight: "circuit architectures, rendered in water and light" -- fading in 0.5s after the last logotype character. **Hexagonal Cell Reveal Pattern:** As the user scrolls, hexagonal content cells do not appear in simple top-to-bottom order. Instead, they use a radial reveal pattern: the cell nearest the viewport center appears first, then cells adjacent to it, then cells adjacent to those, spreading outward like a signal propagating through a circuit. Each cell's entry animation is a watercolor bloom: the cell starts as a concentrated dot of color (scale 0.1, blur 20px, opacity 0), then expands to full size (scale 1, blur 0, opacity 1) over 0.5s with a custom cubic-bezier(0.19, 1, 0.22, 1) easing that overshoots slightly, mimicking the way watercolor pigment rushes outward when a loaded brush touches wet paper. **Pulse-Attention Interaction Pattern:** Interactive elements use the **pulse-attention** pattern: a rhythmic glow that draws the eye without demanding it. Implementation: a CSS animation that oscillates `box-shadow` from `0 0 0px 0px rgba(46, 232, 165, 0)` to `0 0 12px 4px rgba(46, 232, 165, 0.35)` and back over a 2.5-second cycle with `ease-in-out` timing. The pulse is applied to: navigation hexagons (active state), tutorial pathway nodes (next incomplete step), and circuit junction points (hoverable data points). The pulse color always matches the Phosphor Jade (#2ee8a5) to maintain the analogous harmony. On hover, the pulse accelerates (cycle reduces to 0.8s) and the glow intensifies (max opacity rises to 0.6). **Glassmorphic Card Behavior:** Cards are hexagonal, clipped with `clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)`. On hover: the card lifts (translateY -6px, box-shadow deepens), the backdrop-filter blur increases from 16px to 24px (the background becomes dreamier), and the border color brightens from `rgba(45, 232, 165, 0.15)` to `rgba(45, 232, 165, 0.4)`. Content inside cards is set in Source Sans 3 with IBM Plex Mono for code blocks. Cards contain tutorial content, circuit diagrams, or annotation panels. **Circuit Trace Animation:** SVG circuit traces connecting hexagonal cells animate on scroll. Using `stroke-dasharray` and `stroke-dashoffset`, the trace draws itself from one cell to the next as the connection enters the viewport. The drawing speed is 0.4s per cell-to-cell segment. At junction points (where traces branch), a small burst animation occurs: a circle expanding from 0 to 8px radius and fading from Phosphor Jade 100% to 0% opacity over 0.3s. This simulates a signal reaching a node and propagating outward. **AVOID:** CTA-heavy layouts (no "Sign Up" buttons, no pricing tables), pricing blocks, stat-grids, testimonial carousels, generic hero sections with stock photography. This is a technical exploration, not a product page. Every visual element should teach, explain, or illuminate a system. **Paper Texture Foundation:** The entire page has a base layer of CSS-generated paper texture: `background-image` combining a fine noise pattern (SVG `` with baseFrequency 0.9, numOctaves 4) at 4% opacity with a warm cream base (#f0ece4 at 6% opacity over the Midnight Indigo). This creates the faintest suggestion of textured watercolor paper beneath all content, grounding the digital elements in a physical material metaphor. ## Uniqueness Notes **Differentiators from other designs:** 1. **Hexagonal Grid as Structural Foundation, Not Decoration:** While hexagonal elements appear occasionally in other designs as decorative accents, yamato.quest uses the hexagonal honeycomb as its actual layout grid. Every content module, every navigation element, every card is hexagonally clipped and positioned on a hex grid. This creates a fundamentally different spatial experience from the rectangular layouts that constitute 98%+ of the portfolio. 2. **Watercolor-as-Technical-Illustration Reframing:** The watercolor aesthetic (8% frequency) is typically deployed for soft, artistic, pastoral content. yamato.quest subverts this by using watercolor washes as technical diagram annotation -- the pigment bleeds follow circuit topologies, the color gradients indicate signal strength, the wash layering maps to PCB layer stacking. This collision of the handcrafted and the technical is unique in the portfolio. 3. **Radial Reveal Scroll Pattern Instead of Linear:** Rather than the universal top-to-bottom scroll reveal (97% of designs use scroll-triggered with linear directionality), yamato.quest reveals content in a radial/signal-propagation pattern from the viewport center outward. This creates a fundamentally different scrolling experience where content appears to emanate from a central point rather than sliding in from an edge. 4. **Analogous Palette Across Indigo-Teal-Emerald:** The analogous palette (3% frequency) specifically spanning the cool indigo-to-emerald range is not present in any existing design. Most analogous palettes in the portfolio cluster around warm tones. The cool analogous range creates a distinctly different emotional register -- clinical but not cold, oceanic but not soft. 5. **Circuit Motif Rendered in Watercolor Medium:** While circuit motifs appear at 17% frequency, they are universally rendered in clean vector graphics or CSS line-art. yamato.quest renders circuit elements with watercolor treatment -- bleeding edges, pigment pooling at via pads, wash gradients along trace runs. This material translation of a digital motif into an analog medium is unprecedented in the portfolio. **Chosen Seed:** aesthetic: watercolor, layout: hexagonal-honeycomb, typography: slab-serif, palette: analogous, patterns: pulse-attention, imagery: glassmorphic-cards, motifs: circuit, tone: tech-tutorial **Avoided Overused Patterns:** playful aesthetic (96%), centered layout (99%), scroll-triggered patterns (97%), minimal imagery (95%), warm palette (100%), friendly tone (99%), mono typography (99%), vintage motifs (89%), photography imagery (72%), parallax patterns (72%), stagger patterns (60%). All seed values selected from the low-frequency end of their respective categories.