# Theodore Ellison Designs — Style Reference
> Warm earth-tones, artisan typography
**Theme:** light
Theodore Ellison Designs evokes a historical, handcrafted luxury. Its visual style combines the warmth of natural materials with a sparse, deliberate layout. Typography utilizes a bespoke font with subtle letter-spacing for headlines and body text, maintaining an airy, refined feel. A muted chromatic palette, anchored by deep, earthy tones, defines backgrounds and highlights, allowing glass and light to become the true focal points. Components are minimal, often border-only or filled with soft, desaturated colors, emphasizing texture and form over bold graphics.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Mahogany Wood | `#413128` | `--color-mahogany-wood` | Dark borders and separators for elevated surfaces and inverted UI. Do not promote it to the primary CTA color |
| Desert Clay | `#d6926b` | `--color-desert-clay` | Primary section background, conveying warmth and natural material |
| Forest Moss | `#3c4531` | `--color-forest-moss` | Tertiary section background, a deep, muted green for variety |
| Ocean Slate | `#38506c` | `--color-ocean-slate` | Accent background, a cool, muted blue-gray |
| Lavender Mist | `#afa5b4` | `--color-lavender-mist` | Accent background, a soft, desaturated purple for visual segmentation |
| Charcoal Black | `#272729` | `--color-charcoal-black` | Primary text, general borders, link text |
| Almond Canvas | `#fdfcf2` | `--color-almond-canvas` | Secondary background, ghost button background, footer background, provides a soft, warm white base |
| Stonewash Gray | `#cfcfcf` | `--color-stonewash-gray` | Filled button background, providing a subtle, muted interactive state |
| Pure White | `#ffffff` | `--color-pure-white` | Component backgrounds, button text, subtle borders, maintaining a clean contrast |
| Pale Sand | `#f2ede1` | `--color-pale-sand` | Card backgrounds, section separators, a very light, warm neutral surface |
| Muted Text | `#777777` | `--color-muted-text` | Muted helper text, secondary information |
## Tokens — Typography
### ModernEra-Regular — ModernEra-Regular — detected in extracted data but not described by AI · `--font-modernera-regular`
- **Weights:** 400, 500
- **Sizes:** 16px, 20px, 24px, 26px, 30px, 36px, 40px
- **Line height:** 1, 1.2, 1.5
- **Role:** ModernEra-Regular — detected in extracted data but not described by AI
### ModernEra — Headlines, main body text components. The varied weights handle hierarchy with a consistent, classic serif feel, preventing overly bold elements. · `--font-modernera`
- **Substitute:** Playfair Display
- **Weights:** 400
- **Sizes:** 16px
- **Line height:** 1.50
- **Letter spacing:** normal
- **Role:** Headlines, main body text components. The varied weights handle hierarchy with a consistent, classic serif feel, preventing overly bold elements.
### ModernEra Mono — Subheadings, captions, secondary labels, and functional text like navigation. The monospace quality adds a technical, precise counterpoint to the main serif font, with tight tracking enhancing its crispness. · `--font-modernera-mono`
- **Substitute:** IBM Plex Mono
- **Weights:** 400
- **Sizes:** 14px, 16px
- **Line height:** 1.43, 1.50
- **Letter spacing:** -0.0070em
- **Role:** Subheadings, captions, secondary labels, and functional text like navigation. The monospace quality adds a technical, precise counterpoint to the main serif font, with tight tracking enhancing its crispness.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| caption | 16px | 1.2 | — | `--text-caption` |
| body-sm | 20px | 1.2 | — | `--text-body-sm` |
| body | 24px | 1.2 | — | `--text-body` |
| body-lg | 26px | 1.2 | — | `--text-body-lg` |
| heading-sm | 30px | 1.2 | — | `--text-heading-sm` |
| heading | 36px | 1.2 | — | `--text-heading` |
| heading-lg | 40px | 1.2 | — | `--text-heading-lg` |
## Tokens — Spacing & Shapes
**Base unit:** 4px
**Density:** comfortable
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 6 | 6px | `--spacing-6` |
| 10 | 10px | `--spacing-10` |
| 14 | 14px | `--spacing-14` |
| 15 | 15px | `--spacing-15` |
| 18 | 18px | `--spacing-18` |
| 20 | 20px | `--spacing-20` |
| 22 | 22px | `--spacing-22` |
| 36 | 36px | `--spacing-36` |
| 43 | 43px | `--spacing-43` |
| 115 | 115px | `--spacing-115` |
| 135 | 135px | `--spacing-135` |
| 180 | 180px | `--spacing-180` |
### Border Radius
| Element | Value |
|---------|-------|
| cards | 0px |
| buttons | 0px |
| textInputs | 0px |
### Shadows
| Name | Value | Token |
|------|-------|-------|
| xl | `rgba(0, 0, 0, 0.25) 0px 0px 100px 0px inset` | `--shadow-xl` |
### Layout
- **Section gap:** 180px
- **Card padding:** 20px
- **Element gap:** 20px
## Components
### Ghost Navigation Button
**Role:** Primary navigation links and interactive elements within headers/footers.
Text in Charcoal Black (#272729), no background, no border, with 14px padding. Utilizes ModernEra Mono weight 400 for a crisp, functional feel.
### Outlined Call-to-Action Button
**Role:** Prominent calls to action, drawing attention through contrast.
Background Almond Canvas (#fdfcf2), text Mahogany Wood (#413128), and a 1px solid Mahogany Wood (#413128) border. Zero border-radius and 14px vertical, 22px horizontal padding. Uses ModernEra weight 400.
### Filled Neutral Button
**Role:** Secondary actions or less prominent interactive elements.
Background Stonewash Gray (#cfcfcf), text Pure White (#ffffff). Zero border-radius and 14px vertical, 22px horizontal padding. Uses ModernEra weight 400.
### Section Divider Card
**Role:** Modular content blocks that visually separate information.
Background Pale Sand (#f2ede1), with 20px padding. Zero border-radius, no visible border or shadow by default. Content typically centered and structured within this container.
### Text Input (Outlined)
**Role:** Form fields for user data entry.
Background Pure White (#ffffff), with a 1px solid Charcoal Black (#272729) border. Zero border-radius, 15px vertical padding and 20px horizontal padding. Uses ModernEra Mono for input text.
## Do's and Don'ts
### Do
- Prioritize a maximalist approach to imagery, letting the visual assets command attention.
- Maintain zero border-radius on all interactive elements and content containers for a sharp, architectural feel.
- Use Almond Canvas (#fdfcf2) as the default background for interactive components to provide a soft contrast.
- Employ the ModernEra Mono font for all secondary and functional text elements, utilizing its tight -0.0070em letter-spacing.
- Structure page sections with distinct background colors like Desert Clay (#d6926b) and Pale Sand (#f2ede1) to create visual rhythm.
- Use Charcoal Black (#272729) for primary text and border outlines to maintain strong contrast and definition.
- Ensure generous top and bottom padding of 180px for major sections to create breathing room and gravitas.
### Don't
- Avoid using drop shadows for elevation; instead, use subtle background color changes or inset shadows for depth.
- Do not introduce rounded corners on any UI elements; the system explicitly uses sharp 0px radii.
- Refrain from using strong, vivid primary colors for backgrounds; the palette relies on muted, earthy tones.
- Do not deviate from the ModernEra and ModernEra Mono font families; there are no other approved typefaces.
- Avoid dense, clustered layouts; content should feel spacious with ample negative space around elements.
- Do not use generic system UI elements; components must reflect the custom, minimalist styling with specific colors and radii.
- Do not apply `normal` letter-spacing to ModernEra Mono font; it should always carry the defined negative tracking.
## Surfaces
| Level | Name | Value | Purpose |
|-------|------|-------|---------|
| 0 | Desert Clay Canvas | `#d6926b` | Primary page background for main content areas, conveying warmth. |
| 1 | Almond Canvas | `#fdfcf2` | Secondary page background for footers and some interactive surfaces, a soft, warm off-white. |
| 2 | Pale Sand Card | `#f2ede1` | Default background for content cards and modular sections, providing a subtle layer. |
| 3 | Pure White Accent | `#ffffff` | Background for form inputs and some interactive elements, offering crispness. |
## Elevation
- **Gallery Image Modal:** `inset rgba(0, 0, 0, 0.25) 0px 0px 100px 0px`
## Imagery
Photography is paramount, often showcasing glasswork and interiors. Images tend to be full-bleed or large, emphasizing texture and light interaction as they would 'in situ'. There's a mix of detailed product shots and atmospheric context shots that capture mood and environment. Photography for products is direct and bright, highlighting the material. Illustrations are minimalist line-art for logos and icons, providing a clean, geometric contrast to the organic nature of the glass. Icons (visible in the header logo) are outlined with a fine stroke weight, maintaining a delicate, architectural feel. Imagery primarily serves to showcase the product and evoke a sense of crafted quality, occupying significant visual space.
## Layout
The page primarily uses a contained layout with some full-bleed sections. The hero section can be full-bleed with a prominent visual that takes up the entire viewport, featuring centered branding. Subsequent sections alternate between full-width color blocks and content blocks limited by an implicit max-width, maintaining comfortable internal padding. Content often arranges in dual-column structures (text-left/image-right or vice versa) or centered stacks. Vertical rhythm is established through generous and consistent section gaps of 180px between major blocks, creating a spacious and unhurried browsing experience. The navigation is a minimal top bar, with prominent branding and subtle ghost buttons on the right.
## Agent Prompt Guide
Quick Color Reference:
text: #272729
background: #d6926b
border: #413128
accent: #a8a0ae
primary action: no distinct CTA color
Example Component Prompts:
1. Create an outlined button for 'View Collection': Almond Canvas background (#fdfcf2), Mahogany Wood text (#413128), and a 1px solid Mahogany Wood (#413128) border. Use ModernEra font, weight 400, 14px vertical padding, 22px horizontal padding, 0px border-radius.
2. Design a minimalist text input: Pure White background (#ffffff), 1px solid Charcoal Black (#272729) border. Use ModernEra Mono font, weight 400, for input text. Ensure 15px vertical and 20px horizontal padding, 0px border-radius.
3. Create a secondary navigation link: text Charcoal Black (#272729), no background, no border. Use ModernEra Mono font, weight 400, 14px font size, -0.0070em letter-spacing.
## Similar Brands
- **Ferm Living** — Shares the use of muted, earthy color palettes and a focus on natural materials, with a clean, unadorned aesthetic.
- **Aesop** — Employs a sophisticated, minimalist typographic style with custom fonts and a preference for monochromatic or deeply muted color schemes, creating a sense of understated luxury.
- **Carl Hansen & Søn** — Features high-quality product photography with a deep appreciation for craftsmanship, presented in a spacious, content-forward layout with restrained UI elements.
- **The Future Kept** — Exhibits a similar design philosophy with a focus on handcrafted goods, using textured backgrounds, curated photography, and classic typography with modern spacing.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-mahogany-wood: #413128;
--color-desert-clay: #d6926b;
--color-forest-moss: #3c4531;
--color-ocean-slate: #38506c;
--color-lavender-mist: #afa5b4;
--color-charcoal-black: #272729;
--color-almond-canvas: #fdfcf2;
--color-stonewash-gray: #cfcfcf;
--color-pure-white: #ffffff;
--color-pale-sand: #f2ede1;
--color-muted-text: #777777;
/* Typography — Font Families */
--font-modernera-regular: 'ModernEra-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-modernera: 'ModernEra', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-modernera-mono: 'ModernEra Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Typography — Scale */
--text-caption: 16px;
--leading-caption: 1.2;
--text-body-sm: 20px;
--leading-body-sm: 1.2;
--text-body: 24px;
--leading-body: 1.2;
--text-body-lg: 26px;
--leading-body-lg: 1.2;
--text-heading-sm: 30px;
--leading-heading-sm: 1.2;
--text-heading: 36px;
--leading-heading: 1.2;
--text-heading-lg: 40px;
--leading-heading-lg: 1.2;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
/* Spacing */
--spacing-unit: 4px;
--spacing-6: 6px;
--spacing-10: 10px;
--spacing-14: 14px;
--spacing-15: 15px;
--spacing-18: 18px;
--spacing-20: 20px;
--spacing-22: 22px;
--spacing-36: 36px;
--spacing-43: 43px;
--spacing-115: 115px;
--spacing-135: 135px;
--spacing-180: 180px;
/* Layout */
--section-gap: 180px;
--card-padding: 20px;
--element-gap: 20px;
/* Named Radii */
--radius-cards: 0px;
--radius-buttons: 0px;
--radius-textinputs: 0px;
/* Shadows */
--shadow-xl: rgba(0, 0, 0, 0.25) 0px 0px 100px 0px inset;
/* Surfaces */
--surface-desert-clay-canvas: #d6926b;
--surface-almond-canvas: #fdfcf2;
--surface-pale-sand-card: #f2ede1;
--surface-pure-white-accent: #ffffff;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-mahogany-wood: #413128;
--color-desert-clay: #d6926b;
--color-forest-moss: #3c4531;
--color-ocean-slate: #38506c;
--color-lavender-mist: #afa5b4;
--color-charcoal-black: #272729;
--color-almond-canvas: #fdfcf2;
--color-stonewash-gray: #cfcfcf;
--color-pure-white: #ffffff;
--color-pale-sand: #f2ede1;
--color-muted-text: #777777;
/* Typography */
--font-modernera-regular: 'ModernEra-Regular', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-modernera: 'ModernEra', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-modernera-mono: 'ModernEra Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Typography — Scale */
--text-caption: 16px;
--leading-caption: 1.2;
--text-body-sm: 20px;
--leading-body-sm: 1.2;
--text-body: 24px;
--leading-body: 1.2;
--text-body-lg: 26px;
--leading-body-lg: 1.2;
--text-heading-sm: 30px;
--leading-heading-sm: 1.2;
--text-heading: 36px;
--leading-heading: 1.2;
--text-heading-lg: 40px;
--leading-heading-lg: 1.2;
/* Spacing */
--spacing-6: 6px;
--spacing-10: 10px;
--spacing-14: 14px;
--spacing-15: 15px;
--spacing-18: 18px;
--spacing-20: 20px;
--spacing-22: 22px;
--spacing-36: 36px;
--spacing-43: 43px;
--spacing-115: 115px;
--spacing-135: 135px;
--spacing-180: 180px;
/* Shadows */
--shadow-xl: rgba(0, 0, 0, 0.25) 0px 0px 100px 0px inset;
}
```
Forest floor stillness
Mediterranean sun-drenched linen
Artisanal parchment and charcoal…
Warm gray minimalism on unbleached…
Organic luxury, soft earth tones.…
Whispered luxury on white linen. A…
Architectural blueprint on white…
Warm Minimalism Canvas
Warm earthy heritage
Photographic gallery on…
Minimalist alpine clean
Black script on white canvas
earthy luxury parchment
Warm Minimalism
Earthy minimalist canvas
Warm Scandi elegance
Gallery Canvas, Monochromatic Depth
serene Scandinavian minimalist
earthy comfort, quiet confidence
Editorial Art House