# Design Language for penclos.com

## Aesthetics and Tone

penclos.com is a celestial instrument shop that exists somewhere between a 1970s French aerospace manual and the handwritten star charts of Tycho Brahe — brutalist in structure, but suffused with the cold luminosity of deep space. The governing metaphor is a **navigation terminal on a decommissioned research vessel**: brushed steel panels riveted together, porthole windows looking out at star fields, heavy stencil lettering for system labels, but underneath the industrial skin, an almost tender reverence for the cosmos.

The tone is **elegant-sophisticated without warmth** — no friendly gradients, no soft landing pages. Brutalism here means honest material expression: raw metal, thick ink, the weight of instruments designed to last a century. Every typographic decision reads like it was set on a Varityper in a naval drafting room, then proofread by someone who has memorized every named star in the Bayer catalog.

The aesthetic lineage: Alvar Aalto's stainless steel detailing + the Swiss Federal Railways clock face + Voyager probe instrument panels + Frutiger's original signage work for the Charles de Gaulle airport. Cold, authoritative, precisely beautiful.

Mood words: **monumental, astronomical, calibrated, austere, luminous in the dark**.

## Layout Motifs and Structure

The layout is a **single uninterrupted vertical column** — no grid complexity, no multi-column splits, no sidebars. The page reads like the face of a precision instrument: every element aligned to a single central spine, with generous negative space acting not as emptiness but as the void of space itself.

**Structural logic:**

- A full-viewport opening panel: the penclos.com wordmark as stencil type, enormous, set against a deep navy field with a single star-field pattern (SVG noise, not photography). The wordmark is cut into the panel like a factory stamp — thick strokes, tight tracking, no serifs, no warmth.
- Below the hero, content blocks arrive in a strict **rhythm of alternating weights**: a heavy-ruled section divider (4px solid metallic line), followed by a body text block, followed by a full-width illustration panel, followed by another ruled divider. This grid-of-one repeats like a metered pulse.
- Section transitions use **bounce-enter animations**: each block descends from 40px above its final position with a cubic-bezier(0.34, 1.56, 0.64, 1) spring — overshoot by 8px, settle at rest. Not playful. Heavy. Like a gauge needle snapping to its reading.
- No horizontal navigation bar. A single fixed vertical tick-mark on the left edge of the viewport acts as a progress indicator — a thin metallic line that fills as the user scrolls, styled as a graduated instrument scale.
- Maximum content width: 720px, centered. Side margins are raw color — no texture fill, just the `--void` color of deep space.

## Typography and Palette

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

- **Primary / Wordmark / Section Labels**: [`Barlow Condensed`](https://fonts.google.com/specimen/Barlow+Condensed), weight 700, all-caps, tracking 0.12em. Barlow Condensed is the closest available Google Fonts match to Adrian Frutiger's airport signage style — compressed, legible at distance, technically authoritative. The wordmark `PENCLOS` is set at clamp(5rem, 16vw, 13rem), uppercase, weight 900.
- **Body / Instrument Captions**: [`Barlow`](https://fonts.google.com/specimen/Barlow), weight 400, 1.7 line-height. Same family for body text, creating a strict family unity — a single typographic voice at different registers, like a briefing document.
- **Annotation / Coordinates / Fine Print**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400, size 0.75rem, used exclusively for numerical data, star coordinates, and technical footnotes. Monospaced telemetry type against the metallic panels.

**Palette (hex values):**

```
--void:         #0a0d1a   /* deep space navy, the base ground */
--hull:         #111827   /* slightly lighter — structural panels */
--steel:        #2a3550   /* mid-navy, raised surface texture */
--silver-hot:   #c8d4e8   /* cold blue-silver, primary text on dark */
--chrome:       #e2eaf5   /* near-white with blue cast, high-contrast labels */
--rivet:        #7a8fad   /* muted steel-blue, secondary text */
--arc:          #4a90d9   /* Frutiger-era instrument blue, accent only */
--gold-dim:     #b8963a   /* aged instrument gold, used sparingly for star motifs */
--ruled:        #2f4060   /* thick rule lines, section dividers */
```

No gradients on primary surfaces. Gradients appear only in the star-field SVG background (radial, navy to deep void). All text is `--chrome` or `--silver-hot` — never pure white.

## Imagery and Motifs

**All imagery is custom SVG illustration — no photography, no stock.**

**The visual vocabulary:**

1. **The star-field panel** — the hero background is a single large SVG: 200–300 circles at varying radii (0.5px to 2px) distributed via a seeded pseudo-random algorithm, colored in three tiers (`--chrome` at 100% opacity for the 5 "named stars", `--silver-hot` at 60% for common stars, `--rivet` at 30% for background scatter). Eight of the largest stars carry a four-pointed star-burst overlay (cross-shaped flares, 1px stroke, length 8px) — the Celestial motif, rendered as instrument annotation rather than decoration.

2. **Constellation line drawings** — thin `--arc` colored SVG paths connecting star-groups into abstract forms. Not classical constellations: these are invented instrument-diagrams, the kind that would appear on the face of a sextant or an astrolabe. Each line terminates at a small filled circle (3px radius, `--arc` color), suggesting a calibration point.

3. **The penclos glyph** — a custom SVG logomark: a stylized pen nib overlaid with a circular star-chart reticle. The nib forms the vertical axis; the reticle is a circle with four tick marks at 12/3/6/9 o'clock positions and degree gradations between 0 and 90 around the arc. Color: `--gold-dim` on the nib body, `--arc` on the reticle. Used as section separators at 48px width.

4. **Instrument panels** — decorative full-width SVG bands at three points down the page, each rendered as a schematic cross-section: rectangular panels with etched labels, bolt circles, hatched fill zones, and linear measurement scales. These are purely decorative but designed to look like they belong in a technical manual.

5. **The bounce-enter entrance glyph** — a small animated SVG star (the four-pointed variety) at the top of each arriving section block. On scroll-trigger, this star descends into position using the same bounce spring as the text block, arriving 80ms before the copy so the eye tracks the landing point first.

## Prompts for Implementation

**The story to tell.** A visitor opens the instrument bay door of a research vessel that has been drifting between star systems. Inside: every flat surface is a panel of brushed steel and dark navy anodized aluminum, stencil-labeled in compressed type. The instruments are immaculate. The stars outside are named on the star-chart mounted above the primary console. penclos.com is that console. The visitor does not browse a website — they read a set of instrument briefings, each delivered with the precision of a pre-launch checklist.

**Animation — bounce-enter as weight, not joy.** All section blocks begin `transform: translateY(-40px); opacity: 0` and enter with `animation: bounceEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards`. The overshoot is 8px (not more — heavy objects overshoot a little, toys overshoot a lot). Trigger on `IntersectionObserver` threshold 0.15. Star entrance glyph animates 80ms ahead of its block.

**Section rhythm (top to bottom):**
1. Full-viewport hero: star-field SVG background, `PENCLOS` wordmark stenciled enormous in Barlow Condensed 900, a single subtitle line in Space Mono ("NAVIGATIONAL INSTRUMENTS / EST."), the penclos glyph centered below. No scroll arrow — the constellation lines drift imperceptibly (0.02deg/frame rotation on the whole star field, CSS transform, no JS).
2. First ruled divider + bounce-enter — a three-line description block in Barlow 400 at 1.2rem: what penclos is, in plain cold sentences.
3. Instrument panel SVG band (full width, decorative, `--hull` background).
4. Second bounce-enter block: a feature or discipline area, set as a heavy label + one paragraph.
5. Another instrument panel band.
6. Third bounce-enter block: a second area of content.
7. Full-width star-chart illustration (the constellation line drawing at its largest expression — 100vw, max 900px tall, SVG, `--void` background).
8. Fourth bounce-enter block: a final statement — one sentence, enormous type, Barlow Condensed 900, the full 720px measure.
9. Colophon footer: Space Mono, three lines of coordinates and a final penclos glyph at 24px. No links, no social icons, no CTA.

**AVOID:**
- Call-to-action buttons with rounded corners — if interaction is needed, use rectangular stencil-style buttons with 1px solid `--arc` border, no fill, Barlow Condensed uppercase label.
- Pricing blocks, stat-grids, testimonial carousels, feature comparison tables — none of these.
- Hover states with color fills — hover is a `--arc` underline only, 1px, offset 3px.
- Any warm color on primary surfaces — no amber, no cream, no soft tones. Reserve `--gold-dim` strictly for the glyph nib and named-star highlights.
- Parallax on text — parallax only on the star-field layer (transform: translateY at 0.3x scroll speed), never on readable copy.

**CSS architecture:**
```css
:root {
  --void:       #0a0d1a;
  --hull:       #111827;
  --steel:      #2a3550;
  --silver-hot: #c8d4e8;
  --chrome:     #e2eaf5;
  --rivet:      #7a8fad;
  --arc:        #4a90d9;
  --gold-dim:   #b8963a;
  --ruled:      #2f4060;
  --measure:    720px;
}

body {
  background: var(--void);
  color: var(--silver-hot);
  font-family: 'Barlow', sans-serif;
}

.wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: clamp(4rem, 14vw, 11rem);
  color: var(--chrome);
}

.section-label {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
  color: var(--arc);
}

.telemetry {
  font-family: 'Space Mono', monospace;
  font-size: 0.7rem;
  color: var(--rivet);
}

.ruled-divider {
  border: none;
  border-top: 4px solid var(--ruled);
  margin: 4rem auto;
  width: var(--measure);
}

@keyframes bounceEnter {
  from { transform: translateY(-40px); opacity: 0; }
  60%  { transform: translateY(8px); opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}

.bounce-block {
  animation: bounceEnter 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  opacity: 0;
}
```

## Uniqueness Notes

1. **Brutalism as aerospace discipline, not punk provocation.** The corpus uses brutalism (where it appears) as a gesture toward raw honesty or anti-design — black borders, raw HTML, intentional ugliness. penclos.com recasts brutalism as *military-industrial precision*: the brutalism of a decommissioned research instrument, where every exposed material choice is the result of engineering requirements, not aesthetic rebellion. No other design in the registry uses this reading.

2. **Navy-metallic palette with zero warm tones as a hard constraint.** The frequency analysis shows the corpus is dominated by warm (97%) and gradient (91%) palettes. penclos.com refuses both: the entire palette is cold blue-navy with a single aged-gold accent used only as a material reference (gold instrument bezels), never as a warmth cue. The chromatic discipline is closer to a transit map than a brand identity.

3. **Bounce-enter as gravity, not delight.** The bounce-enter pattern (underused at low frequency in the corpus) is typically implemented as a playful "pop" micro-interaction. This design uses it as a simulation of physical mass landing: slow approach, minimal overshoot (8px vs. the 20–30px typical in playful contexts), short duration (0.6s). The animation reads as a heavy instrument settling onto a calibrated surface, not a balloon arriving at a party.

4. **Star-celestial motifs as technical annotation, not decoration.** Where celestial imagery appears in other designs it is typically romantic (star-gazing, dreamy), mystical (astrology glyphs), or purely illustrative. penclos.com treats stars as *navigation instruments* — the four-pointed star-burst is a standard cartographic symbol for named stars, the constellation lines are calibration diagrams, the reticle overlay on the glyph is a sextant reference circle. The celestial vocabulary is entirely technical.

5. **Frutiger-clean typography as heritage reference, not trend.** The frequency analysis shows `frutiger-clean` at only 4% across the corpus. This design grounds the typographic choice in historical specificity: Barlow Condensed is used because it most closely approximates the letterforms Adrian Frutiger designed for Orly and CDG airport wayfinding systems — signage that had to be read from 30 meters at a sprint. That wayfinding DNA is the reason the type works for penclos: it communicates the authority of infrastructure.

**Chosen seed:** aesthetic: brutalist, layout: single-column, typography: frutiger-clean, palette: navy-metallic, patterns: bounce-enter, imagery: custom-illustration, motifs: star-celestial, tone: elegant-sophisticated

**Avoided patterns from frequency analysis:**
- warm palette (97% corpus frequency) — actively refused; palette is cold-blue only
- gradient fills (91%) — no gradients on any structural surface
- centered hero with CTA (85%) — hero has no CTA, no button, no conversion element
- photography (85%) — all imagery is custom SVG illustration
- parallax on text (common) — parallax only on star-field layer, never on readable copy
<!-- DESIGN STAMP
  timestamp: 2026-05-09T19:56:44
  domain: penclos.com
  seed: seed:
  aesthetic: penclos.com is a celestial instrument shop that exists somewhere between a 1970s...
  content_hash: 63e3b28dcbf6
-->