# Design Language for bada.moe ## Aesthetics and Tone bada.moe is a skeuomorphic parchment study -- a site that feels like opening a handmade folio bound in linen, its pages soft with age, its margins annotated in fading sepia ink. The skeuomorphic treatment here is not the glossy Apple-circa-2010 leather-and-stitching pastiche; it is the quiet materiality of old paper, the tactile heft of a well-thumbed notebook, the way light pools differently on coated versus uncoated stock. Every surface on the site carries the faint grain of laid paper. Shadows are not the crisp drop-shadows of UI convention but the diffuse, warm penumbra of a page curling slightly upward at its corner. Buttons do not glow; they depress like rubber stamps leaving an impression in soft pulp. Borders are not clean 1px lines but the feathered edges of torn deckle, the ragged margin where handmade paper meets the mold. The tone is minimal in the Japanese sense -- not empty, but considered. Every element earns its place the way a calligrapher considers the weight of each stroke before the brush touches paper. There is no surplus. Content breathes in generous margins that recall the "ma" of a woodblock print, but the negative space is not blank white; it is the warm, speckled ivory of aged washi paper, alive with microscopic fiber texture. The mood sits at the intersection of a letterpress studio on a rainy afternoon and a rare-book room in a university library where the radiator ticks quietly and the light comes through translucent shades. The site does not try to feel modern. It does not apologize for its materiality. It presents itself as an artifact -- something discovered rather than deployed, leafed through rather than scrolled. ## Layout Motifs and Structure The layout is organized around a persistent sidebar that functions as a table of contents carved into the left margin of the page. This sidebar occupies 240px on desktop, rendered as a vertical strip of slightly darker, more weathered parchment -- as if the margin of the folio has been handled more than the interior pages, its fibers compressed and darkened by repeated thumbing. Within this sidebar, navigation items are set in small-caps serif type, each one separated not by lines but by tiny printer's ornaments (fleurons: Unicode characters like ❧ or ❦) rendered in a muted rose (#c9a8a0). The active section is indicated not by a background highlight but by a subtle embossed effect: the text appears pressed into the paper surface using a combination of text-shadow with a 1px light offset above and a 1px dark offset below, simulating debossed letterpress type. The main content area to the right of the sidebar is organized as a vertical stack of "pages" -- discrete sections that each occupy roughly 85-100vh and are separated by decorative horizontal rules fashioned as torn paper edges. These torn edges are achieved using an inline SVG mask with an irregular, organic path that simulates the ragged tear of handmade paper, revealing a slightly darker parchment tone (#e2d5c3) beneath the lighter content surface (#f0e8dc). **Layered Depth System:** The site is constructed in three visual depth planes: 1. **Background plane (z-0):** A full-viewport parchment texture created entirely in CSS. The base is a warm ivory (#f5efe4) overlaid with an SVG feTurbulence noise filter (baseFrequency: 0.9, numOctaves: 5, type: fractalNoise) at 6% opacity to simulate paper grain. On top of this, faint horizontal lines appear at intervals (using a repeating-linear-gradient with 1px strokes of rgba(139, 119, 101, 0.08) every 28px) to evoke ruled notebook paper, visible only on close inspection. 2. **Content plane (z-1):** The main text and imagery layer. Content blocks sit on slightly elevated "cards" that are not the sharp-cornered flat rectangles of modern UI but softly rounded parchment panels with box-shadow: 2px 3px 12px rgba(101, 78, 55, 0.12), 0 1px 3px rgba(101, 78, 55, 0.06) -- a shadow that suggests the gentle lift of a sheet of paper resting on a desk. These panels have a background of #f0e8dc (warm cream) and their corners are rounded at 3px -- barely perceptible, the way the corners of old paper soften with handling. 3. **Overlay plane (z-2):** Decorative elements that float above content -- the torn-edge dividers, the faint watermark glyphs (described below in Imagery), and the skeleton-loading placeholder rectangles that appear as ghostly pencil sketches before content resolves. The sidebar is fixed on desktop and collapses into a top-mounted drawer on viewports below 768px. On mobile, the drawer handle is a small fleuron ornament that, when tapped, slides the table of contents down from the top edge like a scroll unfurling. ## Typography and Palette **Typography:** - **Display / Headlines:** "Cormorant Garamond" (Google Fonts) -- weight 600 (SemiBold) at 2.8rem-4.2rem. Cormorant Garamond is a serif-revival typeface that channels the elegance of Claude Garamont's 16th-century originals while carrying enough optical weight for screen display. Its high stroke contrast and fine hairlines evoke the sharp impression of metal type pressed into dampened paper. Letter-spacing: -0.01em (slightly tightened for display sizes, mimicking the natural compression of hand-set type where the compositor nudges letters together for visual density). Line-height: 1.15. Color: #3b3228 (warm charcoal, like dried walnut ink). - **Body / Prose:** "Lora" (Google Fonts) -- weight 400 (Regular) and 400 Italic for emphasis. Lora is a contemporary serif with roots in calligraphy, designed specifically for screen readability while retaining the organic warmth that purely geometric serifs lack. Its moderate contrast and brushed curves sit perfectly in the paper-aged environment without feeling anachronistic. Size: 1.05rem (17px base). Line-height: 1.72. Letter-spacing: 0.005em. Color: #4a3f35 (dark umber). - **Sidebar / Navigation / Captions:** "Alegreya SC" (Google Fonts) -- the small-caps companion to the Alegreya superfamily. Weight 400. Size: 0.85rem for sidebar navigation, 0.75rem for captions and marginalia. Letter-spacing: 0.08em. Text-transform: none (Alegreya SC is natively small-caps). Color: #7a6b5d (faded sepia). This typeface provides the scholarly, old-world annotation quality that makes the sidebar feel like hand-written marginal notes formalized into type. **Palette:** The palette is pastel in the true sense -- colors achieved not by adding white to saturated hues but by imagining pigments that have faded over decades of exposure to indirect light. | Role | Name | Hex | Description | |------|------|-----|-------------| | Background (deep) | Aged Vellum | #f5efe4 | Warm yellowish ivory, the color of 19th-century book pages | | Background (content) | Cream Stock | #f0e8dc | Slightly cooler cream, like unbleached cotton paper | | Sidebar background | Thumbed Margin | #e6dace | Darker parchment, as if handled and slightly soiled | | Primary text | Walnut Ink | #3b3228 | Deep warm brown-black, never pure black | | Body text | Dark Umber | #4a3f35 | Softer than primary, for sustained reading | | Accent (primary) | Faded Rose | #c9a8a0 | The pink of old rose petals pressed between pages | | Accent (secondary) | Dusty Sage | #a3b5a0 | Muted green, like dried herb leaves used as bookmarks | | Accent (tertiary) | Washed Indigo | #8e9ab8 | Pale blue-violet, reminiscent of faded fountain pen ink | | Highlight | Gilt Edge | #c9b88c | Tarnished gold, like the gilded page edges of an old bible | | Border / Rule | Paper Fold | #c4b8a8 | The crease-shadow where a page has been folded | No pure black (#000000) or pure white (#ffffff) appears anywhere in the design. The darkest value is Walnut Ink (#3b3228); the lightest is Aged Vellum (#f5efe4). This compressed tonal range creates the gentle, low-contrast atmosphere of viewing a physical artifact under warm incandescent light. ## Imagery and Motifs **Paper-Aged Texture as Environment:** The dominant imagery strategy is the simulation of aged paper as a living surface. This is not a flat photograph of old paper tiled as a background; it is a generative CSS texture built from layered filters and gradients. The base parchment grain uses an SVG feTurbulence filter with fractalNoise type (baseFrequency: 0.85, numOctaves: 5) composited via feColorMatrix to tint the noise into warm sepia tones. Over this, irregular darkened patches appear at the edges and corners of each "page" section -- radial gradients of rgba(101, 78, 55, 0.08) positioned at the four corners, simulating the foxing and age-discoloration of old paper. These foxing patches are positioned differently on each page section using nth-child selectors so that no two sections have identical aging patterns. **Watermark Glyphs:** Each page section carries a faint watermark -- a single decorative glyph rendered at 20-30% opacity in Gilt Edge (#c9b88c) at enormous scale (15rem-25rem). These glyphs are pulled from Unicode decorative sets: a floral heart (❧), a leaf ornament (☙), a sun symbol (☼), a star (✦). They are positioned off-center within each section using absolute positioning, rotated 10-20 degrees, and blurred slightly (filter: blur(1px)). They should feel like the watermarks visible when you hold a fine sheet of paper up to light -- barely there, a ghost of the paper mill's identity embedded in the material itself. **Layered Depth Motifs:** Depth is communicated through three techniques: 1. **Page-curl corners:** The bottom-right corner of each content panel carries a tiny CSS-generated page curl: a 40px triangle created with a rotated pseudo-element, colored #e6dace (the thumbed-margin shade) with a slight shadow, suggesting the paper is lifting off the surface and could be peeled back. On hover, this curl extends to 60px with a gentle 400ms ease-out transition. 2. **Stamped seals:** Key content sections feature a circular CSS "wax seal" element -- a 64px circle with a radial-gradient from Faded Rose (#c9a8a0) at center to a darker shade (#a8857c) at edges, with an inset box-shadow that creates a raised, convex appearance. Inside the seal, a single initial letter is set in Cormorant Garamond at 1.5rem, weight 700. These seals sit at the top-left of their section, half-overlapping the torn-edge divider above, anchoring the section like a notary's mark. 3. **Shadow layering:** Elements at different depth planes cast distinct shadows. Background-plane elements have no shadow. Content-plane panels have the soft 12px shadow described above. Overlay elements (seals, watermarks, interactive popups) have a tighter 4px shadow with slightly more opacity, creating the spatial hierarchy of objects at different heights above the desk surface. **Skeleton Loading as Pencil Sketches:** The skeleton-loading pattern is reimagined as pencil sketches. Before content loads, placeholder rectangles and text-line shapes appear as thin, hand-drawn-looking outlines rendered in #c4b8a8 (Paper Fold) with a 1px border styled as dashed (border-style: dashed; border-width: 1px). The animation is not the typical left-to-right shimmer of modern skeleton screens but a slow pulse of opacity from 0.3 to 0.7 and back, cycling over 2.5 seconds with an ease-in-out timing function -- the gentle breathing of a sketch waiting to be filled in. Text skeleton lines are not uniform rectangles but slightly varied in width (70%, 85%, 60%, 90% of container width, set per line via nth-child) to suggest the natural ragging of handwritten notes. When actual content loads, the skeleton fades out over 600ms while the real content fades in with a 200ms delay, creating a brief overlap where the sketch and the finished content coexist -- the palimpsest moment where the draft shows through beneath the final text. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site must be experienced as leafing through a folio. The hero section is 100vh of Aged Vellum parchment with nothing but the site title "bada.moe" set in Cormorant Garamond at 5rem (desktop) / 3.2rem (mobile), weight 300 (Light), centered on the page in Walnut Ink (#3b3228). Below the title, a single line in Lora italic at 1rem: a quiet epigraph -- not a tagline, not a call to action, but a found phrase that establishes the contemplative register. Below the epigraph, a small downward-pointing fleuron ornament (↓ styled as ❧ rotated 180 degrees) pulses gently at opacity 0.4-0.7, inviting the scroll. The hero has no navigation, no buttons, no images. It is a title page. As the user scrolls past the hero, the sidebar fades in from the left with a 500ms ease-out transition (translateX: -40px to 0, opacity: 0 to 1), and remains fixed for the duration of the visit. The sidebar's appearance should feel like a marginalia column emerging from the edge of the page as you turn past the frontispiece. **Section Transitions:** Each section transition uses the torn-paper-edge SVG mask as a divider. As a section scrolls into view, its content does not fly in from the sides or scale up from zero. Instead, it simply appears -- a fade from opacity 0 to 1 over 800ms, triggered when the section's top edge crosses 75% of the viewport height. This restraint is deliberate: in a paper-aged, minimal-tone design, theatrical entrance animations would break the illusion of a static artifact. The only motion is the fade, the sidebar highlight shift, and the page-curl hover states. **Interactive Touches (Restrained):** - Hovering over a content panel increases its box-shadow depth from 12px to 18px over 300ms, as if pressing down on the page and watching it lift slightly at the edges. - Hovering over sidebar navigation items triggers the debossed-to-embossed shift: the text-shadow reverses direction, so the letterpress impression appears to pop outward momentarily. - Clicking a wax seal element triggers a 200ms scale(1.05) pulse followed by a return to scale(1), as if the seal was pressed and released. - The page-curl corner responds to hover as described above. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, parallax scroll-jacking, staggered entrance cascades, neon accents, gradient backgrounds, monospace typography, asymmetric broken-grid layouts. This design is about stillness, materiality, and the slow reveal of content through the metaphor of physical paper. **Responsive Behavior:** Below 768px, the sidebar collapses and the content expands to full width with 24px horizontal padding. The torn-edge dividers remain but are simplified to a single-path SVG. Page-curl corners are hidden on touch devices. The wax seals shrink to 48px and move to the right margin. Typography scales: headlines drop to 2.2rem, body remains at 1.05rem. The skeleton-loading pencil-sketch treatment is preserved on mobile. ## Uniqueness Notes **Differentiators from other designs in this collection:** 1. **Skeuomorphic aesthetic at 0% frequency:** No other design in the collection uses a skeuomorphic approach. While other sites reach for glassmorphism, terminal aesthetics, or editorial flatness, bada.moe commits fully to the simulation of physical materials -- paper grain, wax seals, debossed type, page curls, torn edges. This is not retro nostalgia but a deliberate argument that digital surfaces can carry the warmth and imperfection of handmade objects. 2. **Sidebar layout at 4% frequency:** Only two other designs use a sidebar navigation structure. The persistent sidebar-as-marginalia concept transforms a functional UI pattern into a thematic element -- the margin annotations of a scholarly folio, complete with fleuron separators and small-caps notation type. 3. **Skeleton-loading reimagined as pencil sketches:** The skeleton-loading pattern appears at 2% frequency, and no other design reinterprets the skeleton state as a creative element. Here, loading placeholders are styled as hand-drawn outlines with dashed borders and breathing-pulse animation, turning a utilitarian UX pattern into a thematic extension of the paper-craft metaphor. 4. **Pastel palette at 2% frequency with zero pure black or white:** The compressed tonal range (#3b3228 to #f5efe4) eliminates the harsh contrast of most web designs. Every color is described in terms of its physical analogue (walnut ink, faded rose petals, dried sage) because the entire palette emerges from the logic of aged paper and natural pigments rather than arbitrary color theory. 5. **Paper-aged imagery as generative CSS, not photographic:** At 2% frequency, paper-aged imagery is nearly absent from the collection. The approach here builds all paper texture procedurally from SVG filters, gradients, and pseudo-elements rather than relying on tiled photograph backgrounds. This means the texture can vary per section (via nth-child-driven foxing patterns) and scale cleanly across viewports. **Seed/Style:** aesthetic: skeuomorphic, layout: sidebar, typography: serif-revival, palette: pastel, patterns: skeleton-loading, imagery: paper-aged, motifs: layered-depth, tone: minimal **Avoided overused patterns:** parallax (97%), stagger (95%), mono typography (97%), warm palette as dominant (100%), gradient palette (95%), tech motifs (97%), asymmetric layout (93%), centered layout (86%), photography imagery (54%), friendly tone (61%), corporate aesthetic (54%).