What is Fellow's primary brand color?

Fellow's intended primary brand color is a saturated violet-indigo wired to #2941e0, which appears as the CTA button background fill (bg: 7) and as a section heading accent color in the body. A second violet value (#795afa) anchors the hero gradient and appears 10 times in gradient fills with a total frequency of 24. The extraction also shows #742afb (frequency 20) and #9178fa (frequency 6) as supporting gradient stops across the violet family. Note that the extraction records #0000ee (the browser default link color) at frequency 576 — that is not a brand decision but an artifact of unstyled anchor elements that a production implementation would override with {colors.ink} or {colors.primary}.

What typefaces does Fellow use, and what should I use as substitutes?

Fellow uses two typefaces: Sharp Grotesk Medium 20 Regular for all display and heading surfaces, and Inter for body copy, labels, and UI text. Sharp Grotesk Medium 20 at 66px / weight 500 is the hero h1; at 56px / weight 400 it handles section h2; at 40px / weight 500 it handles feature section headings; at 20px / weight 400 it handles sub-section h4 labels. Inter at 16px / weight 400 covers body paragraphs; at 14px / weight 400 it covers secondary text and labels. Sharp Grotesk Medium 20 is a commercial typeface by Sharp Type. The closest open-source substitute is Instrument Sans or Plus Jakarta Sans, which share the round-terminal geometric grotesk proportions. Inter is already open-source.

What colors make up Fellow's hero gradient?

The hero gradient descends from near-black deep navy (#000524, which merges #000524 and #04081f) through violet-indigo (#795afa at frequency 24 in gradients) to a lighter periwinkle tint (#c5b9fa in gradient fills at frequency 8). An icy blue (#e0edff, #eff6ff) appears at the bottom edge of the gradient, providing a soft landing into the white-canvas body section. The dark floor (#07103c at frequency 5) anchors the darkest gradient zone. All these values are brand-layer gradient stops in the extraction. The gradient direction is top-to-bottom with a radial glow of violet-indigo centered roughly behind the product screenshot mockup.

What corner-radius values does Fellow use?

Fellow's radius scale has five distinct values. The most frequent is 16px (47 occurrences), used for feature screenshot cards, large card containers, and the primary modal frame. 10px (21 occurrences) is used on input fields and medium-sized UI surfaces. 8px (20 occurrences) appears on the button-primary and secondary chips. The distinctive value is 88px (19 occurrences) — a very high radius used on badge/pill chips that renders as a true pill at any practical badge width, similar to how Stripe uses 20px on their pill badges but taken to an extreme. 5px (11 occurrences) and 4px (5 occurrences) cover small utility surfaces and icon buttons.

Can I use this DESIGN.md to build my own meeting-tools marketing site?

Yes — the file is designed to be fed into Claude, Cursor, or any AI tool that reads structured design tokens. The agent will reproduce Fellow's specific moves: a deep navy-to-violet gradient hero with white text, a hard register break to a white-canvas body section, Sharp Grotesk (or a round-terminal grotesk substitute) for display type, Inter for body, and violet-indigo CTA pills. Token references resolve cleanly: {colors.primary} for the CTA fill, {colors.hero-canvas} for the dark gradient floor, {colors.canvas} for the white body section. The key implementation note: suppress the browser-default link blue (#0000ee) early — it will surface on any unstyled anchor if not explicitly overridden with {colors.ink} or {colors.primary}.

Fellow Design System

Fellow's marketing system pairs Sharp Grotesk Medium 20 display type with Inter body copy on a deep navy hero canvas, with a saturated violet-indigo primary CTA.

About Fellow DESIGN.md

Curated by Dov AzencotUpdated May 19, 2026Source fellow.app

Productivity & SaaS
Communication & Messaging

Fellow's marketing site commits to a two-register page design that most B2B SaaS tools avoid. The hero is a deep navy-to-indigo gradient with white text and a saturated violet-indigo CTA pill. Then at the fold, with no gradual transition, the canvas snaps to pure white for the feature sections — product screenshots in 16px-rounded cards, black body text, the same violet-indigo appearing as section headline accent color. The registers don't blend; they switch. This creates an immediate visual hierarchy where the hero makes the promise and the white-canvas body section fulfills it with evidence.

The typography engine is similarly split. Sharp Grotesk Medium 20 — a geometric grotesk with round terminals and generous apertures — handles all headings from 40px to 66px. Inter handles every body and label surface. Where most meeting-notes tools (Otter, Fireflies, Loom) use a single family throughout, Fellow's display-body split reads as a product that takes the manager's reading experience seriously. Sharp Grotesk Medium 20 at 66px / weight 500 on the hero h1 has the same geometric confidence that brands like Stripe and Figma bring to their display moments, but it runs at a heavier relative weight and larger scale.

The brand's violet-indigo (#2941e0) is worth noting for what it is not: it is not the system-browser default link blue (#0000ee) that appears 576 times in the extraction as text and border on anchors. That blue is a CSS artifact from unstyled anchor elements, not a brand decision. The brand color is the CTA fill (#2941e0 at bg: 7) and the gradient spine (#795afa in gradients at frequency 24). Any implementation using this spec should wire CTA backgrounds to {colors.primary}, anchor text to a styled {colors.ink}, and treat the browser-blue occurrences as a remediation target.

What makes it distinct

Sharp Grotesk splitdisplay headings use Sharp Grotesk Medium 20, a geometric grotesk with round terminals distinct from Inter; body copy stays in Inter, creating a clear editorial-functional split
Navy-to-indigo gradient herothe above-fold canvas descends from near-black navy (#000524) through deep indigo, framing white product screenshots as floating cards in space
Violet-indigo CTAthe button-primary uses saturated indigo (#2941e0) as fill, distinct from the CSS-variable blue link default (#0000ee) that pervades less-considered parts of the system
White canvas inversionbelow the hero fold, the page flips to pure white with feature screenshots in 16px-rounded cards, creating two distinct register zones
88px pill radiusthe primary badge/chip surfaces use an 88px border-radius value, effectively rendering as pills at any practical badge width

Live at fellow.app

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

fellow.app

Explore Fellow

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Borders & Hairlines

Dividers, outlines, structural rules.

Semantic

Status, errors, success, inline links.

Other

Specialty colors.

Fellow design system FAQ

Common questions about Fellow's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Fellow — official site

Fellow's public marketing site — the source of truth for the live tokens captured in this file.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files — the format this page is built on.