Remind Design System Reference

Remind is a full-screen meeting reminder app for Mac that uses AI to auto-generate attendee briefings before your calls.

remind.ing · Platform: macOS native + marketing site · Theme: light

Overview

Design Principles

Clean, airy, and trustworthy. The design uses a soft blue gradient background, generous whitespace, and rounded cards to create a calm, professional aesthetic. The signature accent blue (#5B8EFF) is used sparingly for interactive elements and the meeting card top bar. Typography is set in Inter with a clear hierarchy from 64px hero headings down to 13px captions.

Key Tokens

Accent Blue	#5B8EFF
Primary Black	#000000
Background Gradient	#E8EEFF → #F5F7FF
Card Surface	#FFFFFF
Text Secondary	#6B7280
Font Stack	"Inter", -apple-system, sans-serif
Base Spacing	4px
Border Radius (default)	12px
Card Shadow	0 8px 32px rgba(0,0,0,0.08)

Colors

Remind uses a light, gradient-blue background with white card surfaces. The accent blue is reserved for interactive elements, the meeting card top bar, and status highlights. Feature sections use pastel tinted backgrounds.

Brand & Accent

#5B8EFF

accent

#4A7AE8

accent-hover

8% opacity

accent-light

25% opacity

accent-ring

Background

#E8EEFF

bg-start

#F5F7FF

bg-end

#FFFFFF

card

#F9FAFB

card-alt

Text

#000000

text-primary

#6B7280

text-secondary

#9CA3AF

text-tertiary

#374151

text-body

Borders

6% black

border

12% black

border-strong

#D1D5DB

input-border

Status

#FF6B6B

red

#34D399

green

#FBBF24

yellow

#5B8EFF

blue

Feature Section Tints

#FFF9E6

feature-yellow

#E6F9F0

feature-green

#F5F5F5

feature-gray

#F0EBFF

feature-purple

#E8EEFF

feature-blue

Typography

Remind uses Inter as its sole typeface across all weights (300–700), with JetBrains Mono for code snippets. The type scale ranges from a 64px hero to 12px overlines, with tight letter-spacing on headings and generous line-height on body text.

Font Families

Sans-serif	"Inter", -apple-system, BlinkMacSystemFont, sans-serif
Monospace	"JetBrains Mono", "SF Mono", ui-monospace, monospace

Heading Scale

Hero Title

Size	56–64px
Weight	700
Line Height	1.1
Letter Spacing	-0.025em

Section Heading

Size	36–40px
Weight	600–700
Line Height	1.2
Letter Spacing	-0.02em

Card Heading

Size	20–24px
Weight	600
Line Height	1.3
Letter Spacing	-0.01em

Body Scale

Body Large — The quick brown fox jumps over the lazy dog. Remind ensures you never walk into a meeting unprepared.

Size	18px
Weight	400
Line Height	1.6

Body — The quick brown fox jumps over the lazy dog. AI-powered briefings delivered before every meeting.

Size	16px
Weight	400
Line Height	1.6

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

Size	14px
Weight	400
Line Height	1.5

Caption — Supporting details and metadata

Size	13px
Weight	500
Line Height	1.4

OVERLINE LABEL

Size	12px
Weight	600
Letter Spacing	0.05em
Transform	uppercase

Font Weights

Light	300
Regular	400
Medium	500
Semibold	600
Bold	700

Spacing & Radius

Remind uses a 4px base unit with an 8-step scale. All spacing values are multiples of 4px. Border radii range from 8px for small elements to 16px for cards, with pill shapes for badges and tags.

Spacing Scale

4px

8px

12px

16px

24px

32px

48px

64px

Border Radii

8pxsm

12pxmd (default)

16pxlg (cards)

20pxxl

24px2xl

pillbadges

Shadows

Button2px 8px

Card8px 32px

Card Hover12px 40px

Accent Hoverblue glow

Dropdown8px 24px

Buttons

Remind buttons use 12px border-radius, 15px font-size, and 600 weight. The primary button is solid black, secondary is white with a visible border, and accent uses the brand blue. All buttons have a subtle lift on hover.

Button Variants

CTA Button (Large)

Button Specs

Primary BG	#000000 → hover #1a1a1a
Secondary BG	#FFFFFF → hover #F9FAFB
Accent BG	#5B8EFF → hover #4A7AE8
Ghost BG	transparent → hover rgba(0,0,0,0.04)
Padding	12px 24px (standard) / 16px 32px (CTA)
Border Radius	12px (standard) / 16px (CTA)
Font Size	15px (standard) / 16px (CTA)
Font Weight	600 (standard) / 700 (CTA)
Hover Shadow (accent)	0 4px 16px rgba(91,142,255,0.2)
Transition	all 0.2s ease

Navigation

The Remind website uses a translucent frosted-glass navigation bar fixed to the top of the viewport. Logo on the left, links in the center, and CTA on the right.

Website Header

Remind

Features How It Works Pricing

Nav Specs

Height	72px
Backdrop Blur	20px
Background	rgba(245,247,255,0.85) (translucent)
Link Color	#6B7280 → hover #000000
Link Font Size	15px
Logo Font Size	20px / weight 700
Padding	0 32px

Hero

The hero section is center-aligned with a badge, large title, subtitle, and dual CTA buttons. It uses the page gradient background and maximum whitespace for impact.

✨ AI-Powered Meeting Prep

Never walk into a
meeting unprepared

Remind lives in your macOS menu bar and delivers AI briefings — attendee context, talking points, and agenda insights — before every meeting.

Hero Specs

Title Size	56–64px / weight 700
Subtitle Size	18–20px / weight 400
Subtitle Color	#6B7280
Badge BG	rgba(91,142,255,0.1)
Badge Color	#5B8EFF
Badge Radius	9999px (pill)
Padding Top	120px
Padding Bottom	80px
Max Width	800px

Meeting Card

The signature Remind component. This card appears in the menu bar dropdown and on the marketing site to showcase the product. It displays the meeting title, time, attendees with avatars, and an AI-generated briefing with talking points.

Full Card Preview

Q2 Product Strategy

Google Meet · 45 min

In 15 min

Attendees

Chris, Jamie, Sarah + 1 more

AI Briefing

Sarah proposed shifting focus to enterprise features in last week's sync — expect pushback from Jamie on timeline
Q1 NPS dropped 4 points — team wants to discuss retention strategy before roadmap lock
New competitor launched similar AI feature — review positioning deck from Alex

Suggested Talking Points

Enterprise timeline Retention plan Competitive response

Card Anatomy

Width	380px
Background	#FFFFFF
Border Radius	16px
Shadow	0 8px 32px rgba(0,0,0,0.08)
Border	1px solid rgba(0,0,0,0.04)
Top Bar	4px height, #5B8EFF
Body Padding	24px
Title	18px / weight 600
Meta Text	13px / #6B7280
Time Badge BG	rgba(91,142,255,0.1)
Time Badge Color	#5B8EFF
Time Badge Radius	8px
Section Label	11px / 600 / uppercase / 0.05em
Divider	1px solid #F3F4F6
Avatar Size	32px
Avatar Overlap	-8px margin-left
Briefing Bullet	6px circle, #5B8EFF
Briefing Text	14px / #374151
Tag Radius	9999px (pill)
Tag Padding	2px 8px

Urgency Variants

Normal

Blue bar — default

Starting Soon

Yellow bar — <5 min

Overdue

Red bar — past start

Feature Cards

Feature cards use white backgrounds with pastel-tinted icons on the marketing site. Each card has a 48px icon container, 16px title, and 14px description.

📅

Calendar Sync

Automatically pulls meetings from Google Calendar and Outlook. No manual input needed.

🤖

AI Briefings

Context-aware meeting prep generated from your emails, docs, and past notes.

👥

Attendee Intel

Know who's in the room — roles, recent interactions, and relationship context.

⏱

Smart Reminders

Nudges at the right time with prep materials, not just a countdown clock.

💻

Menu Bar Native

Lives in your macOS menu bar. One click to see your next meeting and briefing.

🔒

Private & Secure

Your data stays on-device. Briefings are generated locally — nothing leaves your Mac.

Feature Card Specs

Background	#FFFFFF
Border	1px solid rgba(0,0,0,0.06)
Border Radius	16px
Padding	28px
Icon Container	48px × 48px, 12px radius
Title	16px / 600
Description	14px / 400 / #6B7280
Hover Shadow	0 8px 32px rgba(0,0,0,0.08)
Hover Transform	translateY(-2px)

Integration Logos

Integration partner logos are displayed in a horizontal row with white card treatments — 64px containers with 12px border-radius and subtle shadows.

📅

📧

📄

💬

📷

🚀

Google Calendar · Outlook · Notion · Slack · Zoom · Linear

Integration Logo Specs

Container Size	64px × 64px
Background	#FFFFFF
Border Radius	12px
Border	1px solid rgba(0,0,0,0.06)
Shadow	0 2px 8px rgba(0,0,0,0.04)
Hover Shadow	0 4px 16px rgba(0,0,0,0.08)

Pricing

Pricing cards use white surfaces with the featured tier highlighted by a 2px accent border and a floating badge. Price numbers are 48px bold with a 16px period suffix.

Free

forever

✓ 3 meetings/day
✓ Basic reminders
✓ Calendar sync

Pricing Card Specs

Background	#FFFFFF
Border	1px solid rgba(0,0,0,0.06)
Border (featured)	2px solid #5B8EFF
Border Radius	16px
Padding	32px
Badge BG	#5B8EFF
Price Size	48px / 700
Period Color	#6B7280
Check Color	#34D399
Feature Font Size	15px

Footer

The Remind footer uses a solid black background with white text and multi-column link layout. Headings are 11px uppercase with 0.05em tracking.

Footer Specs

Background	#000000
Padding	64px 32px
Link Color	rgba(255,255,255,0.6) → hover #FFFFFF
Heading	11px / 600 / uppercase / 0.05em / rgba(255,255,255,0.4)
Link Font Size	13px
Column Gap	64px

CSS Variables

All design tokens are available as CSS custom properties for drop-in usage.

--accent	#5B8EFF
--accent-hover	#4A7AE8
--accent-light	rgba(91,142,255,0.08)
--accent-ring	rgba(91,142,255,0.25)
--black	#000000
--white	#FFFFFF
--bg-start	#E8EEFF
--bg-end	#F5F7FF
--card	#FFFFFF
--text-primary	#000000
--text-secondary	#6B7280
--text-tertiary	#9CA3AF
--border	rgba(0,0,0,0.06)
--border-strong	rgba(0,0,0,0.12)
--red	#FF6B6B
--green	#34D399
--yellow	#FBBF24
--feature-yellow	#FFF9E6
--feature-green	#E6F9F0
--feature-gray	#F5F5F5
--feature-purple	#F0EBFF
--feature-blue	#E8EEFF
--shadow-card	0 8px 32px rgba(0,0,0,0.08)
--shadow-card-hover	0 12px 40px rgba(0,0,0,0.12)
--shadow-button	0 2px 8px rgba(0,0,0,0.06)
--shadow-button-hover	0 4px 16px rgba(91,142,255,0.2)
--radius-sm	8px
--radius-md	12px
--radius-lg	16px

Tailwind Mapping

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

Theme Extension

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

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

// Key color tokens: remind-accent, remind-black, remind-bg-start, remind-bg-end
// Key radius tokens: sm (8px), DEFAULT (12px), lg (16px)
// Key shadow tokens: card, card-hover, button, button-hover, button-accent

Token Summary

Primary Action	bg-remind-black text-white
Accent Action	bg-remind-accent text-white
Page Background	bg-remind-gradient (custom)
Body Font	font-sans (Inter)
Default Radius	rounded (12px)
Card Shadow	shadow-card
Feature Tints	bg-feature-yellow / green / purple / blue / gray

Component Recipes

buttonPrimary	inline-flex items-center justify-center gap-2 rounded-[12px] bg-remind-black text-white shadow-button px-6 py-3 text-[15px] font-semibold transition-all hover:shadow-[...] hover:-translate-y-px
buttonAccent	inline-flex items-center justify-center gap-2 rounded-[12px] bg-remind-accent text-white shadow-button px-6 py-3 text-[15px] font-semibold transition-all hover:bg-remind-accent-hover hover:shadow-button-accent
surfaceCard	rounded-lg bg-white border border-remind-border shadow-card p-8 transition-all hover:shadow-card-hover hover:-translate-y-0.5
meetingCard	rounded-lg bg-white border border-remind-border shadow-card overflow-hidden
featureCard	rounded-lg bg-white p-8 border border-remind-border shadow-card
inputField	rounded-[12px] border border-gray-300 bg-white text-remind-black px-4 py-3 text-[15px] focus:outline-none focus:ring-2 focus:ring-remind-accent-ring focus:border-remind-accent
badge	inline-flex items-center px-3 py-1 rounded-full text-caption font-medium
navLink	text-[15px] text-remind-text-secondary transition-colors hover:text-remind-black