# Design Language for sora.markets

## Aesthetics and Tone

`sora` is the Japanese word for *sky* — the infinite, uncontained blue that exists above everything else. But this is a *markets* domain: the meeting place where buyers and sellers gather, where goods and ideas exchange hands, where the chaotic energy of commerce pulses beneath open air. The site lives at the precise collision of **sky-as-infinite-possibility** and **market-as-organized-bustle** — translated through **watercolor aesthetics** that dissolve hard edges into wet bloom, turning the tension between structure and flow into its central visual metaphor.

The mood is **playful and warm**: a morning market at golden hour, painted on damp paper, where the ink bleeds beautifully into the grain. Think a Japanese morning market scene rendered by an artist who studied under Paul Klee — geometric stalls of commerce dissolving into saturated watercolor washes, the scaffolding of trade made liquid. Not precious, not corporate. Exuberant and approachable, with a handmade humanity.

**Core visual metaphor:** Water moving through a market. Bubbles rising through still water, paths drawn by fish through kelp, the swirl of dye dropped into a cup — all of this is commerce at the molecular level: particles finding equilibrium, price discovery as fluid dynamics.

**Tone registers:**
- Primary: Warm, curious, open — like morning light on craft paper
- Secondary: Playful-technical — abstract-tech motifs rendered as hand-drawn water diagrams
- Tertiary: Grounded wonder — earthy pigments bleeding into sky

## Layout Motifs and Structure

The layout uses **modular blocks** — but not the rigid, rectangle-grid modularity of a dashboard or a content management system. These are **watercolor tiles**: each block has a visible, organic boundary, like poured pigment that settled into its own shape before drying. Blocks vary in width and height within a loose 12-column underlying grid, but their *visual* boundaries are blurred edges, not hard borders.

**Macro composition:**
- The page is divided into approximately 6–9 autonomous blocks, each a self-contained visual unit
- Blocks do not share hard borders — they bleed into each other at edges, creating watercolor halos
- The underlying grid is a 12-column CSS grid with `gap: 0` — spacing is handled via block background diffusion, not gap pixels
- Blocks alternate between **wide (8–12 col)** and **narrow (4–6 col)** units, creating visual rhythm without monotony
- No block is perfectly rectangular at its visual boundary — SVG clip-paths with organic curves define each block's painted edge

**Spatial relationships:**
- Vertical rhythm: loose — blocks breathe with `padding: clamp(3rem, 8vw, 10rem)` — generous internal space
- Horizontal: blocks snap to grid columns but overflow their visual boundary by 2–6px via SVG halo glow effects
- The hero block is **not full-bleed** — it sits centered with a 10% margin, like a painting matted on gallery wall, showing the raw paper texture beneath

**Path-draw SVG animations:** Thin ink-line paths trace connection between blocks as the user scrolls. These paths are `stroke-dashoffset` animations triggered on intersection observer — not continuous loops, but one-directional draws that happen once per scroll session, like ink drying on paper.

**Scroll behavior:** No parallax (avoided — overused at 85%). Instead: **watercolor diffusion on entry** — blocks fade in as pigment blooming from their center, using `clip-path` radius animations expanding from 0 to full block shape over 0.6s.

## Typography and Palette

**Typography (Google Fonts only):**

- **Display / Headlines: [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)**, weight 400 (the only weight available — it is a single-weight display face). Set at `clamp(5rem, 12vw, 14rem)` for the wordmark and hero headline. Bebas Neue is all-caps, condensed, bold — it provides the scaffolding of commerce and structure against which the fluid watercolor backdrop blooms. Set in `#3D2B1F` (dark walnut ink) with letter-spacing `0.05em`. The rigidity of Bebas Neue is the intentional counterpoint to the fluid everything else.

- **Subheadings: [Nunito](https://fonts.google.com/specimen/Nunito)**, weight 700, rounded terminals. At `1.4–2rem`. Nunito's rounded letterforms echo the bubble motif and read as playful-warm without being childish. Subheadings are set in `#6B4C2A` (medium walnut) or `#C17A3B` (amber clay) depending on block background.

- **Body copy: [Nunito](https://fonts.google.com/specimen/Nunito)**, weight 400, at `1rem / 1.75 line-height`. Long-form reading in `#4A3728` (readable dark earth) on light backgrounds, or `#F5EDD8` (parchment) on dark blocks.

- **Monospace / Technical annotations: [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono)**, weight 400, at `0.85rem`. Used for abstract-tech callouts, data annotations, and market statistics — a wink at the technical substrate beneath the market's human face.

**Palette — Warm Earthy with Sky Bleeds:**

| Name | Hex | Usage |
|------|-----|-------|
| Raw Parchment | `#F7EDD8` | Background base — the damp paper everything is painted on |
| Walnut Ink | `#3D2B1F` | Primary text, Bebas headlines, hard structure |
| Amber Clay | `#C17A3B` | Accent, CTAs, highlight borders, icon fills |
| Burnt Sienna | `#A0522D` | Secondary accent, path-draw SVG ink color |
| Dusty Sage | `#8DAF8C` | Sky-from-market: the open-air feeling, used in block halos |
| Watercolor Blue | `#7BA7BC` | Water-bubble imagery, sky motifs, link states |
| Deep Terracotta | `#7A3B2E` | Dark blocks, footer, inverted sections |
| Warm White | `#FBF7F0` | Card surfaces, lifted tile backgrounds |
| Bubble Foam | `#D4EAE8` | Pale blue-green for water bubble highlight effects |

**Color application rules:**
- Background: `Raw Parchment` (#F7EDD8) — all page, with paper grain SVG texture overlay at 8% opacity
- Block halos: watercolor bleed edges using CSS `filter: blur(8–20px)` + `opacity: 0.6` on pseudo-elements in Dusty Sage or Watercolor Blue
- Path-draw SVG strokes: `Burnt Sienna` #A0522D at `1.5px` stroke-width

## Imagery and Motifs

**Water bubbles as the primary visual motif.** Every section contains bubbles — but not the tacky circle-array bubbles of generic SaaS. These are **scientifically accurate watercolor bubbles**: SVG circles with:
- A thin stroke in `Watercolor Blue` (#7BA7BC)
- A radial gradient fill from `Bubble Foam` (#D4EAE8) at 30% opacity to fully transparent
- A small specular highlight: a white-to-transparent radial gradient in the upper-left quadrant of each circle
- Soft drop shadow via CSS `filter: drop-shadow(0 2px 8px rgba(123,167,188,0.25))`

Bubbles vary in diameter from `24px` to `180px`. They cluster at block edges and float upward using gentle `translateY` keyframe animations (30s loops, staggered starts per bubble, `ease-in-out` with `alternate` direction — they rise and fall, like bubbles hovering near a glass surface, not a cartoon cartoon).

**Abstract-tech motifs as the secondary visual language.** The market's invisible infrastructure — blockchain, order books, price feeds — is rendered as **hand-drawn technical diagrams in watercolor style**:
- Node graphs where nodes are watercolor circles and edges are path-draw SVG ink lines
- Circuit-like tree structures (binary trees, price ladders) with rounded corners and ink-bleed at junctions
- These diagrams are decorative, not functional — they sit behind content as watermarked textures at `opacity: 0.12`

**Path-draw SVG animations** are the connective tissue of the page:
- Between blocks, thin `1px` ink-color (`#A0522D`) paths trace organic routes — not straight lines, but spline curves with 2–3 control points, resembling ink brushed freehand
- Each path animates `stroke-dashoffset` from full path length to `0` when its section enters the viewport
- Paths do not loop — they draw once and remain visible, like ink drying on paper
- Total of 8–12 visible path segments across the full page

**No photography.** No stock images. No 3D renders. All imagery is SVG-native.

**Decorative paper texture:** A single, subtly-grained SVG `<feTurbulence>` filter applied as an `<feComposite>` overlay across the full-page background at 6% opacity — this simulates cold-press watercolor paper grain without a raster image file.

**Block halos (the watercolor bleed):** Each modular block has a `::before` pseudo-element positioned at its edges with `border-radius: 40–60%` blob shapes, filled in the block's secondary accent color, blurred 12–20px, at 50% opacity. This creates the impression of watercolor pigment bleeding outward from the block's edges into the damp parchment paper.

## Prompts for Implementation

**The story to tell:** A visitor arrives at sora.markets as if stepping into a covered morning market in Kyoto — the stalls are just opening, the light is golden, and someone has been painting the scene from a doorway. The page does not pitch a product. It *places you inside a feeling*: the electric possibility of a market at opening hour, everything about to happen, seen through the lens of water and sky. The visitor scrolls through this scene; each block is a different stall or vantage point in the same market-as-painting.

**Block narrative sequence (6 modular blocks):**

1. **Block I — Opening Horizon:** The hero block. Bebas Neue wordmark `sora.markets` at 12vw, sitting above a wide watercolor wash horizon line in amber-to-blue gradient. Three large bubble SVGs float slowly. The tagline in Nunito 700: *"where sky meets market"* (or the actual site tagline). A path-draw SVG traces from the wordmark down to the first CTA — the ink drawing itself as the user loads. The hero block is NOT full-bleed; it sits matted at 10% horizontal margin, showing Raw Parchment below.

2. **Block II — The Stall Grid:** A 3-column modular block showing the core market categories or featured listings. Each "stall" is a watercolor tile with bleed-edge halos. The stall titles are Bebas Neue, smaller (2–3rem). Bubbles cluster at the lower corners. A path-draw SVG traces between stalls like a walking path through a market.

3. **Block III — The Water Diagram:** An abstract-tech full-width decorative section. An animated SVG diagram fills the block as a watermarked background — a node graph rendered in watercolor style showing connections (without text, purely aesthetic). Over it: a short Nunito 400 paragraph in Walnut Ink explaining the platform's core mechanic. No bullet points. Pure prose.

4. **Block IV — The Bubbles Column:** A narrow (4-col) block floated to the right, packed with large overlapping bubble SVGs in varying sizes. Adjacent (8-col) text block with a Bebas Neue pull-quote in Amber Clay. The bubbles in this block animate slightly faster (25s loop) and have slightly higher opacity (0.3 fill).

5. **Block V — The Market Flow:** A full-width block using a path-draw SVG as the *primary* visual — a flowing spline path from left edge to right edge, with small circular nodes (market participants? price points?) dotted along it. The path draws itself in 2s on intersection. Text labels in JetBrains Mono annotate the nodes. Below the path: Nunito body copy explaining the market's value proposition.

6. **Block VI — The Colophon:** Footer block in Deep Terracotta (#7A3B2E) background with Warm White text. The sora.markets wordmark repeats in Bebas Neue at 6rem, faded to 40% opacity as a watermark. Navigation links in Nunito 400 Warm White. One final large bubble (180px) in the upper-right corner of this block, rising slowly through it.

**CSS implementation notes:**
- Use `CSS Grid` with `grid-template-columns: repeat(12, 1fr)` for the modular block system
- Block halos: `position: absolute; border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%; filter: blur(16px); opacity: 0.5; z-index: 0;` on `::before` pseudo-elements
- Bubbles: `<circle>` SVG elements with `<radialGradient>` fills, animated with `@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }` at staggered `animation-delay` values
- Path-draw: `stroke-dasharray` and `stroke-dashoffset` equal to the path's `getTotalLength()`, animated via Intersection Observer callback setting a CSS custom property `--progress` from 1 to 0
- Paper texture: `<filter id="paper"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/><feBlend in="SourceGraphic" mode="multiply"/></filter>` applied as `filter: url(#paper)` on the root background layer at `opacity: 0.06`

**Animation philosophy:** Everything moves like water, not like UI. No bounce easing. No spring physics. Use `cubic-bezier(0.25, 0.46, 0.45, 0.94)` for most transitions — a gentle ease-out that feels like pigment settling. Duration 0.6–1.2s for reveals, 20–35s for ambient bubble floats.

**AVOID:**
- CTA-heavy layouts with pricing blocks and stat-grids
- Full-bleed hero (the hero is matted on parchment, not edge-to-edge)
- Parallax scrolling (overused at 85% in corpus)
- Centered stack layout (overused at 83% in corpus)
- Hard-edge rectangular blocks (every block must have organic SVG clip or blur halo)
- Blue-purple tech palette (the corpus uses tech-blue constantly — this palette is exclusively warm earthy with sky accents)

## Uniqueness Notes

**Differentiators from other designs in the registry:**

1. **Bebas Neue as structural counterpoint to organic watercolor.** The corpus uses Bebas Neue at 6% — but always in bold/aggressive contexts (street style, brutalist). This is the first design that uses Bebas Neue's rigidity *in deliberate contrast* with maximum softness: the hard condensed capitals are the iron scaffolding of a market stall frame, against which watercolor blooms freely. Typography as structural tension, not as mood amplifier.

2. **Modular-blocks layout with organic-edge block boundaries.** The corpus uses modular-blocks at only 3% — it's an underused layout. This design takes modular blocks and removes all visual rigidity by dissolving block edges into watercolor halos via CSS blur + pseudo-element blob shapes. A modular grid that looks hand-poured rather than machine-laid is architecturally novel in the corpus.

3. **Path-draw SVG as connective tissue between blocks (not as decoration within blocks).** Path-draw SVG appears at 10% in the corpus — but always as decorative motion within a section (circuit traces, growing vines, animated borders). Here, the paths travel *between* blocks, tracing visitor movement through the market layout. The SVG path IS the UX wayfinding: ink drawing itself to show you where to go next.

4. **Water-bubble imagery as the primary decorative system, rendered with scientific SVG accuracy.** The corpus uses water-bubbles at 4% — always as generic circle arrays. This design renders bubbles with correct optical physics: radial gradient fill (sparse center, denser rim), specular highlight at upper-left, soft drop shadow — the same rendering an illustrator would use to paint bubbles in watercolor. SVG circles rendered with pigment physics.

5. **Warm-earthy palette applied to a markets/finance domain.** The corpus uses warm-earthy at only 3%. Finance/market domains in the corpus default to blue-purple-tech palette. sora.markets consciously refuses that convention: the market is outdoors, in morning light, on craft paper — earth and sky and clay and amber, not silicon and midnight blue.

**Chosen seed:** aesthetic: watercolor, layout: modular-blocks, typography: bebas-bold, palette: warm-earthy, patterns: path-draw-svg, imagery: water-bubbles, motifs: abstract-tech, tone: playful

**Avoided patterns (overused in corpus):**
- centered layout (83%) — avoided in favor of modular-blocks
- full-bleed (63%) — avoided; hero is matted on parchment with visible margin
- parallax-scroll (85%) — avoided entirely; using watercolor diffusion entry animations instead
- dark/midnight tech palette (dominant in corpus) — avoided; using warm earthy parchment base
- generic circle/bubble arrays without optical accuracy — avoided in favor of SVG bubble physics rendering
<!-- DESIGN STAMP
  timestamp: 2026-05-11T20:57:44
  seed: seed:
  aesthetic: `sora` is the Japanese word for *sky* — the infinite, uncontained blue that exis...
  content_hash: 52c08733d295
-->