Color

The Keel palette pairs deep, moody bases with a small set of bright accents — used to ground interfaces and punctuate them, never to compete with each other.

Logo & Marks

The Keel mark is a five-petal form — three colorway-flexible treatments, built for light backgrounds, dark backgrounds, and flat one-color use.

Usage

Keep the mark legible and untouched — it's the most recognizable piece of the brand.

✓ Do

Use the On Dark or On Light treatment depending on background value, and keep clear space around the mark equal to the height of one petal.

✕ Don't

Don't place the full-color logo on a busy photo, a low-contrast background, or recolor the mark outside the four approved treatments.

Incorrect Usage

Six specific ways the mark gets misused — each demonstrated on the real logo asset, not a mockup.

✕ Don't

Do not rotate the logo from its original position.

✕ Don't

Do not change the line weight or outline of the elements.

✕ Don't

Do not move the arrangement of the logo elements.

✕ Don't

Do not clip, stretch, or squeeze the logo.

✕ Don't

Do not add shadow to logo.

✕ Don't

Do not change the logo typeface.

Patterns & Graphics

Brand patterns, textures, and graphic devices — background treatments, decorative marks, and repeatable motifs that extend the Keel identity beyond the logo.

Illustrations

Custom illustration style — character art, spot illustrations, and scene compositions used across product and marketing surfaces.

Social Posts

Templated social post layouts — headline type, brand pattern, and logo lockup composed together for campaign and announcement content.

Typography

A characterful serif for display moments, paired with a clean, neutral sans for everything that needs to be read at length.

Spacing & Radius

An 8px base unit keeps rhythm consistent across dense UI and generous marketing layouts alike.

Atoms

The smallest functional pieces — indivisible on their own, and the raw material every molecule and organism is built from.

Buttons

8 prominence types × 5 states, pulled directly from the Figma source file. Padding, radius, and typography are shared within each size class; color and emphasis change per type.

Component

Molecules

Small groups of atoms functioning together as a unit — a label plus an input, an icon plus a button.

Organisms

Complex, relatively self-contained sections of an interface — built by combining molecules and atoms.

Templates

Full page layouts — organisms arranged into the actual structures the product ships, with real content dropped in later.

Voice & Tone

How Keel sounds in product, in writing, and in conversation.

1. Empathetic & Human-Centered

   Use language that validates emotion without being overly clinical.

   "We hear you." "Everyone's perspective matters." "Let's find a solution together."

2. Straightforward & Clear

   Avoid jargon. Use plain language.

   "We resolve cases so you can move on with life — no court, no chaos."

3. Confident & Responsible

   Use affirming and assured statements.

   "We guide the session." "We document everything." "Our resolutions stick."

4. Innovative, but Balanced

   Talk about the tech (AI) confidently, but emphasize that it supports, not replaces, the human touch.

   "AI helps us streamline." "Guided by humans." "Our platform and team work together."

Accessibility

Contrast ratios for key text-on-background pairings across the palette. Aim for AA (4.5:1) minimum on body text.

Asset Downloads

Every logo file, ready to drop into decks, docs, and code. Right-click any preview to save, or use the SVG / PNG links.