kwill.io

Brand Guidelines

Logos

kwill.io — Lockup
LockupLight background
kwill.io — Lockup (Dark)
LockupDark background
kwill.io — Icon
IconLight background
kwill.io — Icon (Dark)
IconDark background

Color Palette

Primary #e91e8c
Secondary #fb923c
Accent #7c3aed

Primary

50 #fff5f9
100 #ffe7ef
200 #ffd2e2
300 #ffb4d0
400 #ff80b5
500 #fd46a0
600 #e91e8c
700 #c40073
800 #a10b5f
900 #83184e

Secondary

50 #fff7f1
100 #ffefe4
200 #ffe3d1
300 #ffd4b6
400 #ffbb8b
500 #ffa461
600 #fb923c
700 #ca732b
800 #996034
900 #735037

Accent

50 #f8f7ff
100 #ece9ff
200 #dcd4ff
300 #c6b9ff
400 #a88bff
500 #915eff
600 #7c3aed
700 #6a25d2
800 #5a1db4
900 #4d1b9a

Neutral

50 #fafafa
100 #f5f5f5
200 #e5e5e5
300 #d4d4d4
400 #a3a3a3
500 #737373
600 #525252
700 #404040
800 #262626
900 #171717

Typography

Aa
Outfit
Body Text
Aa
Fraunces
Headings
Aa
JetBrains Mono
Code & Monospace

Usage Guidelines

Our Identity

Our brand balances professionalism with approachability. We build software that handles complexity so our customers don't have to - and our visual identity reflects that: clean, confident, and straightforward.


Logo Usage

Lockup is the default logo for most uses - website headers, pitch decks, email signatures, printed materials, and event signage. It includes the wordmark and should never be cropped, rearranged, or recreated.

Icon is for compact spaces - app icons, favicons, social profile pictures, and small-format swag. Always pair it with the company name nearby when the audience may not recognize the icon alone.

Use the color versions on white or light backgrounds. Switch to the white versions when placing on dark backgrounds, photographs, or colored surfaces. Never place the color logo on a busy or low-contrast background.

Clear space: Keep a minimum buffer equal to the icon height on all sides. Don't crowd the logo with other elements.

Don'ts: Don't stretch, rotate, recolor, add drop shadows, or apply effects. Always use the provided files.


Color Guidelines

Primary is the backbone of the brand. Use it for buttons, links, key headlines, and interactive elements. It should be the dominant brand color on any page.

Secondary adds depth and contrast. Use it for dark sections, footer backgrounds, code blocks, and secondary UI surfaces where you need a strong alternative to white.

Accent is the attention-grabber - use it for CTAs, badges, status indicators, and anything that needs to pop. A little goes a long way; don't let it compete with Primary.

Neutral handles everything else: body text, borders, subtle backgrounds, and dividers. Prefer lighter values (50–200) for backgrounds and darker values (700–900) for text. Avoid pure black - use Neutral 900 instead.

Keep the palette restrained. A page should feel polished and focused, not carnival.


Typography

Use the display font for all headings, page titles, hero text, and marketing headlines. Use the body font for paragraphs, UI text, documentation, and everything else.

Maintain clear hierarchy: one heading level per section, consistent sizing, and generous line height. Avoid all-caps except for short labels, badges, or eyebrow text.


General Guidance