Design tokens (YAML front matter)

version: alpha
name: Fireflies-Inspired-design-analysis
description: An inspired interpretation of Fireflies.ai's design language — an AI meeting assistant with a deep indigo-violet hero, light lavender-white feature sections, a violet primary button, DM Sans headlines with Inter body, and small 4px-radius controls in an Untitled-UI style.

colors:
  primary: "#7a5af8"
  primary-deep: "#6938ef"
  on-primary: "#ffffff"
  canvas-hero: "#100730"
  canvas: "#fafaff"
  canvas-alt: "#fcfcfd"
  canvas-dark: "#141415"
  ink: "#101828"
  body: "#667085"
  button-secondary-text: "#344054"
  hairline: "#eaecf0"
  success: "#12b76a"
  on-dark: "#fafafa"
  on-dark-soft: "#f3f5fc"

typography:
  display:
    fontFamily: '"DM Sans", Inter, system-ui, sans-serif'
    fontSize: 56px
    fontWeight: 500
    lineHeight: 74px
    letterSpacing: 1.12px
  heading:
    fontFamily: '"DM Sans", Inter, system-ui, sans-serif'
    fontSize: 40px
    fontWeight: 500
    lineHeight: 56px
    letterSpacing: -0.4px
    textTransform: capitalize
  heading-sm:
    fontFamily: '"DM Sans", Inter, system-ui, sans-serif'
    fontSize: 20px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: -0.2px
  body:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 16px
    fontWeight: 400
    lineHeight: 24px
    letterSpacing: -0.16px
  body-sm:
    fontFamily: Inter, system-ui, sans-serif
    fontSize: 14px
    fontWeight: 400
    lineHeight: 20px
    letterSpacing: -0.12px
  button:
    fontFamily: '"DM Sans", Inter, system-ui, sans-serif'
    fontSize: 16px
    fontWeight: 500
    lineHeight: 24px
    letterSpacing: 0px

rounded:
  sm: 4px
  md: 8px
  lg: 12px

spacing:
  xs: 8px
  sm: 12px
  md: 14px
  lg: 24px
  xl: 48px
  section: 96px

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: "12px 14px"
  button-secondary:
    backgroundColor: "#ffffff"
    textColor: "{colors.button-secondary-text}"
    borderColor: "{colors.hairline}"
    typography: "{typography.button}"
    rounded: "{rounded.sm}"
    padding: "8px 14px"

Design System Inspiration of Fireflies.ai

Overview

Fireflies is an “AI teammate” that records, transcribes and summarizes meetings and pushes the results into CRM, chat and email. The site opens on a deep indigo-violet hero ({colors.canvas-hero} #100730) with a light DM Sans headline (“The #1 AI Assistant For Your Meetings”) and a violet “Get Started” button, then moves into long lavender-white feature sections ({colors.canvas} #fafaff) — about 16,000px of page in total.

The UI vocabulary is the familiar Untitled UI / Tailwind SaaS kit: gray-900 ink #101828, gray-500 body #667085, gray-200 borders #eaecf0, small 0 2px 4px rgba(16,24,40,0.04) shadows and 4px-radius buttons. Violet ({colors.primary} #7a5af8) is the only brand color.

Key Characteristics:

Indigo-violet hero, lavender-white feature sections, dark footer.
Violet primary buttons; white outlined secondary buttons.
DM Sans headings (weight 500), Inter body.
Small radii (4px) on controls; Untitled-UI gray scale.
Many feature sections, each with a title-case headline and a product screenshot.

Colors

Violet ({colors.primary} — #7a5af8): Primary buttons, highlights. Deep (#6938ef) for links and hover.
Hero Indigo (#100730): Hero background.
Canvas (#fafaff) / Alt (#fcfcfd): Feature sections.
Canvas Dark (#141415): Footer and dark panels.
Ink (#101828), Body (#667085), Secondary button text (#344054): Untitled UI grays.
Hairline (#eaecf0): Borders and dividers.
Success (#12b76a): Status dots and checkmarks.

Typography

Font Family

DM Sans (500) — headings and buttons.
Inter (400) — body and UI text.

Hierarchy

Token	Size	Weight	Line Height	Letter Spacing	Use
`{typography.display}`	56px	500	74px	1.12px	Hero headline on indigo.
`{typography.heading}`	40px	500	56px	-0.4px	Feature section titles (Title Case).
`{typography.heading-sm}`	20px	500	24px	-0.2px	Card titles.
`{typography.body}`	16px	400	24px	-0.16px	Paragraphs.
`{typography.body-sm}`	14px	400	20px	-0.12px	Captions, cookie banner, metadata.
`{typography.button}`	16px	500	24px	0	Buttons.

Principles

Section headlines are Title Case (“High Quality Meeting Transcription & Recording”).
The hero uses slightly positive tracking; everything else is slightly negative.

Layout

1440px full-width bands; content up to 1200px; centered copy blocks 680–760px.
Each feature section: headline, short copy, CTA, large screenshot.
Integration logo grids and comparison tables further down.
116px header with announcement strip (“See Now”) and nav (Enterprise · Pricing · Request demo · Open App).

Elevation & Depth

Cards: 0 2px 4px rgba(16,24,40,0.04) with a hairline border.
Screenshots: soft larger shadow on lavender backgrounds.
No heavy shadows; dark hero provides contrast.

Shapes

{rounded.sm} 4px — buttons, inputs, chips (most common).
{rounded.md} 8px and {rounded.lg} 12px — tops of cards and screenshot frames.

Components

button-primary — violet, white label, 4px radius, padding 12px 14px (“Get Started”, “Open App”).
button-secondary — white, #344054 label, 1px #eaecf0 border (“Request demo”).
Feature tabs — white rounded tabs (“Overview” etc.) that switch screenshots.
Cookie banner — dark panel with violet “Accept all cookies”.

Do’s and Don’ts

Do

Keep violet as the single brand color.
Use the Untitled-UI gray scale for text and borders.
Use 4px corners on buttons and inputs.
Pair every feature headline with a real product screenshot.

Don’t

Don’t round buttons into pills.
Don’t introduce extra accent colors beyond success green.
Don’t use heavy shadows.

Responsive Behavior

The hero headline drops to about 36px.
Feature sections stack text above screenshot.
Header collapses to logo, “Get Started” and a menu.

Known Gaps

Measured on the homepage at 1440px; the web app was not measured.
Fonts are the open-source DM Sans and Inter as served by the site.

Fireflies.ai

Palette

At a glance

Design System · Fireflies.ai

Design System Inspiration of Fireflies.ai

Overview

Colors