Brand Design Guidelines

Foundation

Brand Story

Kin is built for your home — and everything that comes with it.

We started by rethinking home insurance so it’s clear, affordable, and backed by people who care. Today, we help homeowners protect and manage more, from coverage to financing, with the same focus on care and simplicity, including proactive guidance to keep you and your home safe. Kin is built to stay — and built for your home.

Foundation

Our Values

These values demonstrate how we conduct ourselves as a company and should inform every creative choice. They are not just words — they are the lens through which we make brand decisions.

Empower customers

Our customers are the heart of everything we do, and every choice we make must add value for them. We're transparent and accurate with both good news and bad so our customers can make informed decisions.

Do the hard thing together

We're here to make sweeping change, and collaboration is the way to achieve our ambitious objectives. We have a strong bias toward action, a will to fix things proactively, and a mindset to get things done.

Embrace change

Redefining an industry takes courage. We have to keep up with a rapidly changing world and our customers' needs. We have to be comfortable with the unknown. Experiment and learn — it's the only way we'll grow.

Visual Guidelines

Logo

The Kin logo is the most visible component of our brand — a custom wordmark with rounded edges and a distinctive period. Consistency in logo usage builds recognition and trust.

The primary logo in motion — yellow wordmark on black. Silent; the encode carries no audio track.

Wordmark vs. brand name in copy: The logo wordmark is set in custom lowercase lettering — kin. — with a period as a deliberate design element. In all written and editorial contexts, the brand name is always capitalized: Kin. Never attempt to replicate the wordmark style in body copy, headlines, or digital text.

Download Logo Files

Logo Variants

Yellow (Primary) — default usage, on black or very dark backgrounds.
White (Reversed) — on dark or photographic backgrounds.
Black (Monochrome) — single-color printing, embroidery, engraving.

Our main brand color is yellow, but the colors used in our logo must prioritize legibility. The black and white versions should be considered equally important as the yellow one.

Spacing & Sizing

Clear space buffers the logo from images, text, or other graphics that would compromise its impact and visibility. The more breathing room you give the logo, the greater the impact it can have.

Specification	Detail
Clear space (minimum)	One n-height of clearance on all four sides of the wordmark. The lowercase n in the logo is the unit — never measure off the period or the cap height.
Clear space (preferred)	Two n-heights where layout allows, especially next to other logos, headlines, or photographic edges.
Digital minimum	60px wide
Print minimum	0.62 inches wide
Contrast requirement	WCAG AA — minimum 3:1 contrast ratio

Tagline Lock-up

The tagline lock-up features our core brand tagline, set in Inter Regular. It uses the period as a spacer and aligns the baseline of the tagline at the bottom. Use it where we want to give more insight into what Kin represents — video end cards, aggregator logo images.

Logo Misuse

The wordmark is built to be left alone. Don’t recolor, redraw, or recompose it. A short list of the most common offenders:

Visual Guidelines

Color

Home and the environment that surrounds it inspired Kin's color palette. Kin Yellow is our signature. Neutrals provide the canvas; accent colors add boldness and functional clarity.

Core Colors

Three colors carry the brand. Every value below is click-to-copy — hex, RGB, CMYK, PMS, and OKLCH.

Kin Yellow

Signature · accent · hero

Warm Black

Type · backgrounds · contrast

White

Canvas · breathing room

Secondary Colors

The secondary palette complements Kin Yellow and was built around our “home and environment” inspiration. Five brand color families expand to 50 shades, supporting visual hierarchy and product states.

Green

Yard, growth

Red

Alert, door

Blue

Sky, water

Purple

Dusk, plum

Orange

Sunset, brick

Color Scale

Each color is built on a 600 anchor and divided into 10 shades. Use 100–200 for background colors, 600 for primary elements, and 800–1000 for text and emphasis. Click any step to copy its hex.

Show values as

HEXRGBCMYKOKLCH

YellowAnchor 600 · #ffc857

NeutralAnchor 1000 · #12120f

OrangeAnchor 600 · #e7562b

GreenAnchor 600 · #277540

RedAnchor 600 · #aa1e1f

BlueAnchor 600 · #266dd9

PurpleAnchor 600 · #841559

Color pairing

A pairing fixes five values at once — background, foreground, container background, container foreground, and the wordmark ink. Pick a swatch to see the recipe and how it composes. Every ratio shown is computed, not estimated.

Get covered in minutes.

Get a quote

Live contrast checker

WCAG AA requires 4.5:1 for body text, 3:1 for large text and UI. Test any pair below — pick from the color picker or enter a custom hex.

Live contrast checkerWCAG 2.1

Foreground

Background

Aa

Clear coverage

Tonal pairing

Tonal themes use values at 200, 600, and 1000 — designed for flexible brand expression, especially on social where users have more brand context. Always verify accessibility before applying.

Yellow

The neighborly way to do home insurance.

Tagline

Green

The neighborly way to do home insurance.

Tagline

Blue

The neighborly way to do home insurance.

Tagline

Best Practices

Color is brand recognition. Stay within the system, lean on contrast, and keep the palette honest. A short list of the most common offenders:

✓ Do

Use Yellow as accent and hero color. Pair it with Warm Black or white for maximum contrast. Validate every pair against WCAG AA before shipping.

✗ Don’t

Use Yellow as a background for long text. Combine Yellow with white. Use more than 2–3 secondary colors in a single composition.

Visual Guidelines

Typography

Kin uses Inter as our sole brand typeface — approachable, versatile, and highly legible at every scale. Its variable font capabilities give us precise control over weight and optical size.


Typeface	Inter (Variable)
Weights	Regular (400) · Medium (500) · SemiBold (600) · Bold (700)
Source	fonts.google.com/specimen/Inter

Type Scale

56px / 700tracking: −2px

Display

40px / 700tracking: −1.5px

Heading 1

28px / 600tracking: −0.5px

Heading 2

22px / 600tracking: normal

Heading 3

18px / 450line-height: 1.7

Body Large — used for intros and featured copy

16px / 400line-height: 1.6

Body — default for paragraphs and most content

14px / 400line-height: 1.5

Body Small — captions inline with body, dense UI, footnotes

12px / 400

Caption — supporting text, labels, metadata

14px / 600ALL CAPS · 1.5px

Overline · Section label

Type Stack

How the type scale assembles into a real piece of Kin marketing. Use these roles — eyebrow, title, sub headline, body, and CTA — as the spine of any campaign, ad, or landing page.

Eyebrow

Inter Medium

14px / 90% / 5%

Keep to one line

Title

Inter Bold

56px / 105% / -1

Sub Headline

Inter Medium

38px / 125% / 0

Body

Inter Regular

16px / 150%

CTA

Inter Medium

16px / 150%

Keep to one line

Save with Kin

Homeowners insurance made for you

For the place you live, and the people you love.

Owning a home is expensive enough when things are going well, but repair bills after significant damage can easily cost thousands of dollars. Expenses like these can be difficult to cover out of pocket, which is where home insurance comes in.

Learn more →

Visual Guidelines

Photography

Photography brings warmth, humanity, and context to our brand. Let three core principles guide every image selection. Using all three isn't required, but aim for at least two.

Rooted

Grounded in real places, real homes, real life — not staged or over-polished.

Warm

Natural lighting, optimistic mood. We are not clinical or cold.

Human

People — diverse and real — are central to our story. Homes exist because people live in them.

Lifestyle Photography

Select editorial photos that tell a story and are relevant to the content. Focus on subjects without excessive visual distractions. Represent a diverse group of people across age, ethnicity, and family structure.

Home Photography

Ensure architectural style reflects the area’s common home style. Homes should appear actively lived in — not vacant real estate listings. Including occupants or families in the foreground is encouraged.

Weather Photography

Use images of weather events as they are happening or in the aftermath. Prefer larger scenes of neighborhoods or natural surroundings for a more neutral perspective. When showing people, avoid imagery of acute distress or despair.

Rounded Corners

Photography on Kin assets always sits in a softly rounded container — never sharp 90° corners. The radius scales with the image so it reads as one design family across every layout.

The rule: Divide the image’s longest side by 20 to find its border radius. A 400px-wide hero gets a 20px radius. An 800px banner gets 40px. A 120px thumbnail gets 6px. When several images sit together at different sizes, average all the radii and apply that single value to every frame so the set reads as one.

Image longest side	Border radius	Common use
80–160px	4–8px	Avatars, thumbnails, inline list images
200–400px	10–20px	Card images, blog thumbnails, spot photography
500–800px	25–40px	Section photography, feature blocks
1000–1600px	50–80px	Hero photography, full-bleed landing imagery
2000px +	100px max	OOH, billboards, very large hero crops

What to Avoid

✓ Do

Choose photography lit with natural light, captured in authentic, unstaged moments. Represent a diverse range of homeowners across age, ethnicity, and family structure, and ground every image in a real local architectural style. Compose editorially — the photo should feel intentional, not catalog. Always place photography in a rounded container using the longest-side-divided-by-twenty rule, and apply the same radius across every image in a layout so the set reads as one family.

✗ Don’t

Don't rely on stock-photo clichés, overly staged scenes, or monolithic demographics, and steer clear of fear-driven weather imagery or heavy filters and artificial color grading. Don't place photography in sharp, 90° corners, and don't over-round images until they read as pills or capsules. Don't mix sharp and rounded corners on the same surface, and don't give every image in a composition a different radius — it breaks the visual rhythm.

Visual Guidelines

Iconography

Icons help users quickly process information and navigate at a glance. In an industry dense with text, our icons are a breath of fresh air — functional, recognizable, and consistent with our brand.

Our icon library: Kin uses Lucide as its foundation — open-source, consistent, and available directly in Figma. When a specific icon doesn’t exist in Lucide, create custom icons following the principles below.

Design Principles

✓ Do

Consistent stroke weight throughout · rounded line caps and joins · simple geometric forms · optically balanced in their bounding box

✗ Don’t

Mix filled and outlined icon styles · vary stroke weights within an icon · use overly detailed or decorative forms · create icons that require explanation

Stroke Weight by Size

Size	Stroke weight	Common use
12px	1px	Inline text, dense UI
16px	1.5px	Form labels, body copy
24px	2px	Default — navigation, buttons
32px	2px	Feature highlights, cards
48–64px	2–2.5px	Hero / display usage

Icon Color

Icons inherit the text color of their context. Default is #12120f. On dark backgrounds, use white or #ffc857 for emphasis. Never use secondary palette colors for icons in product UI.

Visual Guidelines

Illustration

The Kin illustration style is characterized by simple, geometric designs that use tonal shading to distinguish planes and objects. Subtle shadows add dimension without overwhelming the composition.

Style Characteristics

Geometric & Simple

Forms are built from basic geometric shapes. Complexity is avoided in favor of clarity and scalability across all sizes.

Tonal Color

Different planes use varying shades of the same hue to create depth without visual noise. The illustration style adapts from the color palette.

Consistent Line Weight

Line work maintains consistent weight throughout, adding texture and clearly defining edges. Never mix light and heavy strokes in the same illustration.

Illustration Types

Type	Use case	Detail level
Icon Illustrations	UI elements, product icons, small spots	Minimal — functional, few elements
Spot Illustrations	Cards, feature highlights, blog posts	Moderate — story-setting scene
Hero Illustrations	Landing pages, email heroes, marketing	Full — foreground + background scene

Spot illustrations

Small moments with minimal detail — more elements than an icon illustration, less than a hero.

Hero illustrations

Full scenes for surfaces that need a prominent visual, with room for both a foreground subject and a simple background.

Visual Guidelines

Composition

The Kin grid system is modular, providing a framework for organized, visually balanced layouts across all applications.

Margins

To determine margin size, use 10% of the smallest dimension of the design. This ensures consistent breathing room at any canvas size.

Grid System

Context	Columns	Gutter	Margin
Desktop web	12	24px	10% of viewport width
Tablet	8	20px	10% of width
Mobile	4	16px	10% of screen width
Print / OOH	12	—	10% of shortest dimension

Image Containers & Border Radius

To find the correct border radius for a frame: divide the longest dimension by 20. For layouts with multiple containers, calculate the average radius and apply it consistently across all frames. The same rule, with a size reference table, is set out under Rounded Corners in Photography.

Visual Hierarchy

Use type scale, color weight, and spacing to signal importance. The most critical information is largest and appears highest on the page. Supporting content recedes visually. Decoration must never compete with content.

Product Overlays

To enhance storytelling within photography, incorporate abstract UI elements — pill-shaped components, quote callouts, or funnel state indicators. These overlays should feel native to the product and add meaning rather than visual noise.

Logo Placement

Logo spacing should generally be slightly less than the surrounding margin space. Rely on optical judgment rather than strict measurement — the logo should feel balanced in its context, not mechanically placed.

Writing Guidelines

Voice & Tone

Our brand voice expresses our personality. It stays consistent across every touchpoint, while our tone adjusts to the context and emotional state of our audience.

Brand Positioning

Every piece of Kin copy should reflect all three of these positioning pillars:

Reliable

Financially sound, committed to customers and communities.

Modern

Data-powered technology that makes protection fair and efficient.

Personal

Built on care, clarity, and genuine partnership.

The Four Content Pillars

Every piece of copy should connect to one or more of these pillars. If it doesn’t, reconsider it.

1 · Care like Kin

Empathy, customer service, claims support. Show care through action, not just words.

2 · Clear, fair, and in your control

Transparency, pricing, UX. Customers leave feeling informed and empowered — never confused.

3 · Built for homes like yours

Market presence, underserved communities, local relevance. Start with the person, not the product.

4 · Smart made simple

Technology, self-service, speed. Data and efficiency in service of the customer — never ends in themselves.

Our Voice

Kin sounds like a knowledgeable neighbor who tells it to you straight. Warm but not saccharine. Clear but not cold. Confident but not arrogant.

The test: Read it out loud. Would a normal person say those words talking about their home with a friend? If not, rewrite it.

✓ Do

“Your home is covered up to $350,000 — and here's exactly what that means for you.”

✗ Don’t

“Per your policy documentation, dwelling coverage limits are subject to applicable state-mandated maximums.”

✓ Do

“We don't think buying home insurance should feel like a second job.”

✗ Don’t

“Our streamlined end-to-end digital platform optimizes the insurance acquisition experience.”

✓ Do

“We've added this coverage because it protects you from unexpected out-of-pocket costs.”

✗ Don’t

“An endorsement has been added to your policy per standard underwriting guidelines.”

Tone by Context

Voice is who we are. Tone is how we show up in a given moment. The worse the news, the more intentional and warm the communication.

Context	How we sound	Example
Website / Marketing	Clear, confident, trustworthy. A breath of fresh air in a stale industry.	“Get coverage you can understand.”
Email / Lifecycle	Helpful, personal, proactive. Walk people through what they need to know.	“We’ll walk you through what’s covered.”
Product / App	Helpful, efficient, warm. Get people where they need to go without friction.	“Let’s get your home covered. It’ll take about 5 minutes.”
Customer Support	Calm, empathetic, solution-focused. Lead with the fix, not the policy.	“We’ve got you. Let’s take care of this.”
Claims	Human first. Be proactive, not procedural.	“We’re on it. Your adjuster will reach out within 24 hours.”
Social Media	Friendly, witty, neighborly. We can have personality without losing credibility.	“Insurance your group chat would approve.”
Legal / Compliance	Precise and accessible. Even required disclosures should be plain English where possible.	“Coverage limits vary by state. See your policy for full details.”

Phrase Playbook

When in doubt, these approved phrases have been tested against both brand and tone guidelines:

Care + empathy

Care that shows up and follows through
Real help when it matters most
Support that feels personal because it is

Clarity + transparency

Clarity that builds confidence
Insurance that makes sense
Coverage you can understand and trust

Technology + humanity

Smart protection powered by people who care
Digital when you want it, personal when you need it

Financial + future-ready

Affordable, lasting homeownership
Consistent support from one trusted team
From coverage to financing, built to help you stay secure

Consistent Voice Rules

✓ Always

Use contractions (it's, we're, you'll). Write in active voice. Use concise sentences. Lead with why before what. Partner language — Kin is on the customer's side, even when enforcing rules.

✗ Never

Use fear or anxiety as a primary motivator. Write in passive voice. Use insurance jargon without explaining it. Sound like a gatekeeper. Use generic empathy where real context would do more work.

Writing Guidelines

Writing Style Guide

A consistent writing style makes Kin feel like a unified brand no matter who's holding the pen. Follow these rules for any customer-facing copy: ads, product, social, email, or documentation.

Capitalization

Rule	Do this	Not this
Brand name in copy	Kin	~~KIN or kin~~
Logo wordmark	kin. (lowercase with period — in logo files only)	~~Replicating “kin.” in body copy or headlines~~
Headlines	Sentence case — “Home insurance made simple”	~~Title Case — “Home Insurance Made Simple”~~
CTAs / buttons	Sentence case — “Get a quote”	~~All caps — “GET A QUOTE”~~
Product references	Kin app, Kin quote, Kin policy	~~The App, The Quote Tool~~
Insurance terms	dwelling coverage, liability, deductible	~~Dwelling Coverage, Liability~~

Punctuation

Rule	Do this	Avoid
Oxford comma	Coverage for your home, belongings, and liability	~~…belongings and liability~~
Em dash	Use — with spaces — for asides	~~Use—without spaces~~
Exclamation points	Rarely. Maximum one per piece.	~~Multiple!! Points!!~~
Ellipsis	Sparingly in conversational UI copy	~~Trailing off in formal copy…~~
Ampersand	Only in navigation, headers, or brand-approved names	~~In body copy as a substitute for “and”~~

Numbers & Data

Rule	Do this	Notes
Numbers 1–9	Spell out: one, two, three	Except in UI, tables, specs, or data
Numbers 10+	Use numerals: 10, 25, 100	Always use numerals for prices
Percentages	Use %: 15% discount, save 20%	Always numerals with %
Dollar amounts	$1,200/year · $100/month	Include comma for thousands
Time	5 minutes, 24 hours, 3 business days	Don’t abbreviate “1 hr” → “1 hour”

Brand Lexicon

✓ Use these

simple · real · clear
secure · reliable · steady
transparent · fair · honest
helpful · personal · confident
home · coverage · covered
protect / protected
community / neighbor
easy · modern

✗ Avoid these

~~disruptive / disruption~~
~~next-gen / revolutionary~~
~~cutting-edge / state-of-the-art~~
~~game-changing / transformative~~
~~innovative (as a buzzword)~~
~~industry-leading / best-in-class~~
~~seamless / streamlined~~
~~just / simply (minimizing)~~
~~very / really (filler)~~
~~amazing / incredible (overused)~~
~~synergy / leverage / utilize~~
~~technical (as a descriptor)~~

Insurance Jargon Replacement

Never use insurance industry terms in customer-facing copy without a plain-language equivalent. When in doubt, use the plain version.

Insurance term	Use this instead
Dwelling	Home
Personal property	Belongings
Peril	Risk
Premium	What you pay
Endorsement	Add-on
Named insured	You
Covered loss	When something happens
Policy period	Your coverage year
Carrier / insurer	Insurance company
Coverage is afforded	You’re covered
Uninhabitable	Can’t be lived in

Be Specific

✓ Specific

“Trusted by homeowners across 11 states” — gives a real, checkable claim.

✗ Vague

“Trusted by thousands of homeowners” — adds no useful information.

Inclusive Language

Write for everyone. Use “they/them” as a singular pronoun when gender is unknown. Avoid gendered assumptions about homeowners. Represent diverse family structures in examples and photography. Avoid idioms that may not translate across cultures or regions.

Link Text

✓ Do

Descriptive link text: “Learn how dwelling coverage works” · “View your policy details”

✗ Don’t

Vague link text: “Click here” · “Read more” · “Learn more” (alone, without context)

Copy Best Practices

These principles apply to all customer-facing copy — from a push notification to a renewal letter.

Principle	What it means
Lead with why	Before stating a rate change, coverage update, or required action — explain the context. Don’t bury the reason in a footnote.
Partner language	Kin is on the customer’s side, even when enforcing rules. “To keep your coverage active, we’ll need…” beats “You are required to…”
Calibrate to severity	The worse the news, the more intentional and warm the communication. Don’t apply flat, functional tone to high-stakes moments.
Explain the benefit	Reframe changes as things Kin is doing to protect or benefit the customer. “We’ve added this because it protects you from…” beats passive framing.
Think emotionally	What is the customer feeling when this arrives? Good copy moves them from anxiety or confusion toward understanding and action.
Use real context	Generic empathy is weak. Real reasons — like specific market conditions or named risks — do more work than abstract warmth.
Remove friction	Limit action items and documentation requirements to what’s genuinely necessary. Long unexplained lists create anxiety and abandonment.
Write like a person	Read it out loud. Would a normal person say those words to a friend talking about their home? If not, rewrite it.