# Zeus Jones — Style Reference
> Ethereal canvas with typographic gravitas. A sun-drenched, off-white digital gallery where bold typography and artful backgrounds coalesce.
**Theme:** light
Zeus Jones projects a refined, artistic sensibility with a foundational off-white canvas and a rich, muted chromatic dark gray that anchors all textual and interactive elements. The design is characterized by large, confident typography that mixes serifs and sans-serifs, creating a dynamic yet sophisticated feel. Playful, pill-shaped buttons with deep curves add a touch of approachability against substantial spacing and a generally sparse layout. The hero section often features dramatic, ethereal gradient backgrounds that contrast with the otherwise understated UI.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas Parchment | `#fcfaf3` | `--color-canvas-parchment` | Page backgrounds, navigation backgrounds, default text for dark surfaces — forms the primary backdrop of the site |
| Greyscale Architect | `#1a1c2c` | `--color-greyscale-architect` | Primary text, informational elements, button backgrounds, borders, link text, card text. This deep, muted gray serves as the dominant structural color |
| Card Dove | `#ebe9e4` | `--color-card-dove` | Card backgrounds, secondary surface variations, providing a subtle visual separation from the main canvas |
| Night Icon | `#000000` | `--color-night-icon` | Decorative SVG icons, occasional text elements where maximum contrast is desired, creating a sharp graphic presence |
| Hero Gradient | `linear-gradient(280deg, #b485ca, #e34c98, #60e0a5, #9c8ec4, #c9b13c)` | `--color-hero-gradient` | Dominant hero section background, providing a distinct, vibrant, and atmospheric entrance to the site — contrasts with the otherwise neutral palette |
## Tokens — Typography
### ZJSansDisplay — Primary sans-serif for headings, body text, navigation items, and interactive elements. It provides a modern, confident tone. · `--font-zjsansdisplay`
- **Substitute:** Inter
- **Weights:** 400, 500
- **Sizes:** 12px, 16px, 18px, 24px, 40px, 48px, 60px, 90px
- **Line height:** 1.00, 1.07, 1.11, 1.20, 1.25, 1.30, 1.50, 1.60
- **Letter spacing:** -0.0200em at large sizes, 0.0500em at smaller sizes
- **Role:** Primary sans-serif for headings, body text, navigation items, and interactive elements. It provides a modern, confident tone.
### FeatureDeckLight — Hero headlines and large display text, characterized by its extremely light weight. It creates a sense of gravitas and spaciousness, conveying authority through restraint. · `--font-featuredecklight`
- **Substitute:** Lora Light
- **Weights:** 100
- **Sizes:** 60px, 90px
- **Line height:** 1.07, 1.11
- **Letter spacing:** -0.0200em
- **Role:** Hero headlines and large display text, characterized by its extremely light weight. It creates a sense of gravitas and spaciousness, conveying authority through restraint.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 12px | 1.5 | 0.6px | `--text-caption` |
| body-sm | 16px | 1.5 | — | `--text-body-sm` |
| body | 18px | 1.5 | — | `--text-body` |
| subheading | 24px | 1.3 | — | `--text-subheading` |
| heading | 40px | 1.25 | — | `--text-heading` |
| heading-lg | 48px | 1.2 | -0.96px | `--text-heading-lg` |
| display | 60px | 1.07 | -1.2px | `--text-display` |
## Tokens — Spacing & Shapes
**Base unit:** 8px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 8 | 8px | `--spacing-8` |
| 16 | 16px | `--spacing-16` |
| 24 | 24px | `--spacing-24` |
| 32 | 32px | `--spacing-32` |
| 40 | 40px | `--spacing-40` |
| 48 | 48px | `--spacing-48` |
| 64 | 64px | `--spacing-64` |
| 120 | 120px | `--spacing-120` |
| 128 | 128px | `--spacing-128` |
### Border Radius
| Element | Value |
|---------|-------|
| all | 20px |
| cards | 20px |
| buttons | 1584px |
| headings | 1000px |
### Layout
- **Section gap:** 40px
- **Card padding:** 0px
- **Element gap:** 16px
## Components
### Ghost Navigation Link
**Role:** Navigation item and basic textual link.
Transparent background, 'Greyscale Architect' text (#1a1c2c), no border, no padding or radius. Used for minimalist navigation and inline links.
### Pill Button
**Role:** Primary call to action.
Filled with 'Greyscale Architect' (#1a1c2c) and 'Canvas Parchment' (#fcfaf3) text. Features an extremely high border-radius (1782px or 1584px) to create a pill shape. Padding is generous at 16px vertical, 32px horizontal or 12px vertical, 20px horizontal.
### Work Showcase Card
**Role:** Displaying work examples.
Background is 'Card Dove' (#ebe9e4) with a 20px border-radius and no box-shadow. Contains imagery and descriptive text.
### Underlined Input Field
**Role:** Standard text input.
Transparent background, 'Greyscale Architect' (#1a1c2c) text. Features a bottom border of 'Greyscale Architect' and no border-radius. Padding is 0px horizontal, 8px bottom.
### Header Navigation
**Role:** Top-level site navigation.
Inherits page background and features minimal ghost links and a menu icon. It's a full-width container that uses generous spacing and aligns elements to the edges.
## Do's and Don'ts
### Do
- Use 'Canvas Parchment' (#fcfaf3) as the default background for all page sections unless an accent background is specified.
- Employ 'Greyscale Architect' (#1a1c2c) for all primary body text, headlines, and interactive elements to maintain visual consistency.
- Apply ZJSansDisplay at weight 400 for most body and navigation text, with specific larger sizes for headings as defined in the type scale.
- Utilize FeatureDeckLight weight 100 for large, impactful display headings (60px, 90px) to establish a distinctive, light-weight typographic presence.
- Ensure all interactive buttons conform to the pill shape with a radius of 1584px or 1782px.
- Maintain comfortable '20px' border-radius for cards, images, and other contained UI elements.
- Incorporate a 40px section gap between major content blocks to ensure ample breathing room and a spacious layout.
### Don't
- Avoid using bright, saturated colors for primary UI elements; reserve high chroma for abstract backgrounds or illustrative accents.
- Do not use box-shadows for elevation; rely on background color changes or subtle borders for surface distinction.
- Do not break the pill-shaped button aesthetic with square or slightly rounded corners; always aim for maximum curvature.
- Avoid tight, condensed layouts; emphasize spaciousness and generous internal padding for components.
- Do not use generic system fonts; always adhere to ZJSansDisplay and FeatureDeckLight for brand consistency.
- Do not introduce heavy borders or outlines; stick to ghost interactions or solid, rich dark gray fills for interactive elements.
- Never center align large blocks of text; maintain a left-aligned, spacious text presentation.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Canvas Parchment | `#fcfaf3` | Primary page background layer |
| 1 | Card Dove | `#ebe9e4` | Secondary background layer for cards and contained content |
| 2 | Greyscale Architect | `#1a1c2c` | Deepest surface layer, used for interactive elements like filled buttons or navigation panels that appear on top of other surfaces |
## Imagery
The site uses a mix of bespoke, abstract gradient backgrounds (often full-bleed in hero sections) and carefully curated product/project showcase imagery. Photography and product shots are contained within cards with 20px rounded corners, often monochromatic or with a muted color palette to blend with the overall design. Icons are minimalist, typically black (#000000) or 'Greyscale Architect' (#1a1c2c) and filled, reflecting a clean, direct visual style. Imagery functions primarily to showcase work and set an atmosphere, not as merely decorative elements. Density is medium, with images serving as visual anchors within content blocks.
## Layout
The page primarily uses a full-bleed structure, particularly for impactful hero sections like the gradient background. Content within sections is often given ample horizontal padding, creating a comfortable breathing room. Sections maintain a consistent vertical rhythm with a 40px `sectionGap`. Layouts within sections frequently alternate between text-dominant blocks and engaging, multi-column card grids for showcasing work. The header is a sticky, full-width element, providing persistent navigation. The overall feel is spacious and uncrowded, allowing key typographic elements and imagery to stand out.
## Agent Prompt Guide
### Quick Color Reference
text: #1a1c2c
background: #fcfaf3
border: #1a1c2c
accent: #9c8ec4 (Hero Gradient)
primary action: #1a1c2c (filled action)
### 3-5 Example Component Prompts
1. Create a Primary Action Button: #1a1c2c background, #fcfaf3 text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA.
2. Design a work showcase card: 'Card Dove' (#ebe9e4) background, 20px border-radius, no shadow, and internal content. Headline for the card example should be 'Rural American Mindset' using ZJSansDisplay weight 500, 24px, #1a1c2c. Body text below it using ZJSansDisplay weight 400, 18px size, #1a1c2c.
3. Implement a simple navigation link: no background, 'Greyscale Architect' (#1a1c2c) text color, ZJSansDisplay weight 400, 16px size. For example, text 'Work'.
## Similar Brands
- **Huge** — Known for large, confident typography on light backgrounds and a focus on digital experience design.
- **Fantasy** — Features impactful visual heroes with dramatic backgrounds and clean, sans-serif typography as a core element.
- **Work & Co** — Utilizes significant whitespace and a refined, minimal color palette to highlight content and typography, similar to the light canvas approach and deep-gray text.
- **Locomotive** — Employs bold, elegant typography and distinctive custom typefaces, often against a neutral or atmospheric background, for a sophisticated brand presence.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-canvas-parchment: #fcfaf3;
--color-greyscale-architect: #1a1c2c;
--color-card-dove: #ebe9e4;
--color-night-icon: #000000;
--color-hero-gradient: #9c8ec4;
--gradient-hero-gradient: linear-gradient(280deg, #b485ca, #e34c98, #60e0a5, #9c8ec4, #c9b13c);
/* Typography — Font Families */
--font-zjsansdisplay: 'ZJSansDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-featuredecklight: 'FeatureDeckLight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 12px;
--leading-caption: 1.5;
--tracking-caption: 0.6px;
--text-body-sm: 16px;
--leading-body-sm: 1.5;
--text-body: 18px;
--leading-body: 1.5;
--text-subheading: 24px;
--leading-subheading: 1.3;
--text-heading: 40px;
--leading-heading: 1.25;
--text-heading-lg: 48px;
--leading-heading-lg: 1.2;
--tracking-heading-lg: -0.96px;
--text-display: 60px;
--leading-display: 1.07;
--tracking-display: -1.2px;
/* Typography — Weights */
--font-weight-thin: 100;
--font-weight-regular: 400;
--font-weight-medium: 500;
/* Spacing */
--spacing-unit: 8px;
--spacing-8: 8px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-64: 64px;
--spacing-120: 120px;
--spacing-128: 128px;
/* Layout */
--section-gap: 40px;
--card-padding: 0px;
--element-gap: 16px;
/* Border Radius */
--radius-2xl: 20px;
--radius-full: 1000px;
--radius-full-2: 1584px;
--radius-full-3: 1782px;
/* Named Radii */
--radius-all: 20px;
--radius-cards: 20px;
--radius-buttons: 1584px;
--radius-headings: 1000px;
/* Surfaces */
--surface-canvas-parchment: #fcfaf3;
--surface-card-dove: #ebe9e4;
--surface-greyscale-architect: #1a1c2c;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-canvas-parchment: #fcfaf3;
--color-greyscale-architect: #1a1c2c;
--color-card-dove: #ebe9e4;
--color-night-icon: #000000;
--color-hero-gradient: #9c8ec4;
/* Typography */
--font-zjsansdisplay: 'ZJSansDisplay', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-featuredecklight: 'FeatureDeckLight', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-caption: 12px;
--leading-caption: 1.5;
--tracking-caption: 0.6px;
--text-body-sm: 16px;
--leading-body-sm: 1.5;
--text-body: 18px;
--leading-body: 1.5;
--text-subheading: 24px;
--leading-subheading: 1.3;
--text-heading: 40px;
--leading-heading: 1.25;
--text-heading-lg: 48px;
--leading-heading-lg: 1.2;
--tracking-heading-lg: -0.96px;
--text-display: 60px;
--leading-display: 1.07;
--tracking-display: -1.2px;
/* Spacing */
--spacing-8: 8px;
--spacing-16: 16px;
--spacing-24: 24px;
--spacing-32: 32px;
--spacing-40: 40px;
--spacing-48: 48px;
--spacing-64: 64px;
--spacing-120: 120px;
--spacing-128: 128px;
/* Border Radius */
--radius-2xl: 20px;
--radius-full: 1000px;
--radius-full-2: 1584px;
--radius-full-3: 1782px;
}
```
Sculpted Minimalism on Canvas. An…
Artistic Jungle Canvas
Vibrant canvas, bold typography
Warm canvas, playful 3D
Midnight Command Center: precise…
Raw concrete with meticulous…
Editorial Minimal Canvas — Large,…
Black canvas, stark typography
Gallery canvas, warm minimal.
Warm earth against dark steel
High-contrast typographic canvas
Expansive sky, clean canvas.
Industrial Print Workshop: stark…
Kinetic typographic canvases
Artisanal precision on a calm…
Classical art gallery

Frosted glass on crisp canvas
Sculpted digital canvas.
Art-filled creative canvas
Monochromatic Canvas, Vivid…