# Design Language for ethica.dev ## Aesthetics and Tone ethica.dev is an ethical theme game portal -- imagine a pastoral English countryside crossed with a philosopher's study, where moral dilemmas grow like wildflowers in hedgerows. The **cottagecore** aesthetic wraps complex ethical quandaries in warm, inviting visuals: hand-stitched textures, dried-flower borders, and sun-dappled parchment backgrounds. But beneath the pastoral charm, a quiet intellectual tension simmers -- choices presented as forking garden paths, consequences blooming or wilting in response. The tone is **whimsical-creative**, treating heavy ethical topics with lightness and wonder rather than academic severity. Think of it as a Beatrix Potter illustration hiding a trolley problem. ## Layout Motifs and Structure The layout follows a **minimal-navigation** philosophy -- the interface fades away so the ethical narrative can breathe. No persistent nav bar; instead, a small embroidered-style compass rose in the top-left corner expands on hover to reveal navigation options. **Primary structure:** - **Opening viewport (100vh):** A full-bleed pastoral landscape illustration (CSS gradient layers simulating rolling green hills with a warm sky) houses a single large typographic question -- an ethical dilemma rendered in Bebas Neue bold caps. Below, two diverging garden paths (SVG) invite the user to scroll. - **Branching narrative sections:** Each section presents a moral scenario in a split layout -- left side shows the dilemma text on aged parchment background, right side shows an illustrated consequence garden (SVG botanical elements that animate based on scroll position). - **Choice nodes:** At transition points, circular medallion elements (120px, border: 2px dashed) offer binary moral choices, styled as wax-seal stamps. - **Reflection garden (final section):** A full-width botanical panorama where all previous choices are represented as different flowers, creating a unique moral garden for each visitor. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Bebas Neue" (Google Fonts) -- tall, condensed, bold uppercase sans-serif that gives ethical questions the weight of proclamations nailed to a village door. Weight 400 (single weight). Size: clamp(32px, 6vw, 72px). Letter-spacing: 0.04em for breathing room. - **Body text:** "Lora" (Google Fonts) -- a contemporary serif with calligraphic roots that feels like reading from a leather-bound ethics textbook. Weight 400 for body, 700 for emphasis. Size: clamp(16px, 1.8vw, 20px). Line-height: 1.7. - **Accent/UI:** "Caveat" (Google Fonts) -- a handwritten script for annotations, margin notes, and choice labels, as if someone scribbled moral observations in the margins. **Palette:** - **Meadow Green:** #5B8C5A -- primary, the color of ethical growth and natural consequence - **Parchment Cream:** #F5ECD7 -- backgrounds, aged paper warmth - **Hedgerow Brown:** #6B4423 -- text, earth-grounded readability - **Wildflower Lavender:** #9B7CB8 -- accent for choice nodes and highlights - **Sunset Coral:** #D4836B -- warning/consequence indicator - **Morning Sky:** #A8C4D4 -- secondary accent for neutral outcomes - **Ink Black:** #2A2118 -- deep text for maximum contrast on parchment ## Imagery and Motifs **Core visual motifs:** - **Forking garden paths:** The primary navigation metaphor. SVG paths that literally fork at decision points, drawn with organic bezier curves (stroke: #5B8C5A, stroke-width: 2px, fill: none). Paths animate with stroke-dashoffset on scroll, growing like vines. - **Botanical consequence flowers:** Each ethical outcome is represented by a specific flower type -- roses for compassion, thistles for self-interest, daisies for neutrality. These are rendered as simplified SVG botanical illustrations with 3-4 colors each. - **Wax seal choice stamps:** Circular elements (border-radius: 50%, background: #D4836B with radial-gradient for wax texture) that contain moral choice icons. On hover, the wax "melts" slightly (border-radius shifts to organic blob shape via CSS transition). - **Embroidered borders:** Section dividers use a cross-stitch pattern (repeating SVG pattern of small X shapes, stroke: #9B7CB8, spaced 8px apart) that evokes handcraft and patience. - **Cursor-follow fireflies:** Small glowing dots (#F5ECD7 with box-shadow glow) that drift toward the cursor position with spring easing (delay: 200ms), creating a sense of wandering through an evening garden. ## Prompts for Implementation **Full-screen narrative experience:** The entire site is a single scrolling ethical journey. No traditional page sections -- instead, the scroll acts as a path through a moral landscape. **Opening sequence animation:** - Frame 0-600ms: Parchment Cream (#F5ECD7) background fades in. CSS gradient hills emerge from bottom (translateY 100% to 0%, easing: cubic-bezier(0.4, 0, 0.2, 1)). - Frame 600-1400ms: The ethical question types itself letter by letter (Bebas Neue, #2A2118, typewriter effect with 40ms per character). A blinking cursor (border-right: 2px solid #6B4423) accompanies each letter. - Frame 1400-2000ms: Two garden paths draw themselves downward from below the question (SVG stroke-dashoffset animation, duration 800ms each, staggered by 150ms). Firefly particles begin drifting. **Scroll-driven interactions:** - Garden paths extend and fork as user scrolls (stroke-dashoffset tied to scroll position via Intersection Observer). - Flowers bloom at decision points (scale 0 to 1, with spring easing, triggered at 60% viewport intersection). - Embroidered borders stitch themselves across the screen (dash animation synchronized with scroll). **Cursor-follow implementation:** Track cursor position, animate 5-8 firefly dots toward cursor with staggered spring physics (each dot has different mass/stiffness). Use requestAnimationFrame for smooth 60fps movement. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. No "Sign Up" buttons or feature comparison tables. This is a contemplative garden, not a SaaS landing page. ## Uniqueness Notes **Differentiators from other designs:** 1. **Ethical dilemmas as botanical garden metaphor:** No other design maps moral philosophy to garden cultivation. Each choice literally grows a different plant, creating a living visual record of ethical decisions. 2. **Cottagecore aesthetic applied to game/philosophy content:** The juxtaposition of cozy pastoral visuals with weighty ethical questions creates cognitive dissonance that keeps users engaged -- moral philosophy has never looked this inviting. 3. **Wax-seal interaction stamps for binary choices:** The melting wax hover effect on choice nodes is a tactile, skeuomorphic interaction that no other design employs. 4. **Firefly cursor-follow particles:** While cursor-follow is used elsewhere, the specific firefly implementation (warm glow on parchment, spring physics, evening garden context) creates a unique atmospheric effect. **Chosen seed/style:** cottagecore pastoral blog -- adapted from pastoral blog to ethical game portal, retaining the botanical warmth while adding interactive moral branching. **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow reframed as fireflies instead of generic tracking. Avoided editorial (27% aesthetic) and photography (82% imagery) in favor of cottagecore + hand-drawn SVG. Used minimal-navigation layout (5%) and bounce-enter patterns (10%) which are underused.