# Design Language for miris.studio ## Aesthetics and Tone miris.studio is a **dark-academia rebellion**: a place where dusty library shelves collide with glowing terminal screens, where ink-stained fingers reach for a keyboard rather than a quill. The aesthetic is deliberately contradictory — warm creamy parchment bleeding into the cold phosphor-green glow of a CRT monitor, antique woodblock textures underneath floating browser windows. This is not a portfolio. It is a manifesto written in two alphabets: Old English and hexadecimal. Tone is **edgy-rebellious** in the most intellectual sense: this is a creator who reads Foucault and writes compilers, who burns their essays instead of publishing them, who believes the most radical act in 2025 is to disappear into a book and emerge having built something no one asked for. The mood board: a Victorian reading room that got a server rack installed in the corner. Warm amber sconce light casting long shadows across a mechanical keyboard. A chalkboard filled not with equations but with commit hashes. The smell of old paper and hot solder. Visual signature: **translucent cream panels with rounded corners tilted at 3–7° on a deep sepia-charcoal ground**, each panel appearing to float and cast a soft shadow. Between panels, water-bubble orbs drift slowly upward — translucent spheres refracting the background, each one carrying a single fragment of code or glyphed text inside. ## Layout Motifs and Structure The page is a **single long vertical scroll** divided into exactly five stacked sections, each one a "chapter" with its own micro-world. Sections do not share the same tilt angle — each panel cluster within a section is independently skewed, creating a sense of organized chaos, like a corkboard pinned with overlapping papers. **Section structure:** 1. **The Folio** — Full-viewport opener. A large tilted cream card (–4°) overlaps a second card (+3°) beneath it. Background: near-black `#1c1710` with a very subtle linen-weave texture (CSS noise). The studio wordmark is set in a large display font, baseline-rotated –2° for handwritten energy. 2. **The Codex** — Work/projects section. Three tilted cards arranged in a cascading stack (each 6° offset from previous), displayed as if tossed onto a table. Cards slide in from the right as the user scrolls into view. 3. **The Apparatus** — Tech/tools section. Instead of a feature grid, this is a dissection diagram: a single large bubble cluster illustration where each bubble is labeled with a technology name. Bubbles are interactive — hover lifts and pops them with a soft elastic rebound. 4. **The Dispatch** — Writing/thoughts. A long-scroll section that mimics a Letterpress-printed broadsheet. Text columns slightly offset, drop-caps in a contrasting serif, pullquotes rotated 1.5°. 5. **The Coordinates** — Contact/closing. A single centered panel, tilted +2°, with coordinates (email, links) set as if engraved in the card. **Spatial system:** 120px section padding on desktop. Panels never align to a strict grid — they are positioned with `calc()` offsets of ±2–4% from center. The negative space between tilted panels is intentional and filled only by drifting bubbles. ## Typography and Palette **Primary Display Font:** `Abril Fatface` — used for section titles and the studio mark. Heavy, ink-trap-influenced, with a slight editorial absurdity that reads as "serious but knows it's absurd." Used at 96px / 72px / 48px scales. **Secondary Heading Font:** `Fraunces` — optical size variable font. Use it in its "wonky" optical axis (opsz low, wdth normal) for subheadings. This gives the peculiar quality of a vintage typeface that has been slightly warped by moisture. **Body / UI Font:** `Nunito` — the "playful-rounded" anchor. All UI text, labels, captions, and interface elements use Nunito at weights 400 and 700. Its rounded terminals contrast directly with the sharp academic display fonts above. **Code / Terminal Font:** `JetBrains Mono` — used in the Apparatus section and anywhere code fragments appear inside bubbles. **Palette:** - `#1c1710` — Inkwell Black (page background, deep shadow) - `#2e2418` — Leather Brown (section divider fills, card borders) - `#f5f0e8` — Parchment Cream (primary card background) - `#ede5d0` — Aged Vellum (secondary card background, slightly more yellow) - `#c8b89a` — Warm Tan (decorative borders, shadow edges) - `#a3c4a8` — Faded Sage (accent — used sparingly on hover states, tech labels) - `#7ec8c8` — Aqua Specter (bubble highlight, the one cold color — creates tension with the warm palette) - `#d4a853` — Amber Sconce (the only warm glow accent — used on the wordmark underline, active states) - `#3a3025` — Tobacco Dark (body text on cream cards) **Typographic rules:** No pure black `#000` or pure white `#fff` anywhere. All text is Tobacco Dark on cream, or Parchment on dark backgrounds. Line-height 1.75 for body, 1.1 for display. ## Imagery and Motifs **Water Bubbles — the primary decorative system:** These are not clip-art bubbles. Each bubble is a CSS/SVG sphere: a radial gradient from near-white at top-left to nearly transparent, with a specular highlight dot and a faint chromatic rim (aqua on one edge, amber on the other, refracting the dark background). Inside each bubble lives one of: a short code snippet in JetBrains Mono, a single Unicode character from an obscure Latin block, or an SVG icon from a curated set. Bubbles are animated: they drift upward at 0.3–0.8px/frame using a Perlin-noise path (not a straight line). They are generated procedurally on scroll — new bubbles appear at the bottom of a section and drift into the section above. When the user's cursor approaches within 80px, the nearest bubble gently deflects away (inverse square law repulsion), then slowly drifts back. **Tech Motifs — subverted:** Rather than clean SaaS icons or circuit boards, the tech motifs here are **archival**: a printed wiring diagram drawn in the style of a 19th-century technical patent illustration (hairline strokes, hand-lettered component labels, ornate title cartouche). This diagram is the background texture of the Apparatus section, rendered in `#2e2418` on `#f5f0e8` at 8% opacity. The tech brands/tools appear NOT as logos but as engraved glyphs — as if stamped into wax. **Decorative borders:** Thin double-rule borders on cards (2px outer, 0.5px inner, 6px gap) in Warm Tan `#c8b89a`. Corners have a small diamond accent (4×4px rotated square). This is a direct reference to academic journal borders. **Linen texture:** A 200×200px repeating SVG noise pattern at 4% opacity on the background — not a photograph, not a CSS filter, but a hand-crafted SVG fBm turbulence that replicates the woven texture of bookcloth. ## Prompts for Implementation Build this as **a silent, self-contained scroll experience** — no navigation bar, no hamburger menu, no sticky header. The only UI chrome is a slim progress thread on the left edge (2px wide, amber `#d4a853`), growing as the user scrolls, like a bookmark ribbon. **The bubble system must be real, not decorative dividers:** Generate 8–14 bubbles per section using a seeded PRNG (seed = section index). Each bubble: 40–120px diameter, CSS custom properties for color stops, drift animation using `@keyframes` with `transform: translate()` interpolating between 4–6 waypoints computed from Perlin noise at build time. The repulsion on cursor proximity is `requestAnimationFrame`-driven in JS — track `mousemove`, for each bubble compute distance to cursor, apply `dx/dy * (80/(dist+1))` repulsion clamped to 20px max displacement. **Tilt system:** Every card has `transform: rotate(Xdeg) perspective(800px) rotateY(Ydeg)` applied. The Y-axis tilt (–2° to +2°) gives the 3D card feel. On scroll-into-view (Intersection Observer), cards animate from `rotateY(8deg) translateY(40px) opacity(0)` to their resting tilt. Use `cubic-bezier(0.34, 1.56, 0.64, 1)` — the spring curve — so cards "settle" with a slight overshoot. **The Apparatus bubble dissection:** In the Apparatus section, the bubbles are FIXED in place (not drifting). They are arranged in a force-directed cluster (pre-computed positions baked into HTML data attributes). Each bubble is a labeled technology orb — the label appears on hover as a tooltip rising from the bubble, in Nunito 13px, Tobacco Dark on Parchment. A faint connector line (0.5px, dashed, Warm Tan) links related bubbles, forming a loose knowledge graph. **Section transitions:** Between each section, there is a 120px zone of dark background with only drifting bubbles — no text, no cards. This pause between chapters enforces the rhythm of a book's blank verso page. **Color application rule:** The warm palette dominates (85% of visible pixels). The two cold accents (`#7ec8c8` aqua and `#a3c4a8` sage) appear ONLY on: bubble specular highlights, tech label hover states, and the progress ribbon on hover. Never in body text. **Fonts to load from Google Fonts:** ``` Abril Fatface:400 Fraunces:300,400,700&display=swap&ital@0;1 Nunito:400,700,800 JetBrains Mono:400,500 ``` **AVOID in implementation:** - No hero CTA buttons ("Get in touch", "View work", "Hire me") - No stat blocks ("5 years exp / 30 projects / 100% satisfaction") - No testimonial carousels - No sticky navigation - No logo grid of client brands - No pricing table - No progress bars for skill levels - No parallax on background images (only on bubble drift) ## Uniqueness Notes **Chosen seed:** aesthetic: dark-academia, layout: stacked-sections, typography: playful-rounded, palette: creamy-pastel, patterns: tilt-3d, imagery: water-bubbles, motifs: tech, tone: edgy-rebellious **Differentiators from every other design in the registry:** 1. **Dark-academia at 2% in the registry — combined with tech at 21% creates a genuinely unprecedented collision.** No other design in the registry pairs scholarly Victorian warmth with technology motifs. Most tech designs here use cold palettes (navy, slate, graphite) or neon. miris.studio is the only site where `tech` is expressed through *patent illustration aesthetics* rather than SaaS iconography or circuit-board patterns. 2. **The bubble system serves a semantic function, not just decoration.** The water-bubbles imagery motif (4% in registry) is deployed here as the primary data visualization layer: each bubble IS a technology, a thought fragment, or a code line. The bubbles are not decorative separators — they carry information and respond to interaction (cursor repulsion, hover labels). This dual role (aesthetic + semantic) is not seen in other bubble/bokeh treatments. 3. **Typography creates deliberate tension between categories.** The combination of `Abril Fatface` (heavy editorial display) + `Fraunces` (optical-variable warmth) + `Nunito` (playful-rounded) is a three-way collision: serious, strange, and friendly simultaneously. Most designs in the registry use two fonts with complementary contrast; this design uses three fonts with *contradictory* personalities that resolve into a coherent voice through careful hierarchy. 4. **The stacked-sections layout (3% in registry) is paced like a book, not a marketing page.** The deliberate blank-dark inter-section gaps with only floating bubbles enforce a reading cadence that resists rapid scanning. This is hostile to the typical scrolljack UX pattern and instead rewards slow, intentional reading — directly serving the edgy-rebellious tone. 5. **Avoided overused patterns:** `tech` motifs are treated archivally (patent illustration) rather than with the overused circuit/grid/neon treatments. The `warm` palette direction (91% of registry uses warm) is here but subverted by the dark-academia ground color `#1c1710` — the warmth exists *within* the cards, not as the overall page temperature.