Haven
The visual identity for ImFiled: a calm, modern, quietly hopeful brand for people navigating one of the hardest processes of their lives. Built to carry a multi-form immigration platform, not just the I-130.
globals.css (Haven block)Brand essence
Everything in this guide serves one idea. If a design choice does not move the brand toward it, it is the wrong choice.
ImFiled's customers are anxious, often filing for a spouse, parent, or child, with a family's future at stake. The brand's first job on every screen is to lower that anxiety. Warmth alone would feel amateur, and amateur is unforgivable here. Precision alone would feel cold and bureaucratic, the exact feeling people are trying to escape. Haven holds both at once.
ImFiled is
- +A document preparation service that makes hard paperwork manageable
- +Plain-spoken, warm, and steady
- +A calm guide that always shows the next step
- +A platform built for many immigration forms
ImFiled is not
- ×A law firm, and never dressed as one (no crests, scales, gavels)
- ×A government agency, or anything that mimics one
- ×Cold, clever, or corporate
- ×A single-form tool
Logo
The mark is an archway, a threshold. It speaks to passage, arrival, and a new home, the heart of why anyone files immigration paperwork. It is fully abstract, so it belongs to ImFiled the platform, not to any one form.
Clear space & minimum size
Keep clear space around the logo equal to the height of the wordmark's capital letters. Nothing, no text, image, or edge, intrudes inside the dashed boundary.
Minimum sizes: the lockup is never used below 120px wide on screen. Below that, switch to the mark alone, which holds down to 20px.
Misuse
Color
A deep, calm pine green carries the brand: steady, reassuring, and quietly signalling “on track.” A warm clay supplies the human warmth. Warm sand neutrals keep everything soft, never clinical. Three ramps, used with restraint.
Pine — primary
Clay — accent
Sand — warm neutral
Status
Semantic roles
| --color-canvas | App and page background | |
| --color-haven-surface | Cards, panels, raised surfaces | |
| --color-ink | Primary text | |
| --color-text-muted | Secondary text | |
| --color-haven-border | Default borders and dividers | |
| --color-primary | Primary actions, key brand moments | |
| --color-haven-accent | Highlights, progress, illustration |
Contrast note: the bright accent #C77A4D does not meet 4.5:1 with white text at body size. Use it for highlights, progress fills, and large display elements. For an accent-colored button with white text, use the interactive accent #894C2C.
Typography
One typeface does everything: Figtree, a warm, humanist sans. It is friendly without being soft, crisp at small sizes, and reads beautifully on a phone. A single family keeps the whole product feeling like one calm, well-made thing.
Weights
Headings use tight letter-spacing (around -0.02em). Body text stays at a comfortable 1.6 line-height. Never set long passages in all caps; reserve caps for the small tracked caption style only.
Iconography
ImFiled uses Lucide, an open-source icon set. Its even, humanist line work matches Figtree and the calm tone of Haven, and its 1,500-plus icons mean no gaps as the product grows. Do not draw one-off icons; pull from Lucide.
Sizes & stroke
Default size 20 or 24px; 16px for inline and dense UI. Stroke stays at Lucide's native 2px (do not thin it). Icons inherit text color: muted for decoration, ink for emphasis, a status color when carrying meaning.
Layout & space
Whitespace is a feature in Haven; it reads as calm and as confidence. Space and radius both follow fixed scales, so the product feels consistent everywhere.
Spacing scale
Corner radius
8 for small controls, 12 for buttons and inputs, 16 for cards, 22 for large feature panels. Pills use a fully round radius.
Elevation
rests, inputs, rows
cards, popovers
modals, key moments
Shadows are warm-tinted and soft, never hard or gray. Use them sparingly; a border often does the job.
Motion
Motion makes the product feel responsive and alive, and guides the eye. It is fast and purposeful, never decorative. One slower, warmer beat is reserved for true milestones, like documents submitted.
| --duration-fast | 120ms | Hovers, small state changes |
| --duration-base | 180ms | The default for most transitions |
| --duration-slow | 240ms | Panel and section enter/exit |
| --duration-celebrate | 420ms | Milestone moments only |
| --ease-haven-standard | cubic-bezier(0.2, 0, 0, 1) — most transitions | |
| --ease-entrance | cubic-bezier(0.16, 1, 0.3, 1) — elements arriving | |
Always honor prefers-reduced-motion: when set, transitions drop to near-instant. The tokens file does this automatically.
Components
Core UI built from the tokens above. These become the shared component library.
Buttons
Input
Badges & status tags
In context
Voice & tone
How ImFiled writes matters as much as how it looks. The voice is plain, warm, and calm. It speaks to the customer directly, never hides behind jargon, and always stays inside the document-preparation line.
Principles.Write in plain language at a low reading level; many customers are not first-language English speakers. Use "you" and "we." Name things the way a person would: "Reviewing your documents," never ai_review. Reassure before you ask. And never give legal advice or predict an outcome, that is the unauthorized practice of law; stay with what is true about the documents and the process.