---
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
1. **DM Sans** (500) — headings and buttons.
2. **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.