# hen-ry.com — Design System

## 1. Visual Theme & Atmosphere

Hen-ry.com is a creative portfolio that wraps its work in deep, almost nocturnal darkness. The base canvas is a near-black deep purple (`rgb(11, 1, 29)`) — not neutral black, but something warmer and more saturated, like the bottom of a wine glass. This single choice sets the entire emotional register: intimate, crafted, and slightly mysterious.

Against that dark foundation, the site uses lavender-tinged whites and soft purples as accent and interactive colours, creating a sense of soft luminescence rather than harsh contrast. The result feels more like a gallery at night than a portfolio on a screen. GSAP-powered animations and a custom cursor (`div.cursor` in `rgb(181, 171, 203)`) reinforce the sense of a space that breathes and responds.

Whitespace is used generously — sections have significant bottom margins (`69px`) without rigid padding, letting content float. The overall effect is curated quietness.

## 2. Color Palette & Roles

**Background / Canvas**
- `rgb(11, 1, 29)` — Primary canvas, deep purple-black; used on `body` and `div.hero-overlay`

**Surfaces**
- `rgba(255, 255, 255, 0.03)` — Nav background; barely-there frosted layer
- `rgba(255, 255, 255, 0.04–0.05)` — Card and pill surfaces; ghostly, barely visible
- `rgb(235, 227, 255)` — Success state surface; soft lavender
- `rgb(181, 171, 203)` — Custom cursor and textarea background; muted mauve

**Text**
- `rgb(210, 218, 228)` — H2 headings; cool blue-white for secondary hierarchy
- `rgb(51, 51, 51)` — Used across body/labels — notably dark, rendering nearly invisible against the dark background (intentional CSS override likely at component level)

**Accent / Feedback**
- `rgb(208, 156, 252)` — Error message background; soft purple
- `rgb(45, 38, 65)` — Nav border; a slightly lighter purple-grey separator

**Absent:** No green CTAs, no brand-primary red or blue. The palette deliberately avoids conventional accent colours.

## 3. Typography Rules

The entire site runs on **Inter V** — a variable-font version of Inter. This choice signals precision: variable axes allow per-element optical tuning without loading multiple weight files.

**Scale**
- H1: 88px / 500 weight / −1.76px tracking — bold, tightly tracked hero type
- H2: 36px / 400 weight / −0.36px tracking — relaxed but controlled
- H3: 48px / 500 weight / −0.48px tracking
- H5: 32px / 500 weight / −0.32px tracking
- Body: 16px / 400 / 1.6 line-height
- Paragraphs: 14px / 300 weight / 32px line-height — deliberately light and airy

**Feature settings:** H2 and paragraphs explicitly disable contextual alternates (`calt 0`) and ligatures (`liga 0`), preferring `cv06` — a deliberate OpenType choice for character legibility at small sizes.

**Notable absence:** No serif, no monospace, no display typeface. Pure typographic restraint.

## 4. Component Stylings

**Navigation:** Near-invisible background (`rgba(255,255,255,0.03)`), bordered in muted purple (`rgb(45, 38, 65)`). Low-profile by design — doesn't compete with content.

**Custom Cursor:** A `div.cursor` element in muted mauve (`rgb(181, 171, 203)`). A signature touch marking this as a crafted experience.

**Pills / Badges:** `div.hero-pill` at `rgba(255,255,255,0.05)` — ghost chips that whisper rather than shout. Rounded to `999px`.

**Popups:** Light surface (`rgb(245, 245, 247)`) against the dark background — strong enough contrast to feel modal.

**Forms:** Textarea in muted lavender (`rgb(181, 171, 203)`) with semi-transparent border. Inputs are bold-weighted (`700`), labels also bold — form fields feel intentional.

**Shadows:** Inset purple glow (`rgba(168, 128, 255, 0.1) 0px 0px 4px 2px inset`) on key elements — the signature depth effect.

**Border radii:** Generous variety — 8px, 10px, 14px, 24px, 32px up to full `999px` pills. Cards use 20–32px; small elements use 8–12px.

## 5. Layout Principles

Built in **Webflow**, the layout relies on section-level spacing with horizontal margins (`0px 10px 69px` on sections). The grid is single-column-dominant at the section level, with horizontal wrapping inside.

Content blocks float with generous vertical rhythm. The lack of a rigid column grid is intentional — this is a portfolio, not a SaaS dashboard. Each section is treated as a composed piece.

**Breakpoints:** 479/480px (mobile), 600px (mid), 767/768px (tablet), 991/992px (desktop).

## 6. Depth & Elevation

Depth is handled through three techniques:

1. **Alpha-based layering:** Surfaces use `rgba(255,255,255,0.03–0.05)` — nearly invisible but distinct from the base black.
2. **Inset purple glow:** `rgba(168, 128, 255, 0.1) 0px 0px 4px 2px inset` — soft ambient light from within.
3. **Drop shadows:** `rgba(20, 20, 43, 0.06–0.08) 0px 2px 12px 0px` — subtle dark-tinted drop shadows that suggest physical lift.
4. **Hero overlay:** `rgba(11, 1, 29, 0.8)` — darkens hero background media to unify contrast.

There is no hard border-based elevation. Depth is felt, not drawn.

## 7. Do's and Don'ts

**Do:**
- Use deep purple-black as the base. Never substitute with neutral black or dark grey.
- Apply Inter V with negative letter-spacing on headings.
- Use translucent white surfaces (`rgba(255,255,255,0.03–0.05)`) for card backgrounds.
- Add the inset purple glow for interactive or highlighted components.
- Use full-pill `999px` radius for badges and tags.
- Honour generous vertical spacing — don't compress sections.

**Don't:**
- Use browser-default link blue (`rgb(0,0,238)`) — it's detected but is a default fallback, not intentional.
- Add bright primary colours (red, green, yellow). The palette is intentionally muted.
- Use system-ui or any typeface other than Inter V.
- Add hard box borders in white or light grey — use alpha-blended edges instead.
- Skip the cursor customisation — it's part of the experience.

## 8. Responsive Behavior

The site uses a Webflow-style breakpoint model with 6 stages: 479px, 600px, 768px, 992px. At mobile widths, the 10px horizontal section margin keeps content breathing. No evidence of drastic layout restructuring — the design is primarily vertical-flow and degrades gracefully.

Typography likely scales down at mobile but the variable font nature of Inter V means optical weight stays controlled. The popup and form components are designed to be full-width at narrow viewports.

## 9. Agent Prompt Guide

> Recreate the aesthetic of hen-ry.com: a dark-mode portfolio built on a near-black deep purple canvas (`#0B011D`). Use Inter V (variable font) throughout — 88px/500 for hero headings with −1.76px tracking, 36px/400 for secondary headings. Surfaces should be barely-there translucent white overlays (`rgba(255,255,255,0.03)`), not solid cards. Signature depth: inset purple glow (`rgba(168,128,255,0.1) 0 0 4px 2px inset`). Use muted lavender (`#B5ABCB`) for the custom cursor and interactive form elements. Border radii: 8–14px for small elements, 24–32px for cards, 999px for pills. No bright accent colours — keep the palette within the deep purple and cold white range. Generous vertical spacing; sections breathe.

---

*Generated by Sparkbites — extracted from live CSS analysis*