01.b, Logo

Logos, Wordmarks, Symbols

Wordmarks (color + white), the "+1" symbol, favicon, and Open Graph share cards. Please do not modify the marks. For dark backgrounds, use the white version. Minimum clear space around the mark equals the height of the "1" character on all sides.

All Logo Files

Wordmarks · Symbols · Favicons · OG Cards

The complete logo suite in PNG and SVG. Includes color and white wordmarks, the standalone "+1" symbol on light and dark backgrounds, favicon, and social share graphics.

Download from Google Drive

Formats: PNG · SVG · WebP

Logo Sizing Rules

Nav · Footer · Symbol Variant

Wordmark (nav): 54px height desktop, 42px mobile
Wordmark (footer): 48px height
Symbol only: 56 × 56px desktop, 46 × 46px mobile
Sticky bar icon: 44 × 44px, 10px radius
Aspect ratio: preserved via width: auto, never stretch

02, Color System

Core Palette

Every color on the site maps to a CSS custom property. Use tokens, not raw hex, in code.

Brand Blue

--brand-blue

#2563EB

Primary blue. Links, accents, focus states.

Brand Blue Dark

--brand-blue-dark

#1D4ED8

Hover states, skip-link, gradient endpoints.

Brand Blue Bright

--brand-blue-bright

#3B82F6

CTA gradient starting point.

Signature Purple

--purple

#6D3AEF

Announcement bar, sticky CTA, brand gradient.

Indigo

--indigo

#1E1B5E

Deep indigo mid-tone.

Indigo Deep

--indigo-deep

#0E1340

Footer, nav tint (w/ alpha), cookie banner.

Ink

--ink

#0A0A1A

Primary text color.

Ink Soft

--ink-soft

#5A5A7A

Secondary text, metadata, blockquotes.

Page BG

--bg

#F5F7FC

The signature off-white page background.

Card BG

--bg-card

#FFFFFF

Card surfaces, prose backgrounds.

Pale BG

--bg-pale

#EEF1FA

Subtle tinted section separator.

Success Green

--green

#22C55E

Positive states, confirmations.

02.b, Color System

Accent Palette

The bright, sparing tones. These are used in gradients, hover states, and the cyan-to-pink italic flourish.

Signature Cyan

#67E8F9

Italic flourish gradient, focus on dark, cookie links.

Cyan Light

#A5F3FC

Hover state for cyan text on dark.

Signature Pink

#F0ABFC

Italic flourish endpoint, NEW badge.

Lavender

#C4B5FD

Kicker labels on hero, mid-tone in grad-text.

Sky Blue

#60A5FA

Focus ring on light bg, grad-text start.

Sky Blue Light

#93C5FD

Button focus ring.

Cream Pop

--cream-pop

#FDE68A

Reserved for gold moments (Platinum crown, sparkles).

03, Color System

Gradients

All gradients run at 135° (top-left to bottom-right). Never diagonal-other-way, never vertical.

Grad-Hero

Page headers, cta-strip backgrounds, mid-blog CTA. The "deep evening sky" atmosphere.

linear-gradient(135deg, #5b3aa8 0%, #3346a8 35%, #1d3a8a 70%, #142b6e 100%)

Grad-CTA

Primary download buttons, conversion moments. The action gradient.

linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%)

Grad-Brand

Announcement bar, brand identity moments. Purple-to-blue signature.

linear-gradient(135deg, #6d3aef 0%, #4338ca 45%, #1d4ed8 100%)

Grad-Sticky

Grad-Sticky (Blue → Purple)

Sticky mobile download CTA. Paired with the pulsing purple glow.

linear-gradient(135deg, #2563eb 0%, #6d3aef 100%)

Italic Flourish

Grad-Text: Italic Flourish

The most protected part of the brand. Applied to italic Fraunces text as a background-clip fill. One word per screen, max.

linear-gradient(135deg, #67e8f9 0%, #f0abfc 100%)

Grad-Text Light

Grad-Text: Light

Softer blue-to-pink for text emphasis on dark hero backgrounds.

linear-gradient(135deg, #60a5fa 0%, #c4b5fd 50%, #f0abfc 100%)

04, Typography

Type System

Two families do all the work. Fraunces for display, Inter for everything else.

Display · Fraunces (Weight 900)

Stop swiping. Start living.

Family: Fraunces

Weight: 900

Line-height: 1.05

Letter-spacing: -0.035em

Size: clamp(48px, 7vw, 96px)

Section Head · Fraunces (Weight 900)

Plans, not profiles.

Family: Fraunces

Weight: 900

Size: clamp(36px, 5vw, 56px)

Letter-spacing: -0.03em

CTA · Fraunces Italic + Cyan-Pink Flourish

Find your plus one.

Rule: One flourish per screen, max

Applied to: emotional moments only

Body · Inter (Weight 400)

The people you'll meet on Plus 1 are the same ones you'd meet at a coffee shop, verified, real, showing up because they want to. This is what social should feel like: an invitation, not a swipe deck.

Family: Inter

Weight: 400 (body) / 500-600 (UI)

Size: 18px prose, 14–17px UI

Line-height: 1.75 prose

Full Type Scale

Element	Size	Weight	Family	Notes
H1 (page hero)	`clamp(48px, 7vw, 96px)`	900	Fraunces	letter-spacing -0.035em
H2 (section)	`clamp(36px, 5vw, 56px)`	900	Fraunces	letter-spacing -0.03em
H2 (cta-strip)	`clamp(32px, 5vw, 56px)`	900	Fraunces Italic	Italic display
H2 (prose)	`32px`	900	Fraunces	56px top margin
H3 (prose)	`24px`	900	Fraunces	40px top margin
Body prose	`18px`	400	Inter	line-height 1.75
Body UI	`14–17px`	500–600	Inter	Nav, cards, footer copy
Hero subtitle	`clamp(17px, 1.4vw, 20px)`	500	Inter	opacity 0.78 on dark
Kicker label	`12px`	800	Inter	UPPERCASE, letter-spacing 0.14em
Footer column label	`11px`	800	Inter	UPPERCASE, letter-spacing 0.14em
Legal / metadata	`12–14px`	500	Inter	ink-soft color

04.b, Typography

Where to Download

Both fonts are free and open source under the SIL Open Font License. Use them on marketing, print, product surfaces, partner collateral, no license fees.

Fraunces

Display · Headings · Italic Flourish

Fraunces is a "classic serif" with expressive italics. It has 4 axes (weight, opacity, softness, italic), but Plus 1 only uses weight 900, upright and italic.

Download from Google Fonts GitHub source

Needed weights: 900 (upright) · 900 italic

Inter

Body · UI · Buttons

Inter is a variable font optimized for screens. Plus 1 uses several weights across the site, install the whole family to be safe.

Download from Google Fonts Official site

Needed weights: 400 · 500 · 600 · 700 · 800 · 900

Web · Embed link (paste in <head>)

        <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,900;1,900&family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
      

For Designers · Adobe / Figma / Canva

Figma: Both Fraunces and Inter are available directly in the Figma font picker (they use Google Fonts under the hood).
Adobe (Illustrator / InDesign / Photoshop): Download the .otf files from Google Fonts, then install them via Font Book (Mac) or Fonts folder (Windows). Adobe Fonts also has both, search "Fraunces" and "Inter" in Creative Cloud.
Canva: Search "Fraunces" and "Inter" in the font picker. Both are in Canva's free library.
Keynote / PowerPoint / Word: Install the .otf files locally first, then they'll appear in the font menu.

05, Components

Live Components

These are the actual rendered components pulled straight from the site, same code, same behavior.

Primary Download Button + Small Variant

Download Plus 1 free → Download →

Radius: 999px (pill)

Shadow: 0 12px 36px rgba(37,99,235,0.5)

Hover: translateY(-3px)

Shine sweep: 5s ease-in-out infinite

Card

Plans that show up.

Every plan on Plus 1 is real, verified, and happening. No ghosting, no "let's grab coffee sometime", just plans that actually happen.

Radius: 24px

Padding: 36px

Border: 1px rgba(10,10,26,0.05)

Shadow: 0 4px 16px rgba(10,10,26,0.04)

Announcement Bar

NEW Plus 1 is now in New York. See the launch →

NEW Badge (nav emphasis)

Quiz NEW Ideas NEW

Sticky Mobile Download Bar

Get Plus 1

Free · 32K+ downloads

Download

06, Layout & Depth

Spacing, Radii, Shadows

Cards float, they don't punch. Shadow alpha stays under 5% for surfaces. Heavy shadows are reserved for overlays.

Subtle

Cards, tiles

0 4px 16px
rgba(10, 10, 26, 0.04)

Elevated

Buttons (blue tint)

0 12px 36px
rgba(37, 99, 235, 0.5)

Dramatic

Overlays, banners

0 20px 60px
rgba(0, 0, 0, 0.45)

Layout Rule	Value	Notes
Max content width	`1200px`	via `.wrap`
Horizontal padding	`28px`	20px on mobile <600px
Prose max-width	`760px`	Long-form reading
Section vertical padding	`90px`	60px on mobile <720px
Section head max-width	`720px`	Centered
Button radius	`999px`	Full pill
Card radius	`24px`
CTA strip radius	`32px`
Sticky bar / cookie radius	`16px`
Small pills / badges	`999px`

07, Motion

Timing & Signature Animations

Catch attention without shouting. Every animation respects prefers-reduced-motion.

0.15s

Micro-interactions

Hover states, focus rings. Fast enough to feel responsive.

0.35s

Panel slides

Mobile nav, cookie banner. Uses cubic-bezier(0.16, 1, 0.3, 1).

0.8s

Scroll reveals

opacity 0→1, translateY 20→0. Applied via .reveal class.

Button shine sweep

Diagonal shine crosses download buttons every 5 seconds. Idle 88%, sweeps in the final 12%.

2.4s

Sticky CTA pulse

Purple glow ring expands and fades from the sticky download pill. Draws the eye without being loud.

-3px

Hover lift

Primary buttons lift 3px, secondary elements lift 2px. Adds tactility to interactive surfaces.

08, Voice Rules

The Five Laws

These are the brand principles encoded in the CSS, worth naming explicitly.

Catch attention without shouting.

The button shine sweep is 5 seconds long and lasts a fraction of a second. Every attention-getting device on the site follows this ratio, mostly quiet, occasionally noticed.

Italic Fraunces + cyan-pink = the emotional moment.

Reserved for one word per screen. It's the visual equivalent of leaning in. If everything is special, nothing is.

Cards float, they don't punch.

Shadow alpha is always under 5% for surfaces. Heavy shadows are for overlays only, cookie banners, modals, floating CTAs.

Pills everywhere.

Buttons, tags, badges, and CTAs are all 999px radius. Nothing rectangular unless it's a card.

Every gradient runs 135°.

Top-left to bottom-right. Never the other diagonal, never vertical. This consistency is what makes different gradients feel like the same family.

The Brand Guide

Warm. Elevated. Effortless.