# Agentiv brand & design system > Hire Smarter, Stay Human. One heart, one family of colour: violet to rose. ## Mark Four-facet heart. Each facet is a two-stop gradient, lit from the top right. No glow, outline, rotation or shadow. At 16 px, use four flat facets. - 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 Assets: https://agentiv.md/brand/heart-colour.svg, https://agentiv.md/brand/heart-violet.svg, https://agentiv.md/brand/heart-black.svg, https://agentiv.md/brand/heart-white.svg. Lockups are fixed artwork in https://agentiv.md/brand/lockups/; never rebuild them. ## Colour - Headline gradient: radial-gradient(80% 128%, #6a3cff 0%, #a85fff 50%, #f58fff 100%), drifting over 14 s. One key phrase per headline. - Button gradient: linear-gradient(96deg, #6a3cff, #a85fff, #f58fff). Hover: linear-gradient(96deg, #e86cff, #f9a6ff). - The gradient is only for headlines, primary actions, the mark and blog covers. Never borders, card fills, backgrounds or body text. - Primary (light): #6d4ce6, 5.28:1 on page, 5.49:1 on surface. - Primary (dark): #a97dff, 6.54:1 on page, 6.17:1 on surface. Neutral ramp (violet bias): 50 #fbfaff, 100 #f4f2fb, 200 #e9e6f4, 300 #d9d5e8, 400 #b5b0c9, 500 #8a86a0, 600 #5f5b73, 700 #46425a, 800 #2c2840, 900 #1b1828, 950 #0d0c14. Light roles: Background #fbfaff, Gutter #f4f2fb, Surface #ffffff, Hairline rgba(20,18,33,.08), Line rgba(20,18,33,.14), Faint #8a86a0, Muted #5f5b73, Foreground #141221. Dark roles: Background #0d0c14, Gutter #121019, Surface #15131f, Raised #1b1828, Hairline rgba(244,242,251,.08), Line rgba(244,242,251,.14), Muted #9d98b3, Foreground #f4f2fb. Semantic (light / dark): Success #178f5f / #3ecf8e, Warning #b7791f / #f2b544, Danger #d4383f / #ff6b70, Info #2f6fe4 / #6ea0ff. Chart series: #6a3cff, #f58fff, #19a39a, #e0a000, #2e6bff, #8a86a0. Teal and amber are data colours only. User accents (gradient a → b, solid): Aurora #6a3cff → #f58fff (#7a49ff); Amethyst #6b2fd6 → #b388ff (#7a3fe6); Blossom #c2307f → #ff8ac4 (#d4458f); Crimson #b8303f → #ff8a8a (#c93c4a); Ember #c9552a → #ffae70 (#d4663a); Solar #a8731a → #f5c86a (#b8821f); Tide #2d5bd6 → #7fc3ff (#3366e0); Verdant #1e8a68 → #7fe0b0 (#23997a); Desaturated #6f6a87 → #a9a3bf (#7a7590). Accents re-tint the primary action, focus ring, toggles and chart series 1 only. ## Type Sharp Sans Bold (display) and Google Sans Flex (UI, body, numbers and code-like text). ### App scale | Style | Face | Weight | Size/line | Tracking | | --- | --- | --- | --- | --- | | Display | display | 700 | 28/32 | -.02em | | Title | display | 700 | 22/26 | -.02em | | Heading | sans | 500 | 16/22 | 0 | | Subheading | sans | 500 | 14/20 | 0 | | Body | sans | 400 | 14/21 | 0 | | Small | sans | 400 | 13/19 | 0 | | Caption | sans | 500 | 11/15 | .06em | | Numeric | mono | 500 | 13/18 | 0 | ### Editorial scale | Style | Face | Weight | Size/line | Tracking | | --- | --- | --- | --- | --- | | Display | display | 700 | 64/65 | -.03em | | H1 | display | 700 | 44/48 | -.03em | | H2 | display | 700 | 30/35 | -.025em | | H3 | sans | 500 | 22/29 | -.01em | | Lead | sans | 300 | 20/30 | 0 | | Body | sans | 400 | 17/27 | 0 | | Small | sans | 400 | 15/23 | 0 | | Caption | mono | 500 | 12/17 | .08em | ## Components Controls are 26 px tall. Radii 8 / 12 / 16 px. Hairlines (fg at 8 %) carry elevation; no shadows. ## Motion 150 to 200 ms cubic ease for state changes. Headline gradient drifts over 14 s; the heart beats on a 2.4 s clock. Nothing bounces. Lottie states (100 × 100, one set per accent at https://agentiv.md/brand/motion//agentiv-.json): working (pinwheel, loop), thinking-wave (loop), idle-heartbeat (loop), searching-orbit (loop), polish-brush (loop), polish-lines (loop), notify-envelope-white (once), success-assemble (once), celebrate-pop (once). ## 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. ## Tokens CSS variables: https://agentiv.md/brand/tokens.css --- Human version: https://agentiv.md/brand · Open Agentiv: https://agentiv.app · Index for LLMs: https://agentiv.md/llms.txt