Skip to content
DesignMunkDesignMunk Submit a site

Hirehire

hirehire.ai
Hirehire turns interview recordings into notes and scorecards automatically
AI HR & Recruiting Framer Homepage DM Sans
Share Visit site
hirehire.ai DESKTOP · 1440
Hirehire

AI Breakdown

Design export

---
version: alpha
name: Hirehire
description: Hirehire turns interview recordings into notes and scorecards automatically
colors:
  primary: "#141414"
  secondary: "#8574f4"
  tertiary: "#0000ee"
  neutral: "#ffffff"
  border: "#e5e7eb"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: sans-serif
    fontSize: 36px
    fontWeight: 700
    lineHeight: 1.19
  headline-md:
    fontFamily: DM Sans
    fontSize: 29px
    fontWeight: 700
    lineHeight: 1.24
    letterSpacing: -0.012em
  headline-sm:
    fontFamily: sans-serif
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.21
  headline-xs:
    fontFamily: sans-serif
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.2
  body-md:
    fontFamily: DM Sans
    fontSize: 16px
    fontWeight: 500
    lineHeight: 4.85
    letterSpacing: -0.243em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 10px
  sm: 20px
  md: 40px
  lg: 90px
  xl: 120px
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.tertiary}"
    rounded: "{rounded.full}"
    padding: 12px 16px
    height: 40px
  button-secondary:
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 12px 16px
    height: 40px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Hirehire: Big Black Headline Over a Purple Marquee

## Overview

Hirehire serves recruiters and hiring managers. The interface aims to feel confident and efficient: high-contrast typography, a restrained black–white palette, and a single accent purple used sparingly for energy. Layouts are centered and spacious, keeping copy short and scannable. When tokens don't cover a case, prefer clear hierarchy over decoration and reuse existing patterns.

## Colors

- **primary (#141414):** Core ink for headlines, body text, and icons.
- **secondary (#8574f4):** Accent banding and emphasis backgrounds (ticker strips, highlights).
- **tertiary (#0000ee):** Link color and primary-button text per token.
- **neutral (#ffffff):** Page and card backgrounds.
- **border (#e5e7eb):** Dividers, card outlines, input strokes, and subtle separators.
- **surface ({colors.neutral}):** Default surfaces; aliases to white for sections and cards.
- **on-surface ({colors.primary}):** Default text on surfaces; aliases to primary ink.

## Typography

- Headline LG — sans-serif, 36px/1.19, 700. Use for hero and section H1s where a tight, high-impact heading is required.
- Headline MD — DM Sans, 29px/1.24, 700, letter-spacing -0.012em. For prominent subheads and pricing plan names.
- Headline SM — sans-serif, 24px/1.21, 600. For tertiary headings, card titles, and FAQs.
- Headline XS — sans-serif, 20px/1.2, 600. For labels, small section intros, and captions with hierarchy.
- Body MD — DM Sans, 16px, 500, line-height 4.85, letter-spacing -0.243em. Apply to short paragraphs and callouts where extra leading is desired; keep copy concise.
Font sourcing: DM Sans is a Google font and can be loaded directly. The generic sans-serif styles rely on the system UI stack and require no webfont. If a loaded substitute is preferred, Inter, IBM Plex Sans, or Manrope are suitable, widely available alternatives.

## Layout

Spacing is coarse and purposeful: 10/20/40/90/120px. Use lg (90px) to separate major sections, md (40px) for intra-section blocks, and sm (20px) for element groups. Keep pages centered with generous white margins; cards align in one to three columns depending on viewport. Lists (features, privacy items, FAQ) rely on border separators instead of dense grids.

## Elevation & Depth

Depth is minimal. Apply the measured sm shadow to prominent media (product screenshot frames) and hover states. Most hierarchy is achieved through whitespace, the border token for dividers, and tonal contrast (ink on white). Larger shadows are intentionally absent.

## Shapes

The system uses two radii: 8px for cards, panels, and inputs; full (9999px) for pills—buttons, badges, and chips. Rounded elements signal interactivity or status; squared edges are reserved for plain links and text-only elements.

## Components

Buttons
- Primary Button: 40px height, 12px×16px padding, pill radius (9999px), background #141414, text #0000ee.
- Secondary Button: 40px height, 12px×16px padding, pill radius (9999px), text #141414 on transparent or section background.
- Link Button: Text-only, radius 0.
Card
- Background #ffffff, text #141414, 8px radius, 16px padding; optional sm shadow for media previews.

Distinctive patterns on this page
### Hero Banner
- Headline LG centered, supporting Body MD underneath. Primary Button followed by a compact rating badge. Section padding: lg top/bottom.
### Product Screenshot Frame
- Card with 8px radius, sm shadow, and a small "Play with sound" chip (pill, full radius). Place on neutral surface; may overlap a secondary-colored band.
### Brand Ticker Marquee
- Full-width strip using secondary #8574f4 with repeated wordmark text. Height governed by md spacing; text in on-surface contrast or white.
### Three-Step Features
- Numbered steps (1–3) each with Headline SM and short Body MD. Use md gaps and border dividers on mobile; grid into three on wide screens.
### Testimonial Block
- Quoted text set in Body MD, author line beneath; avatar displayed as a circle. Card container with 8px radius and border or light shadow.
### Privacy & Security Grid
- Multi-item checklist in two or three columns. Each item uses Headline XS as title and Body MD copy, separated by border #e5e7eb.
### Pricing Cards
- Two cards side by side. Plan name in Headline MD, price emphasized, feature list in Body MD, CTA uses Primary Button.
### FAQ Accordion
- Headline SM questions with border separators. Answers in Body MD; expand/collapse retains 8px card corners on containers.

## Do's and Don'ts

- Do reserve secondary #8574f4 for marquee bands, highlights, or section anchors; keep the rest largely neutral.
- Do use lg (90px) spacing to separate primary sections and md (40px) to group related content.
- Do apply the sm shadow only to key media or elevated cards; prefer borders for general separation.
- Don't mix new grays; use #e5e7eb for all dividers and strokes to keep consistency.
- Don't introduce new radii—stick to 8px for blocks and 9999px for pills.
- Don't set long, dense paragraphs in Body MD when space is constrained; keep copy concise to match the generous leading.

## Agent Prompt Guide

Quick reference — text/background/border/accent
- Text: #141414
- Background: #ffffff
- Border: #e5e7eb
- Accent: #8574f4 (banding), #0000ee (links)

1) Build a centered hero with headline and CTA
- Container: background #ffffff, padding-top/bottom 90px.
- H1: sans-serif, 36px, 700, line-height 1.19, color #141414, center.
- Subhead: DM Sans, 16px, 500, line-height 4.85, letter-spacing -0.243em.
- Primary button: height 40px; padding 12px 16px; radius 9999px; background #141414; text #0000ee.

2) Product screenshot card with play chip
- Card: background #ffffff; radius 8px; padding 16px; shadow rgba(0,0,0,0.08) 0 0.796px 0.796px -0.375px, rgba(0,0,0,0.09) 0 2.4145px 2.4145px -0.75px, rgba(0,0,0,0.11) 0 6.3826px 6.3826px -1.125px, rgba(0,0,0,0.18) 0 20px 20px -1.5px.
- Chip: pill radius 9999px; border 1px solid #e5e7eb; text #141414.

3) Three-step features row
- Grid: 3 columns (stack to 1 on small); gap 40px.
- Step title: DM Sans, 29px, 700, line-height 1.24, letter-spacing -0.012em.
- Body: DM Sans, 16px, 500.
- Dividers: 1px #e5e7eb on mobile between items.

4) Pricing cards
- Two cards: background #ffffff; radius 8px; padding 16px; border 1px solid #e5e7eb.
- Plan name: DM Sans, 29px, 700.
- Price: sans-serif, 36px, 700.
- CTA: Primary button spec above.

5) FAQ accordion
- Questions: sans-serif, 24px, 600, border-bottom 1px #e5e7eb; padding 20px.
- Answers: DM Sans, 16px, 500, padding 20px 0.

## Similar Brands

- Otter.ai — similarly monochrome with bright accents and product-first screenshots; Otter leans more toward consumer-friendly density.
- Fireflies.ai — purple accent and card-based screenshots; Fireflies uses heavier gradients and busier illustrations.
- tl;dv — minimal black/white type with a strong accent and simple pricing; more playful iconography.
- Gong — bold headlines and high-contrast hero, but a sales/RevOps focus and heavier brand color usage.

More like this

Browse AI →
mintlify.com
Mintlify AI
Mintlify
Self-updating knowledge infrastructure for agents—24/7.
Homepage · 12 minutes ago
getfernand.com
Fernand AI
Fernand
Calm customer support for SaaS founders: AI on the front line.
Homepage · 13 hours ago
polymer.co
Polymer HR & Recruiting
Polymer
Attract and hire great people with a powerful ATS and job board
Homepage · 15 hours ago
openlayer.com
Openlayer AI
Openlayer
Control your AI, layer by layer.
Homepage · 17 hours ago