ILoveTempMail

Overview

ILoveTempMail gives visitors a disposable address in one click, so sign-up forms and verification emails never reach a real inbox. It serves privacy-minded users who want a throwaway address without an account. The aesthetic is Soft Utility: a near-white canvas (#f3f3f6) with lilac-violet primary accents and generous rounded surfaces that make a technical tool feel light and unthreatening.

Voice is direct and reassuring, with short verbs and no hype: 'No sign-up, no personal info.' Vocabulary centres on time and privacy ('5 days left', 'Auto-expires', 'protect your privacy'). Example sentence: "Your address expires in 5 days — copy it before you close the tab."

Colors

Primary (#774bf4) is the signature accent: the Copy button, the address domain, focus rings and the Get Pro pill. Its tonal partner primary-container (#f0ebff) fills the active nav item and the address-card wash. Secondary (#00a5ef) is reserved for informational highlights, and tertiary (#00bb7f) carries live status such as the 10s refresh dot. Error (#e12afb) is used sparingly.

Surfaces step from surface (#f3f3f6) to surface-container-lowest (#ffffff) for cards so content lifts off the canvas. Text stays on-surface (#121216) for headings and on-surface-variant (#5c5c6a) for supporting copy. Gradients are limited to a soft violet-to-transparent wash at the top of the address card.

Typography

A single geometric grotesque, Geist, carries every level. The display headline (56px, weight 600, -0.035em tracking) is tightened so two-line hero titles feel dense and confident. Body copy sits at 16px/24px weight 400, and labels use 13.5px weight 500 for chips and button text. Apply letter-spacing -0.025em to headings of 24px and above; keep body text at normal tracking.

Layout

The layout is a fluid single column capped at 1040px, centred with a 20px gutter. Sections separate with lg (8px) rhythm inside cards and xl (16px) between cards. White space is generous around the hero, which uses a centred stack of badge, display title, sub-copy and three check chips.

Elevation & Depth

Depth is quiet. Cards use surface-container-lowest with a 1px rgba(18,18,22,0.06) hairline and the md shadow 0 4px 12px rgba(0,0,0,0.1). Floating primary CTAs add a violet glow of 0 12px 40px rgba(119,75,244,0.18). No backdrop blur is used on panels.

Shapes

Soft-Technical: pills (9999px) for buttons, chips and status badges, 30px for hero cards and 20-22px for inner panels and inputs. Pill shapes signal tappable actions; larger radii keep the hero feeling friendly rather than form-like.

Components

Action Elements Primary buttons are 44px tall pills with 20px horizontal padding. Hover shifts background to primary-fixed-dim over 150ms cubic-bezier(0.4,0,0.2,1). Secondary buttons sit on surface-bright with a hairline border and hover to surface-container-high.

Containers & Surfaces The address card uses a 30px radius, a violet gradient wash across its top 40%, and a 1px white inner border. Inbox panels use surface-container-lowest with a 1px outline-variant divider under the header.

Inputs & Interaction Inputs use a 20px radius, 12px vertical padding and a 2px primary focus ring at 50% opacity. List rows transition background in 150ms and reveal primary text on hover.

Do's and Don'ts

**Do**

• Use primary #774bf4 only for actions and the address domain so the accent keeps its meaning.
• Keep radii pill-shaped for buttons and chips, and 30px for hero cards.
• Pair violet accents with the neutral canvas #f3f3f6 rather than introducing new hues.
• Use tertiary #00bb7f only for live or success states such as refresh indicators.

**Don't**

• Don't place violet text on violet surfaces; the contrast collapses.
• Don't add heavy drop shadows; keep elevation at the md 0 4px 12px level.
• Don't mix more than one display weight on a single screen.
• Don't use the error hue for decorative gradients.