A working inventory of the color, typography, radius, button and voice styles used across the Honeit marketing site: Solutions, Platform, Trust and About. It records what is on the pages today and where we should consolidate.
Pages: Solutions · Platform · Trust · About · Typeface: Urbanist · Compiled July 2026
01 · Logo
Logo library
The Honeit logo is the wordmark with the accent dot over the "i", plus a standalone mark for icons and avatars. Every file below is the original SVG artwork, renamed for clarity. Pick by background: navy and green for light surfaces, white and mint for dark surfaces.
Full Logo (Wordmark)
Primary · Navy and green
Honeit_Logo_Primary_Navy_Green.svg
Light backgrounds. The primary logo. Navy wordmark with the green accent dot, for white and light gray surfaces.
The navy wordmark with the green dot on light backgrounds, or the white wordmark with the mint dot on dark. Use these first, in every default case.
Secondary and alternate
Black, white, grayscale and gray dot versions. Use only when color is unavailable or a quieter, single color treatment is needed.
Standalone mark
The H tile. Use for app icons, favicons and avatars, or where the full wordmark is too small to stay legible. Never rebuild the wordmark from the mark.
Clear space
Keep clear space around the logo equal to the height of the "H" on all four sides. Nothing, text or graphics, enters that zone.
120px24px
Minimum size
Do not use the wordmark below 120px wide on screen, or the mark below 24px. Below this the dot and letters lose clarity.
Approved backgrounds
Navy and green on white or light gray. White and mint on navy or dark photography. Keep strong contrast between the logo and its background.
Incorrect Usage
DON'TStretch or distort the proportions.
DON'TCondense or squash the logo.
DON'TRotate or tilt the logo.
DON'TRecolor the wordmark or the dot.
DON'TAdd shadows, glows or effects.
DON'TPlace a low contrast logo on a busy or clashing background.
DON'TMove, resize or detach the dot from the wordmark.
02 · Color
Color palette
Three of the four pages already share a set of CSS variables. The brand runs on one deep navy foundation with a mint and teal accent; greys handle body copy and structure. A secondary palette (blue, violet, aqua and rose) adds color inside the illustrations. The same system carries Solutions, Platform, Trust and About.
Brand Foundation
Navy
#010028
The one dark. Nav, hero, dark sections, footer, all headings and body text, and the dark button.
Accent: Mint and Teal
Mint (primary)
#00F5B4
Primary button, top nav demo button, bottom CTA band, bullet dots, checkmarks and stat numbers.
Teal
#00BFAE
Section eyebrow tags, workflow numbers, icon strokes and small labels.
These two also use soft mint derivatives (mint tint #EAFDF6, brand green #00A87D, soft mint #9FE9D3) for depth, not as brand tokens.
Secondary Colors · Illustration Accents
A secondary palette introduced in the animated illustrations to bring color into the data — bars, tags, waveforms and status marks — so the graphics read beyond mint alone. Accents only: never for brand chrome, buttons or body text.
System Blue
#3B82FF
Verified checks, timeline dots, score bars, blue tags and the Interview Intelligence record.
Violet Pulse
#6C5CFF
AI summary, scorecards, recommendation labels and violet competency tags.
Aqua
#14E6D4
Audio soundbite waveforms and the mint-to-aqua gradient end.
Deep Mint
#0AA88F
Readable mint on white: dark-mint text, timers, key-moment labels and small checkmarks.
Rose
#F0455F
Risk and alert: HR lifecycle risk flags and exit-interview signals.
Each accent pairs with a soft background tint behind chips and highlights: blue #EAF1FF, violet #EFEBFF, aqua #E4FBF7, mint #EAFDF6. Connector lines use soft #9FE9D3, #BBD3FF and #D6CFFF.
Neutrals: Text Greys
Grey / dark
#3D4160
The --muted token. Chip text, feature descriptions and list items.
Grey / mid
#5B6076
Secondary and muted text.
Grey / light
#8B91A3
Metric labels and units, channel tags, timestamps and the smallest captions.
Surfaces and Lines
White
#FFFFFF
Base page and card backgrounds.
Gray surface
#F5F7FA
The --gray token. Alternating section background and tinted panels.
Border
#E0E4EE
The one line color for card borders, dividers, separators and thin rules.
One typeface, Urbanist, across weights 400 to 800. Headings sit at 700 to 800; body copy at 15 to 18px. Sizes below step down on mobile (≤768px) as noted.
Primary Typeface
Urbanist
Geometric sans serif, from Google Fonts. Loaded weights: 400, 500, 600, 700, 800 and 400 italic.
Everything your team needs to schedule, capture, score and submit talent.
Section body18 / 400 lh 1.7
You get one connected platform so your team can work faster and stay aligned.
Card title18 / 700
Interview intelligence
Body15 / 400 lh 1.65
Structured scoring tied to the criteria your team defined before the interview started.
Small / chip13 / 500
Searchable transcript in 23 languages
Eyebrow12 / 600 teal
The Platform
Micro label11 / 600 grey
Time to submit
Stat / metric32 to 36 / 800
1,200+
04 · Radius
Corner radius
The pages currently use twelve different radius values. Consolidate to the four steps below.
Small
8px
Chips, tags, small controls and inline marks.
Card
14px
Cards, image frames and panels.
Large
20px
Feature blocks and large containers.
Pill
999px
Buttons, the nav bar and status pills.
05 · Buttons
Buttons and interactive elements
Solutions, Trust and About share one .btn system: a pill base at 15px, weight 600, padding 12px 24px, with three color variants. The nav uses a smaller demo pill, and a Learn More text link handles inline calls to action — its arrow slides right on hover. Every pill below is the same size; only the color changes.
Rule of one: each screen exposes a single primary action. Mint carries it; navy and outline are for secondary actions. On the mint CTA band the primary button flips to navy for contrast.
06 · Chips and Tags
Chips and tags
Static labels that enumerate capabilities and channels.
Two tiers on one outlined 24px grid, round caps and joins throughout. Primary feature icons are navy with a small four-point spark and lead the feature rows and section headers. Secondary utility icons are teal and sit inline to label channels, security points and workflow steps.
Primary icon set · Navy feature icons
Interview record
Submit
Search & reuse
Secondary icon set · Teal utility icons
Phone
AI capture
Interview
Submission
Video
Messaging
Security
Team
Compliance
Encryption
Color variants
Navy · high emphasis
#010028
Teal · default accent
#00BFAE
White · on dark
#FFFFFF
Navy is the primary feature-icon color on light surfaces, teal the secondary utility accent, white on dark sections. Same artwork, same 1.5 stroke, only the color changes.
Navigation menu icons
One navy icon per menu item, each matched to its meaning and set on a light-gray rounded tile — same outlined 24px grid as the rest of the set, no color tints. Titled by the menu it lives in so it maps straight to the navigation.
Solutions menu
Recruiting Firms
Briefcase
Internal TA Teams
Team of people
HR and People Ops
Employee ID badge
Resources menu
Case Studies
Speech bubble
Honeit Podcast
Microphone
Blog
Bookmark
Style · Weight · Color · Ideology
Style
Outlined, never filled. Simple geometric line icons drawn on a 24px grid, echoing the clean geometry of the Urbanist wordmark. One set only, no mixed libraries.
Weight
1.5px stroke with round caps and joins. The weight stays even so an icon never reads heavier than the text beside it. Menu tile icons step up to 2px at their smaller size.
Color
Navy #010028 for primary feature icons on light, teal #00BFAE for secondary utility icons, white on dark sections. Navigation menu icons sit navy on a light-gray tile. One color per icon, never multicolor.
Ideology
Icons support the words, they do not decorate. Calm, modern and consistent, so a recruiter scans meaning at a glance and the interface stays quiet. When in doubt, leave it out.
Rules: keep icons outlined, filled only for the small four-point spark on primary icons. Primary feature icons are navy #010028, secondary utility icons teal #00BFAE, at 1.5 on a 24px box, or white on dark sections. Match visual weight to the text beside them and do not mix in another icon library.
08 · SVG Animation
Animated illustrations
Product illustrations are inline SVGs that build as they enter view. Each sits on a white rounded card with navy line art, a mint base and a secondary blue, violet and aqua palette in the data, and its parts fade and grow into place so the story assembles the moment it scrolls on screen.
Candidate scorecard
Communication92
Leadership95
Problem solving88
Recommended to Advance
Motion vocabulary
fade-upText, headings and rows rise a few pixels while fading in.
fade-leftList items slide in from the left as they appear.
scaleXScore bars and progress fills grow from the left edge, each in its accent color (mint, blue, violet).
scaleYAqua waveform bars grow up from the baseline, staggered.
scaleTags, badges and buttons pop from 85% to full size.
How it works: each illustration plays its build once when it scrolls into view, triggered by an IntersectionObserver rather than looping or autoplaying on load. Timing uses an ease out cubic curve with a small stagger between elements. The looping demo above is a simplified preview of the same vocabulary.
09 · Hierarchy
Emphasis hierarchy
How the pieces rank on any given screen, from the single loudest element down to structural detail. Use this to decide what gets mint, what gets navy, and what stays grey.
Tier 1 Loudest
Primary action and hero headline
One per screen. The mint button plus the 72px navy or white headline. The mint CTA band is the page's single loudest block.
Tier 2 Structure
Section headings and teal eyebrows
42px heading in navy, introduced by a 12px teal eyebrow. Establishes each section; never competes with the hero.
Tier 3 Content
Card titles, body copy and key numbers
18px bold titles, 15 to 18px grey body, and 32 to 36px stat numbers (navy on light, mint on dark). The substance of each section.
Tier 4 Detail
Chips, tags, labels and dividers
11 to 13px chips and tags, 11px grey micro labels, thin borders (#E0E4EE). Supporting metadata and structure only.
Section rhythm: backgrounds alternate white to #F5F7FA gray to white, punctuated by full #010028 dark sections and the mint CTA band, so color, not just spacing, signals where one section ends and the next begins.
10 · Tone of Voice
Tone of voice
Honeit writes with a clarity first framework. Every line earns its place by making the reader's next decision easier. We write for busy recruiters and hiring teams, so we choose plain words, concrete outcomes and real proof over hype.
The User Is the Hero
The recruiter is the hero of every page. Honeit is the guide.
Our copy never claims the spotlight. It names the problem the user feels, shows them what they can now do, and hands them a clear path forward. Honeit is the tool that makes the user look good to their hiring managers. It is never the star of the story.
The Clarity First Framework
1. Clarity first
Say the useful thing first. If a sentence needs a second read, cut it or split it in two.
2. The user is the hero
Lead with what the user gains. Frame every feature as their new ability, not our achievement.
3. Concrete over abstract
Real numbers, real outcomes, real audio. Show the thing instead of describing it.
4. Plain and human
Short words, short sentences, active voice. Write the way you would explain it to a colleague.
5. Honest, no hype
No buzzwords, no inflated claims. Confidence comes from specifics, not adjectives.
6. Respect the reader's time
Every screen answers one question. Cut anything that does not move the reader forward.
Voice in Practice
Instead Of
Leverage next generation AI to revolutionize your hiring funnel.
Our platform empowers best in class talent intelligence.
Unlock synergies across the candidate lifecycle.
Write
Hear the real answer, then submit the candidate in one click.
See what a candidate actually said, not what someone remembered.
Send hiring managers the full picture, not just a summary.
The test: read any line and ask what the user can now do because of it. If the answer is not obvious, rewrite until it is.
