# Design Language for sarampass.com

## Aesthetics and Tone

**sarampass.com** is a password manager built on the premise that security does not have to be cold, clinical, or corporate. The aesthetic is **warm-earthy watercolor confidence** — the visual language of a leather-bound field journal belonging to a cartographer who maps the invisible: routes through city walls, codes embedded in ancient paper, the geography of trust. The tone is bold and certain, the way a master craftsperson speaks, not the nervous pitch of a startup trying to look safe.

The primary mood is **rich territorial warmth**: saffron-stained parchment, deep terracotta, the amber glow of a lantern in a stone alcove, ink-dark shadows that feel deliberate rather than ominous. Watercolor bleeds and paper grain give every surface a lived-in, handmade quality that contrasts deliberately with what most password managers do (blue glass, sterile whites, lock icons on gradients). sarampass.com does the same job — keeping digital lives secure — but it looks like a letter of passage sealed with wax, not a SaaS dashboard.

The **bold-confident** tone manifests as large declarative statements with no hedging: "Your keys. Your cartography." Typography sets the pace — display glyphs are massive, assured, slightly imperfect like hand-pressed type. Nothing whispers. The brand is the strongroom itself, not the lock on its door.

Inspiration: Tolkien's mapmakers, vintage pharmacopoeia labels, Edo-period washi paper, pressed-earth architecture in southern Morocco, early USGS survey watercolors, and the amber tactility of beeswax seals on official correspondence.

## Layout Motifs and Structure

The layout is built entirely on **diagonal sections** — the entire page is a system of rhomboid zones cut at 7–9 degrees from horizontal, with each section's background bleeding edge-to-edge without rectangular gutters. This creates a sense of forward motion and layered terrain, like the paper layers of a geological cross-section map.

**Macro structure (single vertical scroll, no navbar):**

1. **Hero Zone (diagonal-entry):** Full viewport. A large watercolor wash diagonal cuts from lower-left to upper-right, splitting the field: above is deep tannin-brown (`#2C1810`), below is warm parchment (`#F2E8D9`). The domain wordmark `sarampass` sits dead center, enormous, in retro display type. A hand-drawn compass rose fades into the upper-right quadrant. No CTA in the immediate viewport — only the mark.

2. **The Field (diagonal-entry, opposite direction):** A second full-width section cut 8° in the opposite diagonal. Parchment ground. Three hand-drawn "key cards" (illustrated with ink and watercolor wash) arranged in a broken, non-aligned horizontal rhythm — not a grid, but as though someone set them down on a table. Each card illustrates a concept: Vault, Passage, Seal.

3. **The Cartography Panel:** A full-bleed watercolor map illustration (painted-style, SVG or canvas) of an abstract geography that doubles as a visual metaphor for organizing credentials. Regions are labeled with whimsical cartographic script. This section has no diagonal cut — it bleeds as a full rectangle, providing structural punctuation between diagonal zones.

4. **The Craft Statement:** Deep terracotta background (`#8B3A2A`), diagonal-cut top edge only. White retro-display headline in four words max. A hand-drawn key icon in warm gold. One paragraph of body copy, left-aligned.

5. **The Wax-Seal Footer:** Dark ink background (`#1A0F0A`). A large wax-seal SVG motif centered, styled in the brand's warm amber. The domain name beneath, small-caps letterpress style.

**Spatial language:**
- No horizontal centering for body text — all body copy is offset to reading columns, starting from a 12–18% left margin
- Diagonal section dividers use CSS `clip-path: polygon()` — no background images for dividers
- Sections do NOT stack flush; they overlap by 8–12vh using negative `margin-top` to create genuine depth layering
- The entire composition reads as parchment sheets stacked at slight angles

## Typography and Palette

**Typography (all verified on Google Fonts):**

- **Wordmark / Hero Display / Section Headlines:** [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display), weight 900, italic variant for emphasis. Playfair's strong serifs and high stroke contrast give it the gravitas of a 19th-century cartographic legend. Set at `clamp(4rem, 14vw, 11rem)` for hero; `clamp(2.5rem, 6vw, 5rem)` for section headlines.

- **Sub-headlines / Card Titles:** [`Zilla Slab`](https://fonts.google.com/specimen/Zilla+Slab), weight 700. A sturdy slab-serif that reads as a stamp or a wax impression — authoritative without being delicate. Set at `clamp(1.2rem, 2.8vw, 2.2rem)`.

- **Body / Prose:** [`Lora`](https://fonts.google.com/specimen/Lora), weight 400, with italic for quotes. Lora's calligraphic origins make it feel like a considered handwritten communication typed by someone who values the pen. Set at `1.1rem / 1.8` line-height.

- **Labels / Captions / Small UI:** [`DM Mono`](https://fonts.google.com/specimen/DM+Mono), weight 400. Used only for metadata, coordinates-style labels, and the "cartographic legend" small text. Provides a deliberate anachronistic contrast — the survey technician's precision against the cartographer's expression.

**Color Palette:**

| Name | Hex | Role |
|------|-----|------|
| Tannin | `#2C1810` | Primary dark, hero background |
| Terracotta Ember | `#8B3A2A` | Section accent, CTA backgrounds |
| Parchment | `#F2E8D9` | Primary light background |
| Saffron Wax | `#C8893A` | Gold accents, wax-seal motif, key illustrations |
| Umber Ink | `#4A2C1E` | Body text on light backgrounds |
| Chalk | `#FAF5EE` | Off-white for text on dark backgrounds |
| Sienna Wash | `#D4845A` | Watercolor mid-tone, used in painted transitions |
| Smoke Veil | `#8C7464` | Muted mid-tone for captions and borders |

**Watercolor System:** The transitions between sections use a subtle `background-blend-mode: multiply` watercolor texture layer (a base64-encoded paper grain PNG, ~4KB) combined with CSS radial-gradient bleeds in Sienna Wash and Saffron Wax at 20–40% opacity. This creates the illusion of color pooling at section edges without requiring large images.

## Imagery and Motifs

**Hand-drawn is the primary visual language** — but hand-drawn here means the practiced line of a professional illustrator, not rough sketches. Every illustration is in the style of 19th-century cartographic vignettes: confident ink lines, flat watercolor washes within, occasional cross-hatching for shadow.

**Illustration corpus:**

1. **The Compass Rose** — appears faded into the hero section background at 15% opacity, massive (40vw), drawn with 16 points in cartographic tradition. In Saffron Wax lines.

2. **Three Key Cards (Illustrated):** Each is an antique-styled card (like a library card from 1910 or a hotel room key fob) drawn with ink lines. Watercolor wash fills in Sienna Wash, Terracotta Ember, and Saffron Wax respectively. The cards have "titles" (Vault / Passage / Seal) set in Zilla Slab and a short illustration detail (a door, a gate arch, a wax circle). These are SVG illustrations.

3. **The Abstract Territory Map:** A full-width watercolor map with regions, paths, and labels in the style of a fictional country's administrative map. The "countries" are labeled with words from the brand vocabulary (The Vault Lowlands, Passage Ridge, The Sealed Coast). Drawn in DM Mono for labels, Lora italic for region names. This is either a large SVG or a CSS canvas that animates subtly — region borders slowly shifting in opacity as though the map is drying.

4. **Wax-Seal SVG:** A circular seal design, diameter 180px at full size. The seal face has a stylized key in the center surrounded by the text "SARAMPASS · EST. MMXXIII ·" in small-caps. Rendered in Saffron Wax against dark backgrounds. Used only in the footer — not repeated.

5. **Particle-Effect Layer:** A canvas overlay that renders 30–45 small ink-blot particles (2–6px radius, near-circular with slight irregularity) that drift extremely slowly (0.1–0.3px per frame) across the parchment sections. Color: Umber Ink at 6–12% opacity. These are NOT floating emojis or geometric shapes — they are meant to read as dust motes or dried ink flecks on old paper. The canvas is pointer-event-none, z-index below text.

6. **Morph Transitions:** Section dividers (the diagonal clip-path edges) have a slow, nearly imperceptible morph animation — the exact angle of each diagonal shifts ±1.5° over 12 seconds on an eased sine curve. This gives the whole page a breathing quality, as though the parchment is settling.

## Prompts for Implementation

**The story the page tells:** A traveler has been given a letter of passage by a guild they trust completely. The letter is sealed with wax. The name on the seal is sarampass.com. The traveler does not worry about credentials, routes, or ciphers — the guild handles all of that, and has for generations. The visitor to the site is learning about the guild for the first time and must feel, before they read a single word, that this is an organization of absolute craft and absolute confidence.

**Opening animation sequence (on load, no JS framework required):**
- Background: Tannin (`#2C1810`) fills the viewport instantly
- Over 1.2 seconds, a watercolor wash (CSS animation using `background-size` expansion from 0% to 100% on a radial gradient in Sienna Wash) bleeds diagonally from upper-left, as if ink spreading on wet paper
- The wordmark `sarampass` fades in letter-by-letter using a staggered `opacity` + `translateY(12px→0)` animation, each letter 80ms offset
- The compass rose behind the text fades in last, at 15% opacity, over 0.8s
- Total load-to-settled: 2.2 seconds

**Diagonal sections — implementation:**
```css
.section-hero {
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
  margin-bottom: -8vh;
  position: relative;
  z-index: 3;
}
.section-field {
  clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%);
  margin-top: -8vh;
  margin-bottom: -8vh;
  position: relative;
  z-index: 2;
}
.section-craft {
  clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 100%);
  position: relative;
  z-index: 1;
}
```
Each section uses `z-index` stacking to create the paper-overlap depth effect. The stacking order creates a natural layered-pages aesthetic.

**Morph animation on diagonal dividers:**
```css
@keyframes diagonal-breathe {
  0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
  50% { clip-path: polygon(0 0, 100% 0, 100% 86.5%, 0 98.5%); }
}
.section-hero {
  animation: diagonal-breathe 12s ease-in-out infinite;
}
```

**Particle-effect canvas (vanilla JS):**
```javascript
const canvas = document.getElementById('ink-particles');
const ctx = canvas.getContext('2d');
const particles = Array.from({length: 40}, () => ({
  x: Math.random() * canvas.width,
  y: Math.random() * canvas.height,
  r: 2 + Math.random() * 4,
  dx: (Math.random() - 0.5) * 0.25,
  dy: (Math.random() - 0.5) * 0.15,
  opacity: 0.06 + Math.random() * 0.06
}));
function drawParticles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach(p => {
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(74, 44, 30, ${p.opacity})`;
    ctx.fill();
    p.x += p.dx; p.y += p.dy;
    if (p.x < 0) p.x = canvas.width;
    if (p.x > canvas.width) p.x = 0;
    if (p.y < 0) p.y = canvas.height;
    if (p.y > canvas.height) p.y = 0;
  });
  requestAnimationFrame(drawParticles);
}
drawParticles();
```

**Key card hover interaction:**
Each of the three illustrated key cards has a hover state: `transform: rotate(2deg) translateY(-8px)` with `transition: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)`. The card shadow deepens: `box-shadow: 8px 16px 40px rgba(44, 24, 16, 0.35)`. This mimics picking a card up from a table.

**Scroll-triggered section reveals:**
Use `IntersectionObserver` to apply class `revealed` to each section when 20% in viewport. Sections start at `opacity: 0; transform: translateY(30px) rotate(-0.5deg)`. The `-0.5deg` initial rotation contributes to the "paper being laid down" feel on reveal.

**AVOID in this implementation:**
- Any pricing blocks or comparison tables
- Lock/shield/checkmark iconography — these are password manager clichés
- Blue or teal color palette
- Clean sans-serif minimalism
- Any grid layout with equal-width columns
- Testimonial carousels
- Stat-grids ("10M users · 99.9% uptime · 256-bit")

## Uniqueness Notes

1. **Diagonal-sections at only 3% frequency, paired with warm-earthy palette (also only 3%).** No other design in the registry combines these two underused seeds. Most diagonal-section designs lean toward tech/sharp aesthetics; pairing with warm-earthy watercolor creates a genuinely novel quadrant: confident old-world cartography aesthetic in a modern password manager context.

2. **Morph animation used as geological breathing, not shape-shifting UI.** The registry shows `morph` at 8% but it is typically used for blob-shape transitions or button hover states. Here, morph is applied to the `clip-path` diagonal angles themselves — the page sections slowly "settle" like drying parchment. This is a first-of-kind usage in the corpus.

3. **Particle-effects at 3%, used as ink-fleck physics rather than star fields or floating elements.** Every particle-effect design in the corpus appears to use the pattern for celestial/tech themes (see `star-celestial` at 5%, `aurora-lights` at 4%). sarampass.com uses tiny ink-blot particles at near-zero opacity on parchment — the aesthetic is the inverse of the genre default.

4. **Retro-display typography (3%) applied through Playfair Display + Zilla Slab combination rather than the typical Bebas Neue or Righteous path.** Playfair Display brings Old-Style serif gravitas; Zilla Slab brings stamp/press authority. Together they create a retro-display feel that reads as craft guild rather than vintage poster.

5. **Hand-drawn imagery (57% in corpus) used at cartographic guild register rather than the dominant botanical/organic idiom.** The frequency report shows hand-drawn is massively popular, but examination of the corpus reveals near-universal use in botanical, nature, or pastoral contexts. sarampass.com deploys hand-drawn in the vocabulary of 19th-century official cartography and guild documentation — compass roses, key-card vignettes, wax seals — making it thematically distinct from every other hand-drawn design in the registry.

**Chosen seed:** aesthetic: watercolor, layout: diagonal-sections, typography: retro-display, palette: warm-earthy, patterns: morph, imagery: hand-drawn, motifs: particle-effects, tone: bold-confident

**Avoided patterns from frequency analysis:**
- `centered` (84%) — avoided by using offset left-margin body text and diagonal asymmetry
- `parallax` (75%) — avoided in favor of morph/diagonal-breathe
- `vintage` motifs (35%) — redirected to cartographic-guild register, not generic vintage
- `hand-drawn` in pastoral/botanical idiom (57%) — recontextualized to cartographic
<!-- DESIGN STAMP
  timestamp: 2026-05-11T00:57:45
  domain: sarampass.com
  seed: serif gravitas
  aesthetic: sarampass.com** is a password manager built on the premise that security does no...
  content_hash: 1d07a1805fb5
-->