Brand identity · v2
Benefity brand guidelines
A quiet, orderly interface where a single electric violet does all the heavy lifting. Chartreuse is used only like a "receipt": in small, eye-catching moments.
Logo
The logo is a wordmark only: lowercase benefity. The brand's signature is the diamond; it isn't part of the logo and appears only in specific places, like the icon. The diamond is the target: the rank you aim for in SEO, the visitor you aim for with a widget.
Icon: favicon, app icon, avatar.
Clear space: at least half the wordmark's height on every side.
Wordmark
Plus Jakarta Sans Bold (700), letter spacing −2.5%. Converted to outlines, so it looks the same before the font loads.
Diamond
The signature mark: a square rotated 45° with slightly rounded corners. Not in the logo, only in specific places like the icon; chartreuse on dark or violet.
Icon
A "b" and a chartreuse diamond on a violet tile. ExtraBold (800): one weight heavier than the wordmark so it reads at small sizes.
40 px
28 px
20 px
16 px · minimum
Colors
Electric Violet
--color-violet
The single primary action color: filled buttons, links, selected states.
Voltage
--color-voltage
Violet's softer side: highlights, charts, accents on dark.
Lilac Wash
--color-lilac
Soft section background, selected menu item, icon tile.
Periwinkle
--color-periwinkle
Thin violet-tinted lines, form borders.
Chartreuse Receipt
--color-chartreuse
The "receipt": published badge, headline marker, dark-card accent. Never fills large areas.
Bone Canvas
--color-canvas
Page background: warmer than pure white, easy on the eyes.
Obsidian Ink
--color-ink
Main text color, dark buttons.
Midnight Surface
--color-midnight
Dark showcase cards (at most one per page).
Powder Blue
--color-powder
Informational states ("needs review"), small badges.
Muted
--color-muted
Secondary text (AA contrast on white).
Aa Ğğ Şş İı
Plus Jakarta Sans · 700–800
Headings only. Letter spacing −3.5%, line height 1.0.
Aa Ğğ Şş İı
Inter · 300 / 400 / 500 / 600 / 700
Body copy, buttons, labels. The subtext under a heading is weight 300: the heavy heading "shouts", the light text "whispers".
Do
- One filled button color: Electric Violet. Other actions are outlined or text links.
- Separate cards with a thin violet-tinted line, not a shadow. 20px corners.
- All buttons are pill-shaped (fully rounded corners).
- Use the dark Midnight card at most once per page, as a showcase.
- Use chartreuse like a receipt: the published badge, a headline marker, progress on a dark card.
- Always use the "benefity" wordmark as the logo, never smaller than 16 px. The diamond only in specific places like the icon.
Don't
- Don't add a second primary action color.
- Don't use chartreuse for body text, icons or large backgrounds.
- Don't use Inter for headings or Plus Jakarta Sans for body copy.
- Don't rotate, shadow or recolor the logo, and don't add a dot, diamond or any other symbol next to it.
- Don't set the icon next to the wordmark: it's one or the other. The icon is for square spaces only.
- Don't put a borderless white card on Bone Canvas (the two whites blend together).