Fellow Design System

Overview

Fellow's marketing site divides into two unmistakable zones. Hard register break. The hero is deep night-navy bleeding into violet-indigo, white text, a rounded violet CTA; then at the fold, the canvas switches to pure white and the feature sections unfold in a product-screenshot grid. The tonal break is abrupt — no gradient transition, no intermediate gray surface. The convention across meeting-tools like Otter.ai, Fireflies, and Grain is to maintain a single background tone throughout; Fellow breaks it deliberately.

The typography is equally divided: Sharp Grotesk Medium 20 — a geometric grotesk with distinctively round terminals — for display headings, and Inter for all body and label copy. The split is consistent enough to read as a brand rule rather than a font-mixing accident. Sharp Grotesk at 66px / 500 on the hero h1 carries the same geometric confidence as Stripe's display moments.

Key Characteristics:

• Sharp Grotesk Medium 20 for headings (66px / 56px / 40px / 20px), Inter for body and labels — a persistent editorial-functional split.
• Saturated violet-indigo primary for CTA fills and accent headings; for gradient spine.
• Deep navy hero canvas with a violet-indigo radial gradient, followed by a hard break to white canvas for the feature body.
• 16px card rounding dominates feature sections; 88px pill rounding on badge chips; 8px on buttons.
• Product screenshots are framed in white cards with a periwinkle border, giving the mockups a floating quality against the white body canvas.
• Gold accent appears 10 times as text — likely used for rating stars or review highlights.
• Deep teal success at frequency 8 — semantic color for checkmarks or security indicators.
• The browser-default link blue appears 576 times as a CSS artifact on unstyled anchors — treat as a remediation target, not a brand color.

Colors

Brand

• Primary ({colors.primary} — ): frequency 23. Used as text (8), bg (7), border (8). The CTA button fill, section accent heading color, and interactive link override. The intentional brand blue.
• Primary-violet ({colors.primary-violet} — ): frequency 24. Gradient (10), text (7), border (7). The gradient spine of the hero — the violet that bleeds into the navy-to-periwinkle descent.
• Primary-violet-light ({colors.primary-violet-light} — ): gradient fill only, frequency 8. The lightest stop of the violet family; used as screenshot card border tint.
• Primary-indigo ({colors.primary-indigo} — ): frequency 20. Used as text (10), border (10). Deep violet for supporting accent text and gradient.
• Primary-indigo-mid ({colors.primary-indigo-mid} — ): frequency 6. Used as text (3), border (3). Mid-violet for tertiary accent.
• Hero-canvas ({colors.hero-canvas} — ): frequency 3. Used as bg (2). The near-black midnight navy floor of the hero gradient.

Structural

• Ink ({colors.ink} — ): frequency 1569. Used as text (780), border (780), shadow (8), bg (1). The dominant text and border color on the white canvas body sections.
• Canvas ({colors.canvas} — ): frequency 111. Used as text (39), bg (33), border (39). White page canvas for body sections and text-on-dark surfaces.
• Ink-muted ({colors.ink-muted} — ): frequency 42. Used as text (21), border (21). Near-black for secondary heading text.
• Ink-disabled ({colors.ink-disabled} — ): frequency 42. Used as text (21), border (21). Body copy on white canvas sections.
• Ink-subtle ({colors.ink-subtle} — ): frequency 38. Used as text (19), border (19). Secondary body text and metadata.
• Ink-faint ({colors.ink-faint} — ): frequency 126. Used as text (63), border (63). Captions, footnotes, and lighter secondary labels.
• Hairline ({colors.hairline} — ): frequency 22. Used as text (11), border (11). Default divider and input border tone.
• Hairline-light ({colors.hairline-light} — ): frequency 2. Lightest divider value.
• Surface-1 ({colors.surface-1} — ): frequency 7. Used as bg (1), gradient (6). Soft periwinkle tint for card borders and gradient bottoms.
• Surface-2 ({colors.surface-2} — ): frequency 5. Gradient fill. Icy light blue at the gradient's edge.

Semantic

• Gold ({colors.gold} — ): frequency 10. Used as text (5), border (5). Rating stars and highlight indicators.
• Success ({colors.success} — ): frequency 8. Used as text (4), border (4). Security checkmarks and feature confirmation indicators.

Typography

Font Families

The system runs two families: Sharp Grotesk Medium 20 Regular for all display and heading surfaces, and Inter for body copy, labels, and UI text. Sharp Grotesk is wired through its full font-face name including placeholder; Inter is wired through its standard name.

Hierarchy

Principles

Sharp Grotesk Medium 20 runs at weight 500 for h1 and h3 level headings, and weight 400 for h2 and h4 — an alternating pattern that creates rhythm without a second family. The Inter body at weight 400 is the foundation; weight 500 Inter is reserved for lead paragraph text and emphasized labels. There is no 700+ weight moment on either family — the heaviest typographic expression is 500.

Note on Font Substitutes

Sharp Grotesk Medium 20 is a commercial typeface by Sharp Type. The closest open-source substitutes with comparable round-terminal geometric proportions are Plus Jakarta Sans and Instrument Sans. For a tighter match to the round-letter apertures, DM Sans at weight 500 reads close at 40-66px display scale. Inter is already open-source.

Layout

Spacing System

• Base unit: 8px (with 10px as the highest-frequency padding value — extracted at 134 occurrences).
• Tokens: {spacing.xs} 2px · {spacing.sm} 8px · {spacing.md} 10px · {spacing.base} 16px · {spacing.lg} 20px · {spacing.xl} 24px · {spacing.2xl} 40px · {spacing.3xl} 56px.
• Section padding (vertical): 24px top / 0px bottom between feature rows; 56px before major transitions.
• Card internal padding: 16x24 (padding shorthand) for feature cards; 22px uniform for testimonial cards.
• Hero padding: 0px horizontal — the gradient extends edge-to-edge; headline and CTA are centered in the safe zone.

Grid & Container

• Max content width: ~1200px for hero; ~1000px for feature body sections.
• Hero: full-bleed navy gradient with the hero headline centered and a product screenshot (meeting grid with participant faces) below it.
• Feature sections: alternating 2-column rows — headline + body left, product screenshot card right (or mirrored) — with white canvas between rows.
• "Built for every team" section: a 4-by-2 grid of team-role cards (Customer Success, Marketing, Engineering, Data, Operations, Leadership, Product, AI) on a dark navy background.

Rhythm

The page alternates: dark hero → white feature grid → dark navy "enterprise" band → light periwinkle testimonials → dark navy footer. The register alternations are tight rather than gradual, making each zone feel like a distinct section rather than a continuous scroll.

Elevation

The system uses a shadow primarily on the "Built for every team" role cards. Feature screenshot cards achieve distinction through border rather than shadow — a thin periwinkle ({colors.primary-violet-light}) border on a white card against a white canvas creates just enough separation without shadow.

• Shadow: ink black {colors.ink} drop shadows appear 8 times (on the "enterprise" section role cards at frequency 8, shadow layer).
• Tonal lift: surface-1 periwinkle tint borders on screenshot cards.
• Hairline borders: {colors.hairline} on input fields and section dividers.

Shapes

The radius scale has three clusters:

• {rounded.sm} 4px — utility surfaces and small icon badges.
• {rounded.md} 8px — the primary button; most interactive elements.
• {rounded.lg} 10px — input fields.
• {rounded.xl} 16px — feature cards, screenshot frames, large containers. The dominant rounding for content surfaces.
• {rounded.badge} 88px — badge chips (effectively pill at any practical badge width).
• {rounded.full} 100% — circular icon buttons and avatar chips.

Components

button-primary — Saturated indigo {colors.primary} fill, white text, {rounded.md} 8px radius, 16x24 padding, 44px height. "Start for free" is the canonical instance in the hero.

button-secondary — Transparent fill, black text, {colors.hairline} border, {rounded.md} radius, 8x16 padding. Used for "Book a demo" adjacent to the primary CTA.

top-nav — White canvas, black text, 16x24 padding, 56px height. The Fellow wordmark sits flush left; nav links center-aligned; primary CTA button right-aligned. The nav is anchored to white regardless of the hero canvas behind it.

nav-link — Transparent, ink black text at {typography.body-sm}, 10px padding. "Features," "Product," "Solutions," "Pricing," "Integrations," "Blog" — standard B2B nav architecture.

hero-heading — White text, {typography.display-xl} (66px Sharp Grotesk / 500). Zero padding; headline floats in the dark gradient zone.

section-heading — Black text, {typography.heading-lg} (40px Sharp Grotesk / 500) for white-canvas sections. In dark sections, white text at the same token.

hero-body — White text at {typography.body-md} for the hero sub-copy ("Secure. Transcribes, summarizes…").

body-paragraph — {colors.ink-disabled} text at {typography.body-md} for feature section descriptions on the white canvas.

card — White canvas fill, ink text, {rounded.xl} 16px radius, 16x24 padding, periwinkle surface-1 border. General content card.

feature-card — White canvas fill, ink text, {rounded.xl} 16px radius, 24x0 vertical padding. Feature-row left-column content (headline + body + CTA).

screenshot-card — White canvas fill, {rounded.xl} 16px radius, zero padding, {colors.primary-violet-light} border. Frames product screenshots in the feature alternating rows.

badge — Surface-2 fill, primary-indigo text, {rounded.badge} 88px radius. "AI Meeting Notes," "Secure," etc.

text-input — White canvas fill, ink text, {rounded.lg} 10px radius, 10px padding, 40px height, hairline border. Email capture fields.

testimonial-card — White canvas fill, ink text, {rounded.xl} 16px radius, 22px uniform padding. Social proof cards in the periwinkle-tinted testimonials section.

footer — Hero-canvas dark navy fill, white text at {typography.caption}, 56x24 padding.

Do's and Don'ts

Do use Sharp Grotesk (or a round-terminal grotesk substitute) exclusively for headings and switch cleanly to Inter for any text below 24px. The visual contract between the two families is the system's editorial identity; mixing them at the same scale breaks the signal.

Do apply the hard register break between dark hero and white body as a direct cut, not a gradient fade. The abruptness is the move — it frames the hero as a brand statement and the body as a product demonstration.

Do limit {colors.primary} to CTA fills, accent headings, and interactive link text. The violet gradient ({colors.primary-violet}) is a separate surface-layer value; using it for CTA buttons would produce a lighter, less grounded action button.

Do treat the badge radius {rounded.badge} (88px) as specific to chip/tag surfaces no wider than ~200px. At wider applications it would produce invisible rounding or asymmetric pill termination.

Don't use the browser-default anchor color as an intentional brand value — it is a CSS artifact appearing 576 times in the extraction from unstyled anchor elements. Wire all anchor text to {colors.ink} or {colors.primary} in a production implementation.

Don't reduce the {typography.display-xl} line-height below 80px for the 66px hero heading. The 80px / 66px ratio (1.21 line-height) gives Sharp Grotesk at that scale room to breathe; tighter leading at weight 500 causes cap-to-cap crowding on two-line headlines.

Don't use {rounded.xl} (16px) on button surfaces — the system consistently uses {rounded.md} (8px) for buttons and reserves 16px for cards. Applying card rounding to buttons would borrow visual language from a different component register.

Don't introduce {colors.success} (deep teal ) as a CTA or accent color — it is a semantic indicator for security checkmarks and confirmation states. Promoting it to an attention surface would confuse semantic meaning with brand intent.

Known Gaps

• Hover states: only the button-primary resting state is captured; hover, active, and focus ring states are not represented.
• Mobile nav: the extracted surface appears to show a minimal hamburger nav on mobile; the mobile layout for the feature alternating rows is not captured.
• Dark-section text: the "Built for every team" grid and the enterprise section on a dark navy background — exact background hex values for this intermediate dark surface are inferred from the gradient; not directly extracted.
• Form error and validation states: text-input carries resting state only; error and success field states are not represented.
• Animation: the hero appears to include a subtle radial gradient animation or particle effect behind the product screenshot; this is not captured in static values.
• Pricing page: the pricing table structure is not captured from the marketing surface.
• App UI tokens: the Fellow in-app interface (meeting notes editor, agenda builder, action-item tracker) carries a different, more compact token system that is not represented here.