# Design Language for lungi.dev

## Aesthetics and Tone

lungi.dev is a tech-tutorial platform wrapped in Memphis-era maximalism — bold geometric shapes collide with organic bubbles in a composition that feels like a zine crossed with a programming manual. The vibe is warm, irreverent, and deeply tactile: jewel-toned shapes stack and rotate against near-black backgrounds, creating a depth that rewards scrolling. Every section feels hand-assembled from geometric cut-outs, yet the information hierarchy remains surgical and legible.

Tone: Tutorial-forward confidence. Not the sterile precision of docs sites, not the hype of marketing pages. Like a brilliant friend explaining how closures work on a whiteboard covered in colored markers. The geometric Memphis vocabulary (squiggles, dots, zigzags, checkerboards) functions as visual punctuation between code concepts, keeping the energy alive across long reading sessions.

The color mood sits in late-night studio light: deep amethyst and forest-shadow backgrounds with jewel-toned accents that pop like neon through glass — emerald, gold, ruby, sapphire. Shapes feel three-dimensional through shadow stacking and slight rotation, never flat or corporate.

## Layout Motifs and Structure

Diagonal sections are the structural spine. Every content block is separated not by horizontal rules but by angled cuts — 4-7 degree clip-paths that make the page feel like a stack of overlapping posters. Content areas alternate between deep jewel-tone backgrounds and near-black, with diagonal transitions carrying staggered entry animations.

**Stagger Pattern:** Tutorial steps, code examples, and concept cards enter the viewport in staggered diagonal waves — each element delayed 80ms from the previous, sliding in along the same diagonal axis as the section cut. No element enters straight; everything carries slight rotational momentum (1-3 degrees) that settles on arrival.

**Section Architecture:**
- Hero: Full-viewport diagonal split — left half has Memphis geometric shapes floating over deep amethyst (#2D1B69), right half shows a live code snippet on near-black (#0D0D14)
- Tutorial steps: Staggered card column, each card rotated ±1.5° alternating, with bubble motifs in corners
- Concept panels: Wide diagonal-cut blocks spanning full width, text left-aligned with geometric shape clusters right
- Code blocks: Offset from the grid by 8px diagonal, as if placed at a slight angle
- Footer: Memphis squiggle border top, compact dark with jewel-tone link accents

**Grid:** 12-column with 24px gutters on desktop, collapsing to 4-column mobile. Content lives in the center 8 columns with decorative shapes bleeding into the outer 2 on each side.

No hero CTAs, no pricing grids, no stat counters. The page builds knowledge through progressive disclosure — each diagonal cut reveals the next layer of understanding.

## Typography and Palette

**Display / Headings:** Poiret One — art-deco geometric display, ultra-thin strokes with perfect geometry. Used at 72-96px for H1, 48-64px for H2, letter-spacing at +0.05em. Gives technical content a gallery-announcement gravitas.

**Subheadings / UI Labels:** Josefin Sans — complementary geometric sans with strong art-deco DNA. Uppercase at 14-18px with 0.15em letter-spacing for labels, mixed-case at 24-32px for section subheads.

**Body / Tutorial Content:** IBM Plex Sans — technical lineage, humanist warmth, excellent monospace companion. 16-18px, 1.7 line-height, comfortable for long-form reading.

**Code:** IBM Plex Mono — pairs perfectly with IBM Plex Sans, consistent design DNA. 14-15px in code blocks with syntax highlighting using jewel-tone palette.

**Palette:**
- `#0D0D14` — Midnight Void (primary background, deepest sections)
- `#1A0F3D` — Deep Amethyst (hero background, alternate sections)
- `#0F2A1A` — Forest Shadow (tertiary dark section)
- `#7B2FBE` — Electric Violet (primary accent, interactive elements)
- `#00C896` — Jewel Emerald (code highlights, success states, key concepts)
- `#E8A020` — Amber Gold (secondary accent, step numbers, callouts)
- `#C8345A` — Ruby Crimson (warnings, emphasis, decorative shapes)
- `#1A6EBE` — Sapphire Blue (links, info states, secondary shapes)
- `#F0ECE8` — Warm Parchment (body text on dark backgrounds)
- `#2A2A3A` — Graphite Slate (card backgrounds, elevated surfaces)

## Imagery and Motifs

**Organic Blobs:** SVG blobs appear throughout as background texture and shape-carriers — not generic gradient blobs but jewel-toned amoebic forms with slight stroke outlines (1px, same color at 40% opacity). They float behind content at 15-25% opacity, occasionally overlapping section boundaries. Blob library: 6 distinct shapes cycling through sections, each in a different jewel tone.

**Memphis Geometric Vocabulary:**
- Squiggles: Wavy lines in amber gold and sapphire blue, 3-4px stroke, appearing as section dividers and margin decorations
- Polka dots: Grid-arranged circles in ruby and emerald, 8px diameter, at 20% opacity as section backgrounds
- Zigzags: Crisp chevron patterns in electric violet, used as horizontal rules and card borders
- Checkerboard patches: 12×12px tiles in alternating jewel tones appearing as decorative corner accents
- Outlined triangles and diamonds: Geometric shapes in jewel tones with 2px stroke, floating at various scales (16px to 80px)

**Bubble Motifs:** Playful speech-bubble shapes appear as callout containers for tips, warnings, and "try this" prompts. They're not flat — they use multiple box-shadows to appear slightly inflated, and their tail rotates toward the relevant content. Color-coded by type: emerald for tips, amber for warnings, violet for examples.

**Code Block Styling:** Terminals styled as Memphis posters — thick jewel-tone left border (4px), slight drop shadow in the border's color, background at #1A1A2A, with a small geometric "stamp" shape in the top-right corner.

**Icon System:** Outlined geometric icons with a slight art-deco structural quality — no rounded corners, beveled ends on strokes, 2px weight. The few icons used are custom SVG, not icon fonts.

## Prompts for Implementation

**Overall Architecture:**
Build as a single long-scrolling HTML page with CSS custom properties governing all jewel tones and Memphis geometry. Use CSS clip-path for all diagonal section transitions — no images for dividers. Animate entrance of elements using Intersection Observer with staggered delays.

**Diagonal Section Transitions:**
```
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%)
```
Alternate direction every section. Stack sections with negative margin-top to overlap the diagonal edge. Each section's background is a jewel tone from the palette cycling: amethyst → forest → midnight → amethyst.

**Stagger Animation Implementation:**
Each tutorial card, concept block, or list item gets `data-stagger-index` attribute. On intersection:
```css
.stagger-item {
  opacity: 0;
  transform: translateY(24px) rotate(-1.5deg);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.stagger-item.visible {
  opacity: 1;
  transform: translateY(0) rotate(0deg);
}
```
Delay: `transition-delay: calc(var(--stagger-index) * 80ms)`

**Memphis Shape Layer:**
Create a CSS-only Memphis background layer for each section using radial-gradient (dots), repeating-linear-gradient (zigzags), and SVG background-image (squiggles). Layer these at low opacity (8-15%) so they texture without overwhelming. Example polka dot layer:
```css
background-image: radial-gradient(circle, #E8A020 1px, transparent 1px);
background-size: 24px 24px;
```

**Blob Animations:**
SVG blobs use CSS keyframe animations with `border-radius` morphing to simulate organic movement:
```css
@keyframes blob-drift {
  0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; transform: translate(0, 0) rotate(0deg); }
  33% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translate(8px, -12px) rotate(2deg); }
  66% { border-radius: 50% 60% 30% 40% / 70% 30% 50% 60%; transform: translate(-6px, 6px) rotate(-1deg); }
}
```

**Bubble Callouts:**
Tip/warning bubbles use CSS shapes with the `::after` pseudo-element for the tail:
```css
.bubble-callout {
  border-radius: 20px 20px 20px 4px;
  padding: 16px 24px;
  box-shadow: 4px 4px 0 currentColor, 6px 6px 0 currentColor, 8px 8px 0 transparent;
  position: relative;
}
.bubble-callout::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 24px;
  border: 8px solid transparent;
  border-top-color: currentColor;
  border-bottom: none;
}
```

**Typography Rendering:**
Load Poiret One and Josefin Sans from Google Fonts. IBM Plex Sans and IBM Plex Mono from Google Fonts as well. Use `font-display: swap`. Set `text-rendering: optimizeLegibility` on all heading elements. Poiret One at large sizes needs `letter-spacing: 0.08em` minimum.

**Narrative Flow:**
The page tells a story of progressive skill-building. Opening diagonal cut reveals the hero concept. Each section's diagonal "pushes" the previous one down like turning a page. Tutorial steps stagger in as if being written in real-time. Final section folds back up with a reverse diagonal, creating a sense of completion and closure.

Do NOT add: newsletter forms, pricing tables, testimonial carousels, social proof counters, or any conversion-optimized patterns. This is a place for learning, not selling.

## Uniqueness Notes

**3+ Differentiators:**
1. **Memphis + Art-Deco collision**: Most Memphis sites lean cartoonish; here art-deco typography (Poiret One) creates a sophisticated tension — geometric maximalism that reads as gallery-quality rather than juvenile. This combination is unused in the analyzed corpus.
2. **Diagonal stagger as tutorial UX**: The diagonal clip-path section structure is repurposed as pedagogical pacing — the visual "cut" signals a new concept is about to arrive, conditioning readers to anticipate learning moments. Stagger animations follow the diagonal axis, creating directional coherence.
3. **Jewel-toned Memphis on deep-dark backgrounds**: Nearly all Memphis-aesthetic sites use light/white backgrounds. This inverts the tradition — placing jewel tones and geometric shapes against near-black creates a richness more akin to Fortuny fabric or stained glass than 1980s kitchenware. Organic-blob imagery (3% usage — very underused) further distinguishes from photography-heavy (90%) and minimal (39%) corpus patterns.
4. **Bubble callouts as first-class UI element**: Tutorial tips and warnings live in inflated bubble shapes that carry the motif through to functional UI — decoration and information architecture unified rather than decorative elements bolted on top.
5. **IBM Plex family coherence**: Using IBM Plex Sans + IBM Plex Mono as a single-family pairing with art-deco display contrasts creates a technical-meets-decorative hierarchy that reads immediately as "serious tutorial with personality" rather than docs or marketing.

**Chosen Seed:** aesthetic: memphis, layout: diagonal-sections, typography: art-deco-display, palette: jewel-tones, patterns: stagger, imagery: organic-blobs, motifs: bubble-playful, tone: tech-tutorial

**Avoided Patterns (from frequency analysis):**
- hand-drawn (60% — vastly overused): Zero hand-drawn elements; all geometry is crisp and precise
- photography (90% — dominant): No photographs; all visual content is geometric/SVG
- editorial (51% — overused): Not editorial in layout; content-forward tutorial structure instead
- single-column (20% — overused): Diagonal sections create multi-plane spatial depth, not single-column flow
- glassmorphism (21% — overused): No frosted-glass effects; jewel tones are fully opaque and saturated
<!-- DESIGN STAMP
  timestamp: 2026-05-08T22:49:58
  domain: lungi.dev
  seed: seed:
  aesthetic: lungi.dev is a tech-tutorial platform wrapped in Memphis-era maximalism — bold g...
  content_hash: 9c37c038ec69
-->