# Eden Labs Design System

## Overview

Eden Labs is an atmospheric artist portfolio and viewing-room site. The interface should feel like entering a quiet gallery at night: immediate, visual, intimate, and restrained. The design name is **Eden Labs**.

The system exists to let artwork create the first emotional impression, then support selected work, artist context, exhibitions, and contact without becoming louder than the work. Navigation, labels, and actions are present but quiet. Copy stays precise and spare. Mystery is preserved.

Physical scene: a first-time viewer opens the site in a dim room, pauses on a large abstract work, then moves slowly through details, a short statement, exhibition notes, and a discreet inquiry path.

**Key characteristics:**
- Nocturnal canvas as the primary mode, with a warmer dusk mode for archive and print-like previews.
- Artwork-first layouts with generous scale, low interface density, and quiet metadata.
- Warm ivory text on deep mineral surfaces, plus tinted paper surfaces for the light preview.
- Muted mineral, umber, violet, smoke, and rose accents used as atmosphere only.
- Marcellus for display, Alegreya Sans for body, navigation, labels, and forms.
- Panels, rows, and captions replace commercial grids. Contact is discoverable but never dominant.
- WCAG 2.2 AA contrast, visible focus states, semantic structure, and reduced-motion support.

## Design Principles

1. Let the artwork speak first. The opening surface should be visual, immersive, and emotionally immediate.
2. Make the interface recede. Navigation, metadata, and actions should support the work without competing.
3. Preserve mystery. Copy should guide the viewer without explaining the work too early.
4. Guide without selling. Contact and inquiry paths should be simple, but secondary to looking.
5. Treat the site like a viewing room. Every surface should support attention, atmosphere, and respect.

## Colors

Use OKLCH tokens in implementation. Avoid pure black and pure white. All neutrals are slightly tinted toward warm mineral or blue-black hues.

### Primary nocturnal mode

| Token | OKLCH | Use |
|---|---:|---|
| `{colors.canvas-night}` | `oklch(15% 0.018 252)` | Primary page canvas |
| `{colors.surface-night}` | `oklch(19% 0.016 248)` | Elevated dark panels |
| `{colors.surface-night-soft}` | `oklch(23% 0.014 248)` | Input fields, quiet bands |
| `{colors.ink-night}` | `oklch(93% 0.018 76)` | Primary text on dark surfaces |
| `{colors.body-night}` | `oklch(81% 0.018 76)` | Running text on dark surfaces |
| `{colors.muted-night}` | `oklch(66% 0.016 76)` | Captions and secondary labels |
| `{colors.hairline-night}` | `oklch(93% 0.018 76 / 0.15)` | Dark-mode dividers |

### Dusk and archive mode

| Token | OKLCH | Use |
|---|---:|---|
| `{colors.canvas-dusk}` | `oklch(92% 0.022 74)` | Warm paper page floor |
| `{colors.canvas-dusk-deep}` | `oklch(86% 0.03 70)` | Section bands and image-backed moments |
| `{colors.surface-dusk}` | `oklch(96% 0.014 78)` | Panels and forms |
| `{colors.ink-dusk}` | `oklch(22% 0.022 62)` | Primary text on light surfaces |
| `{colors.body-dusk}` | `oklch(36% 0.018 64)` | Running text on light surfaces |
| `{colors.muted-dusk}` | `oklch(50% 0.016 64)` | Captions and secondary labels |
| `{colors.hairline-dusk}` | `oklch(72% 0.018 72 / 0.45)` | Light-mode dividers |

### Atmospheric accents

| Token | OKLCH | Use |
|---|---:|---|
| `{colors.mineral-blue}` | `oklch(54% 0.055 248)` | Ambient wash, link focus support |
| `{colors.bruised-violet}` | `oklch(48% 0.065 302)` | Artwork atmosphere |
| `{colors.smoke-rose}` | `oklch(63% 0.055 22)` | Warm image glow |
| `{colors.low-umber}` | `oklch(47% 0.055 58)` | Shadowed warmth |
| `{colors.lichen}` | `oklch(61% 0.045 142)` | Small quiet status accents |

Accents are never button fills by default. They appear as ambient washes, image-matched light, focus outlines, or tiny metadata marks. Keep accent coverage below 10 percent on utility surfaces. The artwork may carry more color than the interface.

## Typography

### Font family

- **Display:** Marcellus, with Georgia and serif fallbacks.
- **Body:** Alegreya Sans, with system sans fallbacks.

Marcellus gives the site a carved, inscription-like presence without becoming a magazine template. Alegreya Sans keeps captions and statements warm, readable, and slightly literary.

### Hierarchy

| Token | Size | Weight | Line height | Letter spacing | Use |
|---|---:|---:|---:|---:|---|
| `{typography.display-immersive}` | `clamp(56px, 11vw, 148px)` | 400 | 0.9 | `-0.055em` | Hero wordmark and immersive openings |
| `{typography.display-xl}` | `clamp(42px, 7vw, 88px)` | 400 | 0.96 | `-0.04em` | Major section statements |
| `{typography.display-lg}` | `clamp(32px, 4vw, 56px)` | 400 | 1.02 | `-0.025em` | Section headings |
| `{typography.title-md}` | 22px | 500 | 1.25 | `0` | Work titles and panel headings |
| `{typography.body-lg}` | 20px | 400 | 1.65 | `0.005em` | Artist statement lead text |
| `{typography.body-md}` | 17px | 400 | 1.65 | `0.006em` | Running text |
| `{typography.body-sm}` | 15px | 400 | 1.55 | `0.012em` | Captions and supporting text |
| `{typography.label}` | 12px | 700 | 1.3 | `0.14em` | Section labels and metadata keys |
| `{typography.nav}` | 15px | 500 | 1.4 | `0.04em` | Navigation links |

### Principles

- Keep body copy between 65 and 75ch per line.
- Use size, spacing, and placement for hierarchy before using weight.
- Use uppercase only for short labels and metadata keys.
- Captions identify composition, medium, date, and mood without over-interpreting the work.
- Prefer “tone” over broad brand-language labels.

## Layout

### Spacing system

- Base unit: 4px.
- Tokens: `{spacing.2}` 8px, `{spacing.3}` 12px, `{spacing.4}` 16px, `{spacing.6}` 24px, `{spacing.8}` 32px, `{spacing.12}` 48px, `{spacing.18}` 72px, `{spacing.24}` 96px, `{spacing.32}` 128px.
- Section rhythm should vary. Use large pauses around artwork, tighter rhythm around captions and metadata.

### Grid and composition

- Maximum reading width: 68ch.
- Maximum general shell: 1240px.
- Hero: asymmetric two-column layout on desktop, with the artwork surface larger than copy.
- Selected work: 2 to 3 major works per view, not dense thumbnails.
- Statement: narrow column, often offset against a large detail study.
- Exhibition notes: chronological rows with quiet dividers.
- Contact: simple inquiry form or mail link, visually lower than artwork sections.

### Whitespace philosophy

Whitespace is not empty decoration. It creates viewing pauses. Let artwork panels breathe, but avoid generic blank gallery stretches. Use off-grid offsets, long captions, and detail crops to create pace.

## Depth and Atmosphere

Depth comes from image scale, low-contrast hairlines, layered ambient washes, and subtle surface shifts. Avoid heavy drop shadows and decorative glass effects.

| Level | Treatment | Use |
|---|---|---|
| Canvas | `{colors.canvas-night}` or `{colors.canvas-dusk}` | Page floor |
| Quiet panel | Slightly lifted surface with 1px hairline | Work metadata, form groups |
| Image surface | Large artwork or crafted artwork placeholder | Hero, selected work, detail study |
| Ambient wash | Radial OKLCH color with low opacity | Section mood and transitions |
| Focus ring | 2px mineral outline | Keyboard focus |

## Shapes

| Token | Value | Use |
|---|---:|---|
| `{rounded.none}` | 0px | Image edges when a hard crop feels intentional |
| `{rounded.sm}` | 6px | Small metadata marks |
| `{rounded.md}` | 10px | Inputs and compact rows |
| `{rounded.lg}` | 18px | Quiet panels |
| `{rounded.xl}` | 28px | Large artwork surfaces |
| `{rounded.pill}` | 9999px | Inquiry links, filter marks, compact actions |

Use radius sparingly. Large artwork can have soft corners, but over-rounded artwork feels decorative and less gallery-like.

## Components

### `top-nav`

A quiet sticky navigation. Wordmark left: `Eden Labs`. Links: `Work`, `Statement`, `Exhibitions`, `Contact`. The right action is a small inquiry link, not a dominant commercial button.

### `viewing-room-hero`

The opening experience. It pairs a large artwork surface with the Eden Labs name and one short atmospheric line. Primary action: `View selected work`. Secondary action: `Contact the studio`.

### `artwork-surface`

A large image or crafted preview surface with meaningful adjacent text. Real production artwork must use descriptive `alt` text. Decorative ambient layers must be hidden from assistive technology.

### `selected-work-panel`

A major work presentation with title, year, medium, dimensions, availability or collection note, and a quiet `View details` link. Avoid repeated thumbnail catalogs.

### `artwork-detail`

A detail crop or texture study paired with a caption. Use this to slow the page down and invite looking.

### `artist-statement`

A narrow reading column with contemplative copy. Keep paragraphs short. Do not over-explain the work.

### `exhibition-list`

Chronological rows with date, place or note, and a short description. Use dividers, not dense panels.

### `contact-inquiry`

A simple contact section with name, email, and message fields, or a direct studio contact link. Contact should be easy to find and visually quiet.

### `quiet-action`

A low-emphasis action style. Usually a pill outline or text link. The action should feel like an invitation, not a sales prompt.

### `metadata-row`

Small uppercase key plus readable value. Used for year, medium, dimensions, location, and availability notes.

## Do and Do Not

### Do

- Let artwork dominate the first impression.
- Use nocturnal surfaces as the primary emotional baseline.
- Keep labels, captions, and navigation quiet.
- Preserve readable contrast on image-backed surfaces.
- Support keyboard access and visible focus states.
- Respect reduced-motion preferences for fades, scale, and parallax.
- Use real artwork assets in production, with thoughtful alternative text.

### Do not

- Use sales-heavy calls to action.
- Use dense product catalogs, plan comparisons, or benefit grids.
- Use bright saturated accent colors for interface actions.
- Use fast carousels, forced motion, or decorative effects that compete with the art.
- Over-frame artwork with heavy borders or nested panels.
- Explain the work too early or too literally.
- Add third-party tracking to static preview files by default.

## Responsive Behavior

| Name | Width | Key changes |
|---|---:|---|
| Mobile | `< 640px` | Hero stacks, nav links collapse to key anchors, artwork remains first, captions stay visible |
| Tablet | `640-1024px` | Hero uses a single dominant artwork surface, statement and details stack |
| Desktop | `1024-1280px` | Asymmetric hero, selected work spans two columns, exhibition rows stay horizontal |
| Wide | `> 1280px` | Shell caps at 1240px, artwork can bleed within the viewport when intentional |

### Touch and keyboard

- Interactive targets should be at least 44px high or have equivalent padding.
- Navigation, work links, forms, and footer links must be reachable in logical order.
- Focus rings must be visible against dark and light surfaces.

### Reduced motion

- Disable nonessential fade, scale, and parallax effects with `prefers-reduced-motion`.
- Hover motion should use transform or opacity only, never layout properties.

## Implementation Notes

1. Build the nocturnal page first, then derive the dusk preview as a quieter archive variant.
2. Use token references for color, spacing, type, radius, and hairlines.
3. Keep preview pages static and self-contained except for font loading.
4. Preview artwork may use crafted CSS placeholders until final assets exist. Production should replace them with real artwork and meaningful `alt` text.
5. Static previews intentionally exclude third-party analytics. Add analytics only in the production delivery layer after privacy review.
6. Validate with stale-reference searches, keyboard checks, contrast review, local browser review, and mobile viewport review.

## Known Gaps

- Final artwork assets are not available yet.
- Artist biography, exhibition details, and contact address are placeholders.
- Typography licensing can be revisited if a custom display family is selected.
- Production analytics requirements are undecided and are intentionally absent from these preview files.