Narrator Design System Reference

Narrator is a text-to-speech platform with an electric blue brand, dark-first design, and ABC Diatype typography. This reference covers the marketing site, web app, Chrome extension, and iOS app.

Source: · Platform: Next.js · Theme: dark-first

Colors

Narrator uses a dark-first color system with an electric blue brand color and a comprehensive grayscale.

Brand / Electric

Electric 30

#4759F7

Electric 10

#5C6AE5

Electric 20

#6977FA

Electric 40

#2F43FA

Blue 40

#5263FF

Blue 30

#8894FE

Blue 20

#F0F1FF

Grayscale

White

#FFFFFF

Gray 0

#F5F5F5

Gray 10

#ECECEC

Gray 20

#E0E0E0

Gray 30

#BFBFBF

Gray 40

#9F9F9F

Gray 50

#7A7A7A

Gray 60

#3D3D3D

Gray 70

#363636

Gray 80

#2E2E2E

Gray 90

#262626

Gray 100

#1F1F1F

Gray 110

#121212

Black

#000000

Semantic

Green 40

#00C270

Green 30

#23AE75

Orange 40

#FF9500

Orange 30

#E68600

Red 40

#FF3C30

Red 30

#EB3830

App UI Colors

App CTA

#5F9BF0

App CTA 2

#91CDFF

App BG

#1E1E1E

App BG 2

#111112

App Accent

#283750

App Text 2

#AFB9C8

App Text 3

#8791A0

App Border

#373737

Highlight Colors

Listen Word

#5665F0

Listen Sentence

#444766

Hover Word

#FBB13B

Hover Sentence

#3D2C13

Pink

#AB21BE

Red

#B82929

Green

#218359

Typography

ABC Diatype is the primary typeface. Dark backgrounds, white text, tight letter-spacing on large headings.

Font Family

abc_diatype, "abc_diatype Fallback"

Primary -- Marketing site

-apple-system, system-ui, Segoe UI, Roboto...

System -- Web app fallback

Heading Scale

Display

88px400line-height: 1letter-spacing: -1.76px

Heading 2

64px500line-height: 1.25letter-spacing: -1.28px

Heading 1

56px400line-height: 1.1

Heading 3

40px500line-height: 1.2letter-spacing: -0.8px

Heading 4

28px400line-height: 1.33

Heading 5

24px400line-height: 1.33letter-spacing: -0.48px

Heading 6

20px500line-height: 1.4

Body & UI Text

Body Large -- The quick brown fox jumps over the lazy dog.

18px400line-height: 1.5

Body -- The quick brown fox jumps over the lazy dog.

16px400line-height: 1.5

Body Small -- The quick brown fox jumps over the lazy dog.

14px400line-height: 1.5

Caption -- The quick brown fox jumps over the lazy dog.

12px400line-height: 1.5

Font Weights

Name	Value	Sample
Regular	`400`	The quick brown fox
Medium	`500`	The quick brown fox
Semibold	`600`	The quick brown fox
Bold	`700`	The quick brown fox
Extrabold	`800`	The quick brown fox

Spacing

4px base unit spacing scale used for padding, margin, and gap values.

Token	Value	Usage
`space-1`	4px	Tight inline spacing
`space-2`	8px	Icon gaps, small padding
`space-3`	12px	Card inner padding, list gaps
`space-4`	16px	Standard padding, button padding
`space-6`	24px	Card padding, section gaps
`space-8`	32px	Large section padding
`space-12`	48px	Page padding, major gaps
`space-16`	64px	Section vertical spacing
`space-20`	80px	Large section spacing

Border Radius

From subtle rounded corners to fully circular pill shapes.

4px

6px

8px

12px

16px

24px

32px

48px

Full

Shadows

Minimal shadow usage on dark backgrounds. Shadows provide subtle depth cues.

Gradients

Radial glows and linear gradients create depth on dark backgrounds.

Hero Glow

Brand

Fade Up

Fade Down

Z-Index

Layering scale for overlapping UI elements.

Token	Value	Usage
`behind`	-10	Background decorations
`negative`	-1	Behind content
`base`	0	Default
`raised`	1	Slightly above content
`dropdown`	10	Dropdowns, tooltips
`sticky`	20	Sticky headers
`banner`	30	Banners, notifications
`overlay`	40	Overlays, drawers
`modal`	50	Modals, dialogs
`popover`	2000	Popovers
`max`	9999	Maximum priority

Buttons

Pill-shaped buttons on marketing site. Rounded-rect in the web app. Always full-radius on CTAs.

Marketing Buttons

App Buttons

Button Specs

Variant	BG	Text	Size	Padding	Radius
Primary	`#FFF`	`#000`	18px / 500	16px 24px	9999px
Secondary	`#1F1F1F`	`#FFF`	14px / 500	10px 16px	9999px
CTA Electric	`#4759F7`	`#FFF`	18px / 500	16px 24px	9999px
Ghost	transparent	`#FFF`	14px / 500	10px 16px	9999px
App Primary	`#5F9BF0`	`#1E1E1E`	16px / 600	12px 24px	8px
App Secondary	`#111112`	`#FFF`	14px / 500	10px 16px	8px

Hero

Dark background with subtle blue radial glow at the bottom. Large centered typography.

Hero Section

Narrator, Text to Speech.

Listen to any text with the most natural sounding AI voices. Available on all your devices.

Cards

Dark cards with subtle borders, generous radius (24px), clean padding.

🎧

Text to Speech

Listen to any text content with natural AI voices.

🎤

AI Voice Generator

Create voiceovers with 200+ AI voices in 50+ languages.

📚

Chrome Extension

Listen to any webpage, email, or document in your browser.

Pricing Cards

Side-by-side comparison cards. Featured plan gets electric blue border.

Free

$0/mo

Get started with basic features

10 standard voices
Limited listening
Web app only

Premium

$11.58/mo

Unlimited listening, 200+ voices

200+ premium voices
Unlimited listening
All platforms
OCR scanning

Enterprise

Custom

For teams and organizations

Everything in Premium
Admin dashboard
Priority support
Custom integrations

Footer

Dark background, multi-column layout with link groups.

Footer

Text Reader

The core reading experience with word-level and sentence-level highlighting during playback.

Text Reader -- Active Playback

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. "Whenever you feel like criticizing anyone," he told me, "just remkindred that all the people in this world haven't had the advantages that you've had." He didn't say any more, but we've always been unusually communicative in a reserved way, and I understood that he meant a great deal more than that. In consequence, I'm inclined to reserve all judgments, a habit that has opened up many curious natures to me and also made me the victim of not a few veteran bores.

1:24

4:02

Highlight States

State	Sentence BG	Word BG	Usage
Listening (active)	`#444766`	`#5665F0`	Currently being read aloud
Hover	`#3D2C13`	`#FBB13B`	Mouse hover / click-to-read
Note - Pink	`#692F54`	`#AB21BE`	User pink highlight
Note - Green	`#254B3F`	`#218359`	User green highlight
Note - Red	`#663231`	`#B82929`	User red highlight
Note - Orange	`#4C3921`	`#A36319`	User orange highlight

Playback Controls

Bottom-docked playback bar with play/pause, progress scrubber, time display, and speed selector.

Playback Bar

0:00

4:02

Speed Options

Voice Selector

Panel for choosing AI voices with search, categories, and premium indicators.

Voice Selection Panel

Select Voice 200+ voices

Gwyneth

English (US) -- Female

Premium

Mark

English (US) -- Male

Free

Snoop Dogg

English (US) -- Male

Premium

Camille

French (FR) -- Female

Premium

Voice Item Specs

Property	Value
Item padding	`12px`
Item border-radius	`8px`
Avatar size	`40px`
Avatar radius	`50%`
Name font	`14px / 600`
Desc font	`12px / 400`
Selected BG	`#283750`
Selected border	`#5F9BF0`
Hover BG	`#111112`

Library / Document Management

Sidebar navigation with document grid. Dark UI with card-based document items.

Library View

All Documents

📄

The Great Gatsby

PDF -- 2 hours ago

🌐

Hacker News - Top Stories

Web Page -- 5 hours ago

📄

Research Paper Draft

DOCX -- Yesterday

📧

Weekly Newsletter

Email -- 2 days ago

📖

Atomic Habits

EPUB -- 3 days ago

🎧

Tech Talk Podcast

Podcast -- 1 week ago

Chrome Extension

Compact popup interface for controlling text-to-speech from any webpage.

Extension Popup

Narrator

🎧

Ready to listen

Select text on any page or click play to listen

iOS App

Native iOS patterns with dark theme, tab bar navigation, and familiar system conventions.

9:41🔋 100%

Library

The Great Gatsby

Chapter 3 -- 45% complete

Atomic Habits

Chapter 7 -- 72% complete

Newsletter

Web -- 5 min read

📚

Library

🔍

Discover

🎧

Listen

⚙

Settings

9:41🔋 100%

← Back Aa

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

0:32

2:15 1.0x

📚

Library

🔍

Discover

🎧

Listen

⚙

Settings

Dark Mode

Narrator is dark-first. The marketing site and web app both default to dark. The color system uses layered grays from #000 to #1F1F1F for depth.

Surface Layering

Base

#000

Level 1

#121212

Level 2

#1F1F1F

Level 3

#262626

Level 4

#2E2E2E

Level 5

#363636

Level 6

#3D3D3D

App Surface Layers

App BG

#111112

Surface

#1E1E1E

Accent

#283750

Tertiary

#373737

Text Highlights

Multi-color highlight system for notes, annotations, and PDF reading with both dark and light variants.

Note Highlight Colors

Yellow

#FFD058

Green

#80F0A5

Pink

#FF78CD

Purple

#D298FF

Blue

#6DD0FF

Podcast Accent Colors

Pod Blue

#5666F0

Pod Purple

#7039B8

Pod Pink

#942B69

Pod Green

#256E5D

Layout & Grid

Max-width containers with responsive padding. CSS Grid and Flexbox for layout.

Token	Value	Usage
`max-width`	1440px	Page max-width
`content-max`	1200px	Content container
`nav-height`	56px	Navigation bar
`sidebar-width`	260px	App sidebar
`extension-width`	360px	Chrome extension popup

Breakpoints

Name	Value	Usage
`sm`	640px	Small mobile
`md`	768px	Tablet
`lg`	1024px	Small desktop
`xl`	1280px	Desktop
`2xl`	1440px	Large desktop

Container Padding

Breakpoint	Padding
Mobile (<768px)	16px
Tablet (768-1024px)	24px
Desktop (>1024px)	48px

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.theme.extend,
  },
};

// Also reuse designSystem.tailwind.componentRecipes for common surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Design System	`—`	`—`	`24px`	`—`	`640px`

Scope	Recipe	Class Pattern	Notes
Design System	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Design System	`surfaceCard`	`rounded-card bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Design System	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.

Narrator Design System Reference

Colors

Brand / Electric

Grayscale

Semantic

App UI Colors

Highlight Colors

Typography

Font Family

Heading Scale

Body & UI Text

Font Weights

Spacing

Border Radius

Shadows

Gradients

Z-Index

Buttons

Marketing Buttons

App Buttons

Button Specs

Navigation

Hero

Narrator, Text to Speech.

Cards

Text to Speech

AI Voice Generator

Chrome Extension

Pricing Cards

Footer

Products

Resources

Company

Text Reader

Highlight States

Playback Controls

Speed Options

Voice Selector

Voice Item Specs

Library / Document Management

All Documents

Chrome Extension

iOS App

Library

Dark Mode

Surface Layering

App Surface Layers

Text Highlights

Note Highlight Colors

Podcast Accent Colors

Layout & Grid

Breakpoints

Container Padding

Tailwind Mapping