# getclera.com

Source: https://www.getclera.com/
Captured: 2026-09-13
Tags: saas, landing, mixed, both, editorial, luxury, minimal, warm, premium, elegant, calm, confident
Colors: #1c1816, #3f3528, #f7f5f3, #5d5447, #98938b, #73716e, #b8b3a9, #d3d5d5
Type (h1): Source Serif 4 · 60px/60px · 500 · tracking -3px — "Stop applying to startups. Start getting introduced."
Type (h2): Source Serif 4 · 60px/60px · 400 · tracking -3px — "Find out what you're worth."
Type (h3): Source Serif 4 · 18px/28px · 500 — "ELO Score"
Type (body): Be Vietnam Pro · 12px/16.5px · 400 — "Based on your profile, here are 2 roles you’re a strong fit for"
Type (small): Be Vietnam Pro · 12px/16.5px · 300 — "Founding Engineer"
Type (button): Be Vietnam Pro · 14px/20px · 400 — "Find a job"
Button (primary): "Chat with Clera" — text #004e52, radius 9999px, border 1px, padding 10px 24px, height 46px, type 16px/400
Button (secondary): "Find a job" — text #ffffff, radius 10px, border 0px, padding 4px 12px, height 28px, type 14px/400
Radii: 10px (42), 9999px (23), 20px (14), 4px (6), 22px (6)

## Images

- Hero (desktop): https://media.lvly.design/library/getclera-com/hero.webp?v=abb505d3
- Page crop (mid-1): https://media.lvly.design/library/getclera-com/mid-1.webp?v=52a8d68e
- Page crop (mid-2): https://media.lvly.design/library/getclera-com/mid-2.webp?v=c3a25a9f
- Hero (mobile): https://media.lvly.design/library/getclera-com/mobile-hero.webp?v=f567ad60
- Full page (desktop): https://media.lvly.design/library/getclera-com/full.jpg?v=b6ba911c
- Full page (mobile): https://media.lvly.design/library/getclera-com/mobile-full.jpg?v=dbec7bb8
- Clip preview (mp4): https://media.lvly.design/library/getclera-com/video-wv9he1.preview.mp4?v=b66ce407

Clera sells an AI talent agent with the voice of a quiet, well-dressed recruiter rather than a job board. The hero is a full-viewport warm black (#1c1816) that dissolves rightward into a golden-hour photograph of a founder at a desk among moving boxes, with tiny chat bubbles composited over the scene to show the product without a UI screenshot. Source Serif 4 at 58px / 500 weight with -2.32px tracking carries the two-line headline, set against Be Vietnam Pro body text at a deliberately small 12–16px. Below the fold the page turns to cream paper (#fbf8f4) held inside hairline column rules, section titles switch to a deep teal-green serif, and the product is shown as job cards floating over dusky, film-grained cityscapes. Everything is soft-cornered (10px cards, 20–22px panels, pill chips) and the palette never leaves warm neutrals except for that single teal, which does all the CTA work.

## Steal-worthy details

- Split hero: solid warm-black left half fading into a cinematic photograph on the right, so the headline sits on flat color while the image sets the mood — no overlay gradient needed on the text side.
- Product shown as overlaid chat bubbles on a lifestyle photo instead of a dashboard screenshot; the "Yes, intro me to the first one" reply bubble is a saturated blue, the only cool note in the hero.
- A large multi-line textarea-style input as the hero CTA (with typing placeholder "GTM E|" and a circular white arrow button inside), followed by example-query pill chips — a prompt box, not a form.
- Product Hunt laurels rendered as monochrome white line art so the badges match the hero rather than shouting.
- Full-width hairline column rules that frame the light sections at the content width — a subtle editorial grid that survives at 1440px.
- Section eyebrow = tiny teal square icon + word ("Process"), then a serif H2 in the same teal; the accent lives in type, not backgrounds.
- Three-card fan of job cards, each with logo, underlined company name, serif role title, muted salary chips, and a "Why?" rationale line — a card pattern that explains itself.
- Three-step process expressed as three pills joined by arrows, middle step filled teal, outer steps outlined — state and sequence in one row.

## Style recipe

Build on a cream paper ground (#fbf8f4) with white (#f7f5f3) cards and one warm near-black (#1c1816) for dark blocks and primary text; secondary text in warm grays (#5d5447, #98938b). Reserve a single deep teal-green (approx. #0e4a44) for primary buttons, section headings and small icons — never use it as a background wash. Headlines in Source Serif 4, weight 500, 56–60px, line-height 1.0, letter-spacing -0.04em; body in Be Vietnam Pro 400 at 14–16px with line-height 1.4, and allow labels down to 12px. Radii: 10px for cards and buttons, 20–22px for large media panels, 9999px for chips and secondary CTAs; 1px hairline borders in a warm gray, no heavy shadows. Compose the hero as a two-part surface: flat dark color on the text side, a warm golden-hour photograph on the other, blended with a horizontal gradient. Frame light sections with full-height vertical hairlines at the content edges. Show product UI as small floating cards or bubbles over atmospheric, slightly grainy photography rather than as flat screenshots. Buttons: primary = solid teal with white 16px text, 10px radius, 36–44px tall; secondary = 1px outline pill on cream. Keep the palette entirely warm-neutral apart from the teal, and let serif type carry all the personality.