claura.framer.ai website design: fonts, colors and UI patterns

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:

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.