What Homesy is

A care system for the things in your home. It monitors, diagnoses, and coordinates — giving homeowners ongoing visibility and control over the condition of their home.

Membership tiers

Free: Homesy account, appliance register, basic diagnostics. Pro — £9.99/mo: Unlimited Diagnosis, annual health check, cost-price repair and replacement.

Who it's for

Homeowners who want oversight — not emergencies. People who maintain rather than react. Typically 30–55, owns property, values competence and plain language over corporate warmth.

Brand positioning

Between insurance (risk transfer) and tradesperson directories (reactive referrals). Homesy is proactive care — a subscription that earns trust through usefulness, not promises.

Partner model

Engineers are vetted partners, not employees or commission earners. Homesy advocates for the homeowner first. If a repair isn't needed, Homesy says so — even if it means no job.

Never say

Don't compare Homesy to insurance, warranties, or boiler cover. Don't call it a "platform" or "marketplace". Don't use "peace of mind" — say what it actually does instead.

Capitalisation

The logo is always "homesy" in lowercase. Never "Homesy" or "HOMESY" as the mark itself — the capital H is for running prose only.

Typeface

Don't re-typeset the wordmark or substitute the typeface. Always use the exported SVG asset — never recreate it in another font.

Effects

No outlines, drop-shadows, gradients, emboss, or any effect on the wordmark. The mark is clean — it ships as-is.

Taglines

Don't attach "Your home, looked after." or any tagline directly to the wordmark. The brand line and logo are separate elements.

Colour

Forest green on light surfaces. White on dark. Never recoloured to match a partner palette, tinted, or rendered in any other hue.

Partner lockups

Don't lock up with a partner logo without brand sign-off. Clear space must be maintained — cap-height on all sides — in any co-branding.

Georgia for display only

Use Georgia for headlines, sub-heads, and pull quotes only. Never for body text, UI labels, navigation, buttons, or form fields — those belong to system sans.

Never bold Georgia

Georgia is always weight 400 (regular). The serif letterforms carry visual weight on their own — bold makes headlines look heavy and off-brand. Italic is permitted sparingly.

System sans for function

Body copy, UI labels, navigation items, buttons, captions, and form fields all use the system sans stack. Font weight may vary: 400 body, 500 labels, 600 buttons.

Type scale

Hero display: 52–92px · Section heads: 38–44px · Card heads: 26–32px · Body: 15–16px · Supporting: 13px · Labels (caps): 11–12px. Never size body below 13px.

Spacing rules

Georgia display: letter-spacing −0.02em, line-height 1.05–1.1. Sans body: letter-spacing 0, line-height 1.65–1.78. Uppercase labels: letter-spacing +0.10–0.14em.

Hierarchy in practice

One Georgia headline per section. Do not stack two Georgia elements at similar sizes — establish clear hierarchy. Sub-heads may use sans medium (500) as a counterpoint.

Container first

All content sits inside `.container` (1080px) or `.narrow` (760px). Never set percentage widths on components — let the container constrain them.

Gutter floors

The 20px minimum mobile gutter is a floor, not a suggestion. Section padding never collapses below 56px on any viewport.

One divider rule

Sections separate with a single 1px `--border` line. No double rules, no gradient dividers, no decorative shapes between sections.

Alternation is sequence

Background colour follows the defined sequence: white → alt → white → paper → dark green → white. Don't repeat adjacent colours or skip steps.

Typography at 768px

Multi-column layouts collapse to single column. Georgia headlines scale down via clamp(). Card gaps tighten from 24–32px to 16–20px.

Spacing from scale

All spacing uses values from the defined scale: 16, 24, 36, 56–72, 64, 96–128. Avoid arbitrary pixel values that fall outside these tokens.

No exclamation marks

Never in brand copy. Product UI can use them for success states only — never in marketing, editorial, or support communications.

Active voice

Always prefer active construction. "We'll send an engineer" not "An engineer will be dispatched." Passive reads as evasion or bureaucratic distance.

No adjudication framing

"Approved", "denied", "entitled", "rejected" — none of these. Homesy is not an insurance company. The language of claims has no place here.

Every claim is traceable

Every customer-facing claim traces to a real platform data source. Inferences are framed as inferences: "looks like", "we think", "probably".

Sentence length

Body copy: 12–18 words per sentence. Headlines: 4–8 words. Long sentences that split on "and" or "but" should be broken into two.

No urgency

No "limited time", "act now", "don't miss out". If the offer is real, describe it plainly. Urgency is manufactured; Homesy doesn't manufacture anything.

Number

Set in Georgia, 64–80px on the about page, 28–32px in the homepage condensed version. Colour is --green at 40% opacity. The number carries visual weight without competing with the title.

Title

Georgia 22–28px, --green at full opacity. Never bold. The serif carries the weight. Balanced line-breaks where authorial control matters.

Body

System sans, 15–17px, --text, line-height 1.65–1.72. Each belief is 3–4 sentences — no shorter, no longer. The full copy is fixed; do not paraphrase.

Separation

Beliefs are separated by a 1px --border divider or generous whitespace. Never run them together without visual separation.

Entrance animation

Where motion is appropriate: stagger reveal, translateX(−16px) → 0, opacity 0 → 1. Duration 0.55s, 90ms stagger between items. Honour prefers-reduced-motion — disable the stagger when set.

Full vs condensed

The about page carries the full belief copy with large numerals (64–80px). The homepage and brand guidelines carry a condensed version — shorter body copy, smaller numerals (28–32px). Never truncate mid-sentence.

Style

Line icons, 1.5–2px stroke weight, round linecap and linejoin. Lucide, Phosphor (light or regular), or a comparable line system. Never mix icon families on the same surface.

Colour hierarchy

--green for primary icons. --text for secondary. --mute for tertiary/supporting. Status icons use --monitor or --alert only where status is genuinely communicated — never decoratively.

Filled icons

Not the default. Filled reads heavier than the brand register. Allowed only as status indicators where filled is functionally correct (active state, alert). Don't mix line and filled in the same surface.

Don'ts

No icons as decorative bullet points. No vendor or brand logos used decoratively — only where the reference is informational. No 3D icons, gradient icons, or icons with shadow effects. No colour icons or multi-colour icon systems.

Composited layers only

Animate only transform (x, y, scale, rotation) and opacity. Never animate height, width, top, left, margin, or padding — these force layout reflow on the main thread and cause jank on lower-end devices.

Use autoAlpha

In GSAP, use autoAlpha instead of separate opacity + visibility. autoAlpha sets visibility:hidden when opacity reaches 0, removing the element from the accessibility tree without layout impact.

Respect prefers-reduced-motion

Wrap all animations in gsap.matchMedia('(prefers-reduced-motion: no-preference)'). Users who have requested reduced motion receive instant state changes with no transitions.

Stagger entrances

When animating a list of elements into view, stagger them at 0.06–0.10s each. This gives the eye a reading path and avoids the jarring simultaneous-appearance effect.