# Design Language for Shinpaisho.com ## Aesthetics and Tone Shinpaisho.com is a quiet observatory of worry -- a Japanese-minimal data visualization studio that takes anxiety ("心配症 / shinpaishou" = the disposition to worry) seriously, gently, and without prescription. The site does not offer self-help; it offers a structured, contemplative survey of worry as a measurable, charitable phenomenon. Imagine a small architect-designed data center built into a wooden cabin in a quiet forest valley: every surface is carefully proportioned, every readout is precisely typeset, every chart breathes with negative space, and the whole structure is suffused with the scent of cedar and the sound of a distant kettle. The aesthetic is **japanese-minimal** in its purest form -- the design vocabulary of MA (negative space as primary compositional element), the asymmetry of katei (家庭, garden composition), the wood-and-paper warmth of traditional joinery rendered as digital surfaces. No visual element is decoration; everything earns its placement through structural necessity. The whitespace between elements is itself an element -- it carries meaning, it sets pacing, it lets the reader breathe. Every chart, every label, every line has been considered for its proportion to the empty space surrounding it. The tone is **authoritative** -- not in the corporate-PowerPoint sense, but in the quiet sense of a Japanese craftsperson speaking about their material. The voice is calm, precise, knowledgeable, and unsentimental. It does not pity the worried. It does not minimize the worry. It charts it, names it, classifies it, and offers context. Headlines are declarative facts: "worry has a shape," "this is the topology of one anxious week." Body copy is short and informationally dense, written in third person, present tense. The crystalline motif vocabulary is essential here: worry is treated as a multi-faceted phenomenon, and the visual ornaments are crystalline diagrams that suggest faceted observation -- the same anxiety viewed from different angles. The crystalline forms are precise, mathematically derived, and rendered as 1px stroke SVG in earth-tone wood-stained palette. They suggest both Japanese architectural truss-work and gemological cross-sections. ## Layout Motifs and Structure **Bento-Box Composition (rigorously proportional):** The primary structural device is a bento-box layout -- an asymmetric grid of rectangular cells of varying proportions, fitting together with precise margin gaps, like a perfectly arranged bento meal. But this is not the casual decorative bento-grid common in lifestyle dashboards; this is a discipline-honoring bento, where every cell's proportion is determined by the relative significance of its content (per the silver ratio 1:√2 = 1:1.414, used as the dominant aspect ratio for major cells). The bento grid uses a 12-column flexible base with cells spanning 3, 4, 6, 8, or 12 columns and rows of 1, 2, or 3 row-units (one unit = 200px on desktop). Cell margins (gutters) are uniform at 24px. Each cell is bounded by a 1px stroke in `#a89478` (faded sand) at 30% opacity -- nearly invisible but perceptible. **Cell Types:** - **Stat cells (1x1 column):** Hold a single large number with a tiny label and a small sparkline. - **Chart cells (4x2 or 6x2 column):** Hold a single primary data visualization (line chart, area chart, dot plot, distribution). - **Reading cells (8x3 column):** Hold a passage of body copy (60-80ch) with generous internal padding (48px). - **Crystalline ornament cells (3x3 column):** Hold a crystalline diagram with a single caption. - **Whitespace cells:** Genuinely empty cells whose only purpose is to introduce MA into the composition. These are deliberately not "wasted space" -- they are structural breathing. **Section Architecture:** The site is organized as 5 themed bento boards, each a distinct page-section, separated by 200px vertical gaps: 1. **概要 (Gaiyou) / Overview:** Welcome bento with a topology diagram of the site's content. 2. **計測 (Keisoku) / Measurement:** Charts, stats, and diagrams visualizing patterns of worry. 3. **分類 (Bunrui) / Classification:** A taxonomy of worry-types presented as a faceted crystalline diagram with annotations. 4. **観察 (Kansatsu) / Observation:** Long-form reading content -- essays on the phenomenology of worry. 5. **静寂 (Seijaku) / Silence:** A near-empty closing bento with a single small note and abundant whitespace. **Micro-Interactions Pattern:** The interaction vocabulary is built entirely on subtle micro-interactions -- nothing flashy, nothing dramatic, but every interactive element responds to attention with quiet precision: - Hovering a cell causes its 1px stroke to deepen from 30% to 60% opacity over 240ms with a sand-color easing. - Hovering a stat number causes the number to subtly lift (translateY -1px) and the unit label below to fade-in a tiny tooltip explaining the metric. - Hovering a chart point causes a 6px crosshair reticle to softly fade-in centered on the point, with a thin readout label. - Hovering a crystalline ornament causes it to slowly rotate +8 degrees over 400ms, then return on mouse-leave. - Clicking a cell expands it to fullscreen via a smooth CSS transform animation (cell grows to 100vw/vh while siblings fade to 30% opacity). These micro-interactions are designed to reward attention without ever demanding it. A casual scroll past sees nothing happening; a deliberate hover reveals quiet detail. **Vertical Rhythm:** The site does not use scroll-snap. Standard scroll behavior. Each bento board occupies 100vh-130vh height. The 200px gap between boards is empty -- pure white-cream void. ## Typography and Palette **Primary Sans Font:** "M PLUS Rounded 1c" (Google Fonts) -- a Japanese-designed rounded humanist sans with full kanji + Latin glyph coverage. Chosen as the rounded-sans anchor of this site. Used for all UI labels, chart annotations, navigation elements, stat values. Weight 300, 400, 500, 700 used selectively. Letter-spacing 0.04em for labels (uppercase where used), 0em for sentence-cased running text. **Secondary Sans Font:** "Inter" (Google Fonts) -- weight 400 used for chart axis labels, numerical annotations, and tabular data. Letter-spacing 0.02em. Used because of its excellent figure rendering at small sizes. **Display Font:** "M PLUS Rounded 1c" weight 700 -- used for kanji section titles (概要, 計測, etc.) at large sizes (clamp 56px to 96px) and major statement headlines. Kanji are rendered with proper proportional spacing. **Body Font:** "Noto Serif JP" (Google Fonts) -- a high-quality Japanese serif used for long-form essay content with mixed Japanese and Latin text. Weight 400, line-height 1.85 (extra generous to allow kanji to breathe). Letter-spacing 0.04em. Used because the rounded sans, while excellent for UI, would feel insubstantial for long-form prose. **Type Scale:** - Section kanji title: clamp(72px, 9vw, 144px) -- M PLUS Rounded 1c weight 700 - H1 statement: clamp(40px, 4.5vw, 64px) -- M PLUS Rounded 1c weight 500 - H2 subsection: clamp(24px, 2.4vw, 32px) -- M PLUS Rounded 1c weight 500 - Stat value: clamp(48px, 5vw, 80px) -- M PLUS Rounded 1c weight 300, tabular figures - Body essay: clamp(16px, 1.1vw, 18px) -- Noto Serif JP weight 400 - UI label: 12px M PLUS Rounded 1c weight 400, letter-spacing 0.06em uppercase - Chart axis: 11px Inter weight 400 **Palette (Earth-Tones, wood-and-paper):** - Paper base: `#f3ede0` (washi-paper cream, slightly warm, lightly textured) - Surface elevated: `#fbf6ec` (paler washi for stat-cell backgrounds, very subtle elevation) - Cedar wood ink: `#3a2e22` (the primary text color -- a dark warm brown, not black) - Faded sand: `#a89478` (cell border strokes and secondary annotations) - Aged moss: `#6e7e5a` (used for "stable" or "observed" data states in charts) - Persimmon: `#c4663d` (used sparingly for "elevated worry" or attention-required data states; warm rust orange) - Indigo dye: `#3a4f6b` (used for data overlays and crystalline-diagram fills) - Stone gray: `#7a7066` (axis labels and tertiary annotations) The palette is grounded entirely in natural material associations -- washi paper, cedar wood, aged moss, fired clay, indigo-dyed cloth, river stone. Nothing in the palette is synthetic-looking. The overall warmth is paper-and-wood, not orange-and-yellow. ## Imagery and Motifs **Data Visualization (the dominant imagery):** The site is built around carefully crafted data visualizations rendered in a unified visual style. All charts use the earth-tone palette and follow strict design rules: - Line charts: 1.5px strokes in cedar ink (#3a2e22), with optional secondary series in aged moss or indigo. Smooth curves only (catmull-rom spline). Gridlines in faded sand at 20% opacity. No fills on lines unless area-chart specifically. - Area charts: Filled regions use color at 22% opacity over their stroke color. - Distribution / histogram charts: Each bar is a 1px-stroke rectangle with no fill, suggesting paper specimens. - Sparklines: 12-30px tall, used inside stat cells, single-color cedar ink, no axis labels. - Dot plots: Small dots (5-7px) in the data-state color (moss, persimmon, indigo). - Calendar heatmaps: Used for "weekly worry intensity" visualization, with cell color stepping from washi (none) through aged moss to persimmon. All charts include precise axis labels in Inter mono-spaced numerals. Chart titles in M PLUS Rounded weight 500. Annotations in Noto Serif JP italic at small sizes. The data being visualized is intentionally fictitious-but-plausible -- a poetic survey of worry in modeled populations. Charts include: - "Frequency of nighttime worry intrusions, by hour of night" (dot plot) - "Worry-thought duration distribution" (histogram with persimmon highlight on outlier) - "The seven types of worry, weighted by frequency" (small-multiple bar chart) - "A typical week's worry intensity" (calendar heatmap) - "Topology of related worries" (force-directed network diagram with crystalline node ornaments) **Crystalline Diagrammatic Motifs:** Crystalline forms appear as decorative ornaments interspersed with the data visualizations. Specifically: - **Worry topology crystal:** A faceted polyhedral diagram, rendered as 1px indigo strokes, where each facet represents a category of worry. Used as the centerpiece of the Bunrui (Classification) bento board. - **Section-marker crystals:** Small 2D crystalline polygons (octagons, irregular hexagons) marking the start of each major section, sized 32px, indigo stroke. - **Crosshair reticles:** Tiny crystalline-style crosshairs (4 short lines emanating from a center point) used as the chart-point hover affordance. **No Photography.** All imagery is data-driven and crystalline-diagrammatic. No stock images, no illustrations of people, no nature photography. **Iconography:** A small set of custom kanji-radical-inspired icons for UI affordances: a single-stroke triangle, a square with a centered dot, a nine-line grid. All 1.5px stroke, all in cedar ink color. ## Prompts for Implementation **Storytelling Frame:** The visitor arrives at a quiet Japanese-minimal observatory of worry. They are greeted with a kanji section title and a brief statement of the site's purpose: to chart, name, and contextualize anxiety as a phenomenon worth careful attention. They scroll through 5 bento boards, each a different chamber of observation. The site is dense with information but never overwhelming because the ma (negative space) carries the visual weight. **Bento Board Implementation:** Each board is implemented as a CSS Grid container: ```css display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 200px; gap: 24px; ``` Cells span columns and rows according to their content significance. The grid is responsive: below 900px viewport, cells stack into a single column with proportional heights. Below 600px, simplified single-column with cell padding reduced to 16px. **Chart Implementation:** - All charts are inline SVG components, hand-crafted (or generated via D3 + handcrafted post-processing, never default Chart.js styling). - Stroke widths: 1.5px for primary data, 1px for axes, 0.5px for gridlines. - Curves: catmull-rom spline for smooth lines, never straight-line connect-the-dots. - Animation on entrance: stroke-dashoffset reveal over 1200ms with cubic-bezier(0.65, 0, 0.35, 1), once per chart, when chart enters viewport. - Hover interactions: invisible event-target rects over each data point, with crosshair reticle + readout tooltip on hover. **Micro-Interactions Implementation:** - All hover transitions: 240ms duration, cubic-bezier(0.4, 0, 0.2, 1). - Cell border opacity transition on hover (30% → 60%). - Stat number hover: translateY(-1px) + tooltip fade-in. - Crystalline rotation on hover: rotate(0) → rotate(8deg) on hover-in, return on hover-out. - All micro-interactions are subtle enough that they do not call attention to themselves; they are felt rather than seen. **Cell Expansion Modal:** Clicking a cell triggers a smooth expand-to-fullscreen animation: - The cell's `transform: scale()` and `position: fixed` properties animate over 600ms with a cubic-bezier(0.65, 0, 0.35, 1) curve. - Sibling cells fade to 30% opacity simultaneously. - An inset close-button (small kanji 閉) appears in the upper-right of the expanded cell. - Esc key, click outside, or close button dismisses the expansion (reverse animation). **Typography Treatment:** - Kanji section titles set with vertical-align baseline carefully calibrated for kanji glyph proportions. - Latin and Japanese text in mixed runs use proper `font-feature-settings: "palt"` for optical kerning of Japanese characters. - Body copy paragraphs are short (3-5 sentences) with generous line-height. Paragraph breaks use 1.6em vertical space. **Color Application Rules:** - The persimmon accent (#c4663d) appears at most once per bento board, used to highlight a single critical data point or annotation. - Indigo (#3a4f6b) is reserved for crystalline diagram strokes and data-overlay elements. - Aged moss (#6e7e5a) is the "default" data series color when more than one is needed. - Cedar ink (#3a2e22) is the dominant text color across the entire site. **Avoid Absolutely:** - Hero CTAs, signup forms, "trusted by" logos. - Carousels, sliders, accordions. - Photography of any kind, including stock photography of "worried-looking people." - Bright/saturated colors. Nothing in the palette exceeds about 50% saturation. - Drop shadows. Use only the 1px borders and the 200px ma-gaps for spatial separation. - Dark backgrounds. The washi-paper cream base is essential. - Long page widths -- the bento grid is the entire layout system; no edge-to-edge content. ## Uniqueness Notes **Differentiators from other designs in this corpus:** 1. **Japanese-minimal at 1% in corpus** -- this aesthetic register is rare. The combination with bento-box (also relatively low frequency) and earth-tones creates a distinctive wood-and-paper data observatory. 2. **Data visualization as primary content type** -- most sites in the corpus use illustration, photography, or decorative geometric ornament as primary imagery. This site uses precise charts and graphs as its visual core, executed with strict typographic discipline. Data-viz imagery is at 5% in corpus. 3. **Authentic kanji typography in section structure** -- using actual kanji (概要, 計測, 分類, 観察, 静寂) as section titles, set in M PLUS Rounded 1c with proper kanji metrics, integrating Japanese and Latin text systematically. 4. **Authoritative tone executed via data charts rather than copy assertions** -- the site's authority comes from precision of measurement and visualization, not from rhetorical claims. 5. **MA (ma, 間) as compositional element** -- entire bento cells are intentionally empty. The negative space carries weight. 6. **Distinct from this batch's Korean-language SengGack series** -- this site uses Japanese language and visual sensibility, with a completely different cultural vocabulary, and frames the topic (anxiety/worry) as measurement rather than philosophical inquiry, dreamy aquatic, or fairycore. **Chosen seed/style (from Batch_003 Planned Seeds):** aesthetic: japanese-minimal, layout: bento-box, typography: rounded-sans, palette: earth-tones, patterns: micro-interactions, imagery: data-viz, motifs: crystalline, tone: authoritative **Frequency-analysis avoidance notes:** - Avoiding the corpus-overused "botanical" aesthetic (66%), "photography" imagery (99%), "warm" palette (99%) -- this site has zero photography, and its warmth is the specific narrow band of washi-paper cream and cedar ink, not warm-orange. - Embracing under-used patterns: japanese-minimal aesthetic (1%), bento-box layout, data-viz imagery (5%), earth-tones palette, M PLUS Rounded 1c rounded-sans typography, crystalline motif at low frequency. - Micro-interactions executed as a system-wide vocabulary rather than a one-off pattern.