Brand & design system
Hire Smarter, Stay Human.
One heart, one family of colour. The four facets now move from violet to rose instead of fighting each other: calmer in the sidebar, cleaner at 16 px, and honest in pure black and white.
01
The heart mark
Geometry is unchanged. Only colour moved: each facet carries a gentle internal gradient, and all four read as one object lit from the top right. The two lower facets sit two value steps apart so the centre seam survives at 16 and 24 px.
Facet stops
Each facet is a two-stop linear gradient.
Upper left · soft violet
#8f70ff → #9a74ff
Upper right · rose, lit
#f382ff → #f68dff
Lower left · deep purple, shadow
#5f41cf → #3a2690
Lower right · mid lilac
#a85fff → #7a49ff
App icon
Light and dark
Rounded square, 22 % radius, mark at 62 % of the tile. No glow.
Favicon
agentiv.app · agentiv.md
At 16 px the internal gradients are dropped: four flat facets, each at its gradient's mid value, so the seams stay crisp on a 16-pixel grid.
Lockups
Supplied as fixed artwork. Never rebuild them from the mark and type.
The heart stands 1.2× the wordmark's full height, centred on it.
Product lockups
Product name in the brand gradient
included
add-on
add-on
add-onNotetaker keeps its Ovo serif as the one editorial exception. Search, Interview and Prospect are paid add-ons and share one gradient treatment. Minimum size: 16 px digital, 24 px in the sidebar, 6 mm in print; clear space is half the mark's width on every side.
LinkedIn & link previews
Logo 400 × 400 · banner 1128 × 191 · OG 1200 × 630
The logo tile is the dark backdrop with the heart at 58 %; LinkedIn crops it to a circle, so nothing sits near the edge. The banner carries only the lockup. Posts and link previews use the tagline treatment, with the gradient on “Stay Human.” only.
02
Colour
Everything descends from violet #6a3cff, lilac #a85fff and rose #f58fff, sampled from the mark. The gradient is reserved for headlines, primary actions, the mark and blog covers. Borders, cards, backgrounds and body text never carry it.
Headline gradient
radial 80% 128% · #6a3cff 0 · #a85fff 50 · #f58fff 100
Drifts slowly across the text. Stops match the mark.
Button gradient
linear 96deg · same three stops
Hover slides to a warmer rose, never to amber.
Button hover
linear 96deg · #e86cff → #f9a6ff
Glow rgba(106,60,255,.25).
Primary · light
#6d4ce6
- On page
- 5.28:1
- On surface
- 5.49:1
- Text on primary
- 5.49:1
Primary · dark
#a97dff
- On page
- 6.54:1
- On surface
- 6.17:1
- Text on primary
- 6.41:1
Neutral ramp
Faint violet bias · hairline is fg at 8 % alpha
Light roles
Dark roles
Semantic
Calm; success is green, never violet
Success
#178f5f · #3ecf8e
Warning
#b7791f · #f2b544
Danger
#d4383f · #ff6b70
Info
#2f6fe4 · #6ea0ff
Chart palette
6 categorical, led by violet and rose
Teal and amber appear only here, as series 3 and 4. They are data colours, not brand colours. Lightness alternates so adjacent series separate for deutan and protan vision.
Backdrops
Bot avatar, sign-in, empty states. Two glows on the mark's diagonal.
User-pickable accents
Each a 2-stop gradient plus a solid, at Aurora's saturation. Try them in Your style below.
Aurora
#6a3cff #f58fff
Amethyst
#6b2fd6 #b388ff
Blossom
#c2307f #ff8ac4
Crimson
#b8303f #ff8a8a
Ember
#c9552a #ffae70
Solar
#a8731a #f5c86a
Tide
#2d5bd6 #7fc3ff
Verdant
#1e8a68 #7fe0b0
Desaturated
#6f6a87 #a9a3bf
03
Type
Sharp Sans Bold for headlines, tight tracking. Google Sans Flex for everything else: UI and body at 13 to 14 px in the app, 16 to 17 px when reading, plus numbers and anything code-like.
Hire Smarter, Stay Human.
AI Native, Recruiting OS.
Gradient on the key phrase only. One phrase per headline, never the whole line.
App scale · dense UI
Editorial scale · blog, manifesto, brand
04
Components
Compact SaaS parts at 26 px. Hairlines carry elevation; there are no shadows. Only the primary button, focus ring, toggles and selected states take colour. Previewing Aurora.
Light · #fbfaff
Amara Lindqvist
Staff Engineer · Stockholm
Open roles
14
+3 this week
Dark · #0d0c14
Amara Lindqvist
Staff Engineer · Stockholm
Open roles
14
+3 this week
05
Your OS, your style.
Every recruiter picks a mode and an accent. The accent re-tints the primary action, focus ring, toggles, the heart and chart series 1, and nothing else. Surfaces, text and hairlines stay put.
Senior Backend Engineer
Pipeline this month30 days
Preview only. The app reads data-accent and data-theme on <html>; tokens live in tokens.css. accent · aurora · mode · dark
06
Motion
150 to 200 ms cubic ease for state changes. The headline gradient drifts over 14 s; the heart beats on a 2.4 s clock. Nothing bounces. Pick an accent above and every state re-tints.
Motion states
Lottie, 100 × 100 · facets follow the user's accent · currently Aurora
Loops run 2 to 5 s on a cubic ease with no bounce. Notify, Success and Celebrate play once; hover or tap to replay.
07
Tokens
CSS variables, light by default with a dark override. This is the file the codebase imports.
/* Agentiv brand — colour tokens. Light is default; [data-theme="dark"] overrides. */
:root{
/* brand gradient */
--brand-violet:#6a3cff; --brand-lilac:#a85fff; --brand-rose:#f58fff;
--brand-gradient-text:radial-gradient(80% 128% at var(--gx,20%) var(--gy,30%),#6a3cff 0%,#a85fff 50%,#f58fff 100%);
--brand-gradient-button:linear-gradient(96deg,#6a3cff 0%,#a85fff 50%,#f58fff 100%);
--brand-gradient-hover:linear-gradient(96deg,#e86cff 0%,#f9a6ff 100%);
--brand-glow:rgba(106,60,255,.25);
/* mark facets */
--mark-ul-a:#8f70ff; --mark-ul-b:#9a74ff; --mark-ur-a:#f382ff; --mark-ur-b:#f68dff;
--mark-ll-a:#5f41cf; --mark-ll-b:#3a2690; --mark-lr-a:#a85fff; --mark-lr-b:#7a49ff;
/* neutral ramp (violet bias) */
--n-50:#fbfaff; --n-100:#f4f2fb; --n-200:#e9e6f4; --n-300:#d9d5e8; --n-400:#b5b0c9; --n-500:#8a86a0;
--n-600:#5f5b73; --n-700:#46425a; --n-800:#2c2840; --n-900:#1b1828; --n-950:#0d0c14;
/* roles — light */
--bg:#fbfaff; --gutter:#f4f2fb; --surface:#ffffff; --raised:#ffffff;
--fg:#141221; --muted:#5f5b73; --faint:#8a86a0;
--hairline:rgba(20,18,33,.08); --line:rgba(20,18,33,.14);
--primary:#6d4ce6; --primary-fg:#ffffff; --ring:rgba(109,76,230,.4); --link:#6d4ce6;
--selection:rgba(224,29,159,.18);
--success:#178f5f; --warning:#b7791f; --danger:#d4383f; --info:#2f6fe4;
--success-bg:rgba(23,143,95,.12); --warning-bg:rgba(183,121,31,.12); --danger-bg:rgba(212,56,63,.12); --info-bg:rgba(47,111,228,.12);
--chart-1:#6a3cff; --chart-2:#f58fff; --chart-3:#19a39a; --chart-4:#e0a000; --chart-5:#2e6bff; --chart-6:#8a86a0;
--radius-sm:8px; --radius:12px; --radius-lg:16px;
/* backdrops — bot avatar, sign-in, empty states */
--backdrop-dark:radial-gradient(60% 80% at 100% 0%,rgba(106,60,255,.22),transparent 70%),radial-gradient(55% 70% at 0% 100%,rgba(245,143,255,.12),transparent 70%),#0d0c14;
--backdrop-light:radial-gradient(60% 80% at 100% 0%,rgba(106,60,255,.10),transparent 70%),radial-gradient(55% 70% at 0% 100%,rgba(245,143,255,.14),transparent 70%),#fbfaff;
--backdrop-void:linear-gradient(135deg,#320064,#010105);
}
[data-theme="light"]{
--bg:#fbfaff; --gutter:#f4f2fb; --surface:#ffffff; --raised:#ffffff;
--fg:#141221; --muted:#5f5b73; --faint:#8a86a0;
--hairline:rgba(20,18,33,.08); --line:rgba(20,18,33,.14);
--primary:#6d4ce6; --primary-fg:#ffffff; --ring:rgba(109,76,230,.4); --link:#6d4ce6;
--selection:rgba(224,29,159,.18);
--success:#178f5f; --warning:#b7791f; --danger:#d4383f; --info:#2f6fe4;
--success-bg:rgba(23,143,95,.12); --warning-bg:rgba(183,121,31,.12); --danger-bg:rgba(212,56,63,.12); --info-bg:rgba(47,111,228,.12);
--chart-1:#6a3cff; --chart-2:#f58fff; --chart-3:#19a39a; --chart-4:#e0a000; --chart-5:#2e6bff; --chart-6:#8a86a0;
}
[data-theme="dark"]{
--bg:#0d0c14; --gutter:#121019; --surface:#15131f; --raised:#1b1828;
--fg:#f4f2fb; --muted:#9d98b3; --faint:#6f6a87;
--hairline:rgba(244,242,251,.08); --line:rgba(244,242,251,.14);
--primary:#a97dff; --primary-fg:#120a2a; --ring:rgba(169,125,255,.45); --link:#a97dff;
--selection:rgba(255,86,196,.22);
--success:#3ecf8e; --warning:#f2b544; --danger:#ff6b70; --info:#6ea0ff;
--success-bg:rgba(62,207,142,.14); --warning-bg:rgba(242,181,68,.14); --danger-bg:rgba(255,107,112,.14); --info-bg:rgba(110,160,255,.14);
--chart-1:#a85fff; --chart-2:#f9a6ff; --chart-3:#3ad3c6; --chart-4:#ffc24d; --chart-5:#6ea0ff; --chart-6:#9d98b3;
}
/* user-pickable accents: floor → band, plus a solid */
[data-accent="aurora"]{--acc-a:#6a3cff;--acc-b:#f58fff;--acc:#7a49ff}
[data-accent="amethyst"]{--acc-a:#6b2fd6;--acc-b:#b388ff;--acc:#7a3fe6}
[data-accent="blossom"]{--acc-a:#c2307f;--acc-b:#ff8ac4;--acc:#d4458f}
[data-accent="crimson"]{--acc-a:#b8303f;--acc-b:#ff8a8a;--acc:#c93c4a}
[data-accent="ember"]{--acc-a:#c9552a;--acc-b:#ffae70;--acc:#d4663a}
[data-accent="solar"]{--acc-a:#a8731a;--acc-b:#f5c86a;--acc:#b8821f}
[data-accent="tide"]{--acc-a:#2d5bd6;--acc-b:#7fc3ff;--acc:#3366e0}
[data-accent="verdant"]{--acc-a:#1e8a68;--acc-b:#7fe0b0;--acc:#23997a}
[data-accent="desaturated"]{--acc-a:#6f6a87;--acc-b:#a9a3bf;--acc:#7a7590}
/* accent-tinted marks (assets/brand/marks/) */
[data-accent="aurora"]{--acc-heart:url(marks/heart-aurora.svg)}
[data-accent="amethyst"]{--acc-heart:url(marks/heart-amethyst.svg)}
[data-accent="blossom"]{--acc-heart:url(marks/heart-blossom.svg)}
[data-accent="crimson"]{--acc-heart:url(marks/heart-crimson.svg)}
[data-accent="ember"]{--acc-heart:url(marks/heart-ember.svg)}
[data-accent="solar"]{--acc-heart:url(marks/heart-solar.svg)}
[data-accent="tide"]{--acc-heart:url(marks/heart-tide.svg)}
[data-accent="verdant"]{--acc-heart:url(marks/heart-verdant.svg)}
[data-accent="desaturated"]{--acc-heart:url(marks/heart-desaturated.svg)}
08
Do, don't
The short list. When in doubt, use less colour.
Do
- Use the gradient on one key phrase, the primary button, the mark and blog covers.
- Use the one-colour violet heart in favicons, email and print.
- Keep elevation in the hairline: stronger border, slightly brighter surface.
- Pick the dark-mode primary (#a97dff) on dark surfaces; it clears 6:1.
- Show fit as a band (Strong, Good, Partial, Weak), not a number.
Don't
- Put the gradient on borders, card fills, backgrounds or body text.
- Reuse the old mark gradient (cyan, cobalt, ultraviolet, pulse, ember).
- Add glow, outline, rotation or drop shadow to the heart.
- Re-tint the colour heart per accent. Only buttons, rings and dots re-tint.
- Use sparkle icons, emoji, neon or rainbow gradients, or stock photos.
Agentiv brand · updated October 2026 · set in Sharp Sans and Google Sans Flex.