# How claura.framer.ai is designed

[Open the live Fudge conversation](https://design.withfudge.com/share/claura.framer.ai-design)

Last updated: 2026-07-28

## Design character

Claura is a **soft luxury AI-agency template**: warm cream canvas, espresso brown ink, big serif headlines, and one beautiful gradient/photographic panel doing the visual spectacle. UI chrome is minimal—pills, text links, and quiet labels—so the layout feels like a boutique studio site more than a tech console.

What should survive adaptation:

- Cream paper background + deep brown type (`#2b180a`)  
- **Serif display** for heroes; simpler sans for UI  
- Pill primary buttons in solid dark brown  
- One art-directed media panel (gradient/photo) with generous radius  
- Muted stone secondary text (`#94877c`)

## Foundations

### Color

Measured:

| Role | Hex |
|------|-----|
| text_primary | `#2b180a` |
| text_secondary | `#94877c` |

Visual canvas: warm cream/ivory. Primary CTA: near-espresso fill with light label. Secondary button: pale filled pill. Footer/badge chips stay light neutral.

### Typography

- Hero ~**70px** / 400 / lh 77  
- Section ~**56px** / 400  
- Lead ~**18–20px** / 400 / lh 27–30  
- Body/UI ~**14–16px** / 400–500  
- Micro ~**12px**

Serif for display is essential to the look; UI labels are smaller sans-like. Families not declared.

### Spacing and layout

- Centered hero stack with airy vertical gaps  
- CTA padding ~**10×20px** (primary), tighter **8×16** secondary  
- Lower sections use **20–30px** pads on cards  
- Logo wall / social proof under hero in a single quiet row  

## Visual language

- Radii: **12px** small, **28px** media frames, **50–100px** pills/chips  
- Hero media: rounded rectangle with optional dot-grid overlay on a soft orange→blue floral gradient  
- Almost no hard shadows; softness from color and radius  
- Brand marks in monochrome stone

## Components and states

1. **Top nav** — text links left, centered wordmark, pill CTA right  
2. **Hero** — stars/microproof, serif H1, lede, dual CTAs, media panel  
3. **Logo rail** — grayscale client marks  
4. **Story sections** — serif titles + body + light chips (“Who we are”)  
5. **Floating badges** — e.g. “Made in Framer”

Default only.

## Responsive behavior

Captures at **1711** and **1308** px. Centered stack holds; media panel scales down. No phone breakpoint in set.

## Practical guidance

**Preserve**

- Cream/espresso/stone palette  
- Serif heroes + pill CTAs  
- Single hero art piece with large radius  
- Boutique agency calm  

**Avoid**

- Dark neon AI aesthetics  
- Dense dashboard grids  
- Rainbow multi-button rows  
- Cold pure white + blue SaaS defaults  

## Scope note

Three home captures of the Framer template. Color text roles, radii, and type sizes solid; font file names not declared. Inner template pages not captured.

## Captured pages

[![Home hero — cream + serif](https://pin.fontofweb.com/8120?format=jpg)](https://design.withfudge.com/share/pin-8120)

[Home hero — cream + serif](https://design.withfudge.com/share/pin-8120)

[![Home — nav/details](https://pin.fontofweb.com/8121?format=jpg)](https://design.withfudge.com/share/pin-8121)

[Home — nav/details](https://design.withfudge.com/share/pin-8121)

[![Home — lower sections 1308](https://pin.fontofweb.com/8122?format=jpg)](https://design.withfudge.com/share/pin-8122)

[Home — lower sections 1308](https://design.withfudge.com/share/pin-8122)

## Colors

- `#f6efe6`
- `#2b180a`
- `#94877c`
- `#1a1008`
- `#ffffff`
- `#e8dfd4`