# Design Language for karmabadge.com ## Aesthetics and Tone **karmabadge.com** is built on the friction between two ideas that should not belong together: the Buddhist concept of karma — invisible moral weight accumulating across lifetimes — and the contemporary street-culture badge, the iron-on patch stitched to a denim jacket at a skate park. The site lives in that seam. It is a **street altar**: hand-lettered zine energy pressing up against something genuinely sacred. The aesthetic is **raw street-style reverence** — think zine pages pasted with wheat paste on a concrete overpass, but the words painted on them are actual prayers. Think a skateboarder who pauses mid-trick because they noticed the cherry blossoms opening. Think a patch sewn into a Carhartt jacket that reads, in wobbly embroidery thread, *you are what you give*. Visually: cream paper backgrounds with the texture of newsprint. Ink that bleeds a little at the edges. Stars drawn by hand in a field notebook. No polish, no gloss — everything feels touched, handled, slightly worn in the best way. The palette is chalky, pale, honest. Nothing is trying to impress. Everything is trying to *mean*. The tone is **raw-authentic**: unguarded, direct, a little rough-edged. Not performing wisdom — living it. The page speaks the way a person speaks when they stop worrying about sounding smart. ## Layout Motifs and Structure The layout is **hero-dominant** — but this hero does not sell. It reveals. A single massive vertical column anchors the page, offset slightly left of center (not centered — the visual weight is asymmetric, like a zine stapled on the left edge). The hero occupies 85–90% of the initial viewport height, with the domain name and a hand-drawn star constellation visible immediately. No navigation bar. No hamburger menu. No sticky header. Below the hero, content arrives in **irregular staggered panels** — not a grid, not cards. Panels at slightly different widths (some 70% wide, some full-bleed to the right edge only, one narrow column 45% wide on the left). Gutters are generous and uneven. The rhythm is organic, like ripping paper at different widths. Key structural choices: - **No equal columns.** Every panel breaks the column expectation. - **Pinned SVG path animations** on the left gutter — a vertical line that draws itself as the user scrolls, with small star glyphs appearing at intervals. - **Ink-bleed headers** — display text has a slightly soft/bleed edge (CSS text-shadow in cream at 1px offset, giving an ink-absorbing-into-paper feel). - **Margin notes** — small rotated text in the right margin, like handwritten annotations on a printed page. These carry secondary content (short quotes, small teachings). - **No footer** — the page closes with a colophon-style text block, centered and small, in the style of a zine back page. The scroll is **vertical and unhurried**. No horizontal scroll. No infinite scroll. It ends. There are five major sections: the hero revelation, the origin myth (why karma + badges), the visual glossary of badge types, the making-of process, and the colophon. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Hero wordmark**: [`Bebas Neue`](https://fonts.google.com/specimen/Bebas+Neue) — all-caps, condensed, weight 400. Set at `clamp(5rem, 16vw, 13rem)`, tracked very loosely at `0.08em`. This is the street-style spine: bold, blunt, stencil-adjacent. The word KARMABADGE stacks vertically down the left edge of the hero in the mobile view, reads horizontally at desktop. - **Subheadings / Section labels**: [`Permanent Marker`](https://fonts.google.com/specimen/Permanent+Marker) — weight 400. Hand-lettered feel, carries the zine authenticity. Set at `clamp(1.4rem, 3vw, 2.2rem)`, never all-caps (the irregularity of mixed case is intentional — it reads like a label written by a person, not a machine). - **Body copy**: [`Karla`](https://fonts.google.com/specimen/Karla) — weight 300 and 400. Clean humanist sans with a slight irregularity in letterform that reads honest and undesigned. Set at `clamp(0.95rem, 1.5vw, 1.15rem)`, line-height 1.75. Generous leading keeps everything breathing. - **Margin notes / Annotations**: [`Caveat`](https://fonts.google.com/specimen/Caveat) — weight 400, genuinely handwritten. Rotated -90deg in right-margin blocks. Set at `0.85rem`. - **Variable typography moment**: The hero subhead uses [`Fraunces`](https://fonts.google.com/specimen/Fraunces) (a variable font with `WONK`, `SOFT`, and `opsz` axes) set to weight 100–900 via scroll-driven CSS custom property animation. As the user first loads, the subhead morphs from ultra-thin (100) to bold (700) over 2 seconds — a single, slow, gravitational settling, like weight being placed on a surface. This is the expressive-variable axis moment: used once, for maximum effect. **Palette:** - `#F5F0E8` — **Cream Paper** (primary background; warm off-white, not pure white, not yellow; the color of a zine page left in sunlight for one summer) - `#1C1712` — **Carbon Ink** (primary text; not black — has warmth, like india ink that dried slightly brown) - `#C8BFB0` — **Worn Cotton** (secondary backgrounds, panel dividers, the slight gray-beige of old denim lining) - `#D4A96A` — **Turmeric Gold** (accent; the color of a curry-stained blessing, or a marigold petal pressed in a notebook; used only for star glyphs and badge-type labels) - `#8B6F5E` — **Red Earth** (warm mid-tone; used for path-draw SVG lines, the spine line in the left gutter, section dividers; earthy and grounded) - `#3A3530` — **Charcoal Field** (second dark; for margin notes, secondary text, the annotation voice) No gradients. No glows. All color relationships are flat and matte, like pigment on paper. ## Imagery and Motifs **All imagery is inline SVG — no photography.** The frequency analysis shows photography at 89% use across the registry. This site abstains entirely, using only hand-drawn-style SVG paths. **Nature elements woven with star-celestial motifs:** - **Cherry blossom branch SVG** — sparse, three or four blooms, drawn with irregular `path` strokes in Carbon Ink, 1.2px stroke, no fills. The branch arcs from the lower-left of the hero upward across the background. It path-draws on load (stroke-dashoffset animation, 3.5s ease-in-out). A single turmeric-gold five-point star (hand-drawn, irregular vertices, not a CSS polygon — actual SVG `path` drawn by hand) appears at the tip of the topmost branch after the draw completes. - **Star field in hero** — 12–18 small stars scattered across the hero background, each a unique SVG path (no two identical — some are six-point, some five-point, some are just asterisk-like crosses). They appear in sequence with stagger: a 50ms delay between each star's path-draw animation. Stars are Turmeric Gold at 60% opacity. They feel like field notes, not decoration. - **Vertical gutter spine** — a single SVG line in Red Earth runs down the left gutter of every section, 2px stroke, drawing itself as you scroll (Intersection Observer triggers the stroke-dashoffset). Small leaf shapes (3–4px) branch off this spine at each section boundary — minimal, single-stroke, like pressed grass blades. - **Badge illustration system** — five badge shapes, each a unique SVG `path` (shield, circle, diamond, pennant, iron-on patch oval). Each badge is drawn in Carbon Ink outline only. Inside each badge, a different nature motif: a single moth, a sprig of lavender, a moon crescent with a star, a pine cone, a crow in profile. All are continuous-line single-stroke drawings (SVG path, no fills, no hatching). These are the visual glossary section — each badge has a `Permanent Marker` label above it and a `Karla` description below. - **Torn-edge dividers** — SVG `path` elements that simulate a hand-torn horizontal edge between sections. Irregular jagged path, Carbon Ink stroke, no fill, creating a visual page-tear sensation. - **Margin star** — in the right margin, a recurring motif: a single large six-point star outline in Worn Cotton, 120×120px, sitting behind the margin-note text. It is always the same star, always in the same relative position, always at 18% opacity — it is the site's ghost presence. ## Prompts for Implementation **The story to tell.** The visitor opens the page the way they might find a hand-stapled zine tucked under their windshield wiper or left on a bench. The cover is the hero: KARMABADGE in large Bebas Neue, a cherry blossom branch drawing itself slowly across the top, and scattered hand-drawn stars appearing one by one in the cream sky. The Fraunces subhead settles from thin to bold: *wear what you give*. No button. No CTA. Just: look. Scrolling reveals a zine with five pages: 1. **The hero page** — wordmark, animating branch, settling stars, the variable-weight subhead. 2. **The origin page** — two-column (65%/35% split, neither centered), left has body copy in Karla, right has a single badge illustration path-drawing as you scroll. The margin note rotates in Caveat on the right. 3. **The glossary page** — five badges in a horizontal stagger (not a grid — they sit at slightly different heights, 0–24px variation, like pinned to a corkboard). Each badge path-draws when it enters the viewport. 4. **The making-of page** — full-width text block, 70% max-width, centered but with a left-offset visual weight (the vertical gutter spine continues here). Permanent Marker subheads. Torn-edge dividers. 5. **The colophon** — small block at the bottom, centered, Caveat font, italic, the single recurring margin star behind it. Reads like the back of a zine: *handmade in good faith*. **Animation choreography:** - Hero load: cherry blossom branch draws (0–3.5s), then stars appear with stagger (3.5–5s), then Fraunces subhead weight morphs (5–7s). No other motion on load. - Scroll triggers: vertical gutter spine path-draw, badge illustrations path-draw as sections enter viewport (Intersection Observer, threshold 0.3). Stagger between star appearances: 50ms each. - No parallax (overused at 86%). No scroll-jacking. No lottie. Native SVG stroke-dashoffset animations only. - Hover on badges: a single Red Earth 1px ring expands outward from the badge outline (CSS animation, 300ms ease-out, then dissolves). No scale. No lift. Just a ring, like a stone dropped in water. - Variable font moment: the Fraunces subhead only. Font-variation-settings transitioning `wght` 100→700 over 2s, triggered once on load. This is the entire expressive-variable axis — one moment, clear and earned. **Implementation anti-patterns to avoid:** - No CTA buttons, pricing blocks, stat counters, testimonial carousels, logo bars, feature grids - No sticky navigation - No photography or raster images - No gradients or drop shadows on layout elements - No equal-column grids - No pure black (#000) or pure white (#fff) anywhere - Do not add more than one animation trigger per scroll section ## Uniqueness Notes **Differentiators from the registry:** 1. **street-style (1%) + creamy-pastel (6%) combination is unprecedented.** Street culture in web design almost universally pairs with dark palettes (black, charcoal, neon), grunge textures, or high-contrast type. Using a pale, chalky, paper-warm palette creates a productive contradiction: zine energy without aggression, street credibility without intimidation. No other design in the registry uses this pairing. 2. **Vertical Bebas Neue stacking as the primary structural device.** The registry uses condensed typography at 17%, but almost exclusively as horizontal banner text. Stacking KARMABADGE vertically down the left edge of the hero (mobile) and transitioning to horizontal (desktop) at a viewport breakpoint is an unusual compositional choice — it treats the domain name as a spine, the way a book's spine carries the title. Nothing else in the registry does this. 3. **Fraunces variable font morphing as the single expressive animation.** The registry's expressive-variable usage (5%) tends to apply variable axes reactively (on hover, on scroll, responsively). This design uses the variable axis once: a slow weight morph on first load only, isolated to a single subhead, functioning as the site's opening gesture — the moment before anything else moves. Using variable type as an opening ceremony rather than a continuous interaction is a distinct approach. 4. **No photography in a nature-elements imagery seed.** The imagery category shows photography at 89% — nature content in the registry almost universally means photographs of leaves, skies, or landscapes. This design uses exclusively single-stroke SVG illustration: a moth, a crow, lavender, a pine cone. Drawing nature by hand (as path-draw SVG) in a street-style context invokes the zine tradition of hand-cut linoprint, not the Instagram aesthetic of golden-hour photography. 5. **Asymmetric non-centered layout with zine-margin architecture.** The registry is 89% centered. This design's left-edge spine, irregular panel widths, rotated Caveat margin notes, and off-center visual weight create a page that reads like a physical printed object that has been laid flat — not a screen experience that has been centered and balanced. The asymmetry is structural, not decorative. **Chosen seed:** aesthetic: street-style, layout: hero-dominant, typography: expressive-variable, palette: creamy-pastel, patterns: path-draw-svg, imagery: nature-elements, motifs: star-celestial, tone: raw-authentic **Avoided patterns from frequency analysis:** - centered (89% — avoided entirely; using left-spine asymmetric layout) - photography (89% — avoided entirely; SVG illustration only) - parallax (86% — not used; Intersection Observer path-draw triggers instead) - warm gradient (79%/93% — avoided; flat matte palette only, no gradients) - mono typography (83% — avoided; humanist and display type system only) - vintage motifs (48% — avoided; street-style is contemporary, not nostalgic)