Scribd Design System Deep Dive

1. Brand Overview

Scribd’s design language feels like a mature reading platform that’s grown past startup minimalism but hasn’t slipped into corporate blandness. The palette leans toward serious, muted tones — deep charcoals, teal accents, and disciplined neutrals — which is exactly what you’d expect from a brand positioning itself as the “Netflix for documents.” There’s no brash, candy-colored UI here. The mood is professional with a hint of warmth.

Typography is a big tell: Scribd Sans is the hero, supported by Source Sans Pro in secondary contexts. That’s a custom-first approach with a safe fallback. The overall vibe says: “We care about readability and brand consistency more than being trendy.” This is for people who spend hours reading — the typography has to be comfortable. The fact that they use weight variations and multiple sizes for heading-1 contexts shows they’re tuning for different screen sizes and contexts, not just reusing one big title style everywhere.

The UI components reinforce this. Buttons are solid, flat-colored blocks with subtle state changes — no gratuitous gradients, no skeuomorphic shadows (except for a light paddle shadow for carousel controls). The spacing system is clean: a base 8px scale, with a few utility 4px and 1px increments for micro-adjustments. This makes rhythm consistent across layouts.

If you’re building on top of Scribd’s visual language, you need to respect its restraint. The design is about trust and clarity, not about “wow” animations or ultra-bright colors. It’s for a reading-focused audience who values legibility and minimal distractions.

2. Color System

2.1 Primary Colors

Primary: #282828 (rgb(40,40,40)) — deep charcoal. This is the brand’s anchor. It’s used for text, icons, and as a base for buttons. Psychologically, it conveys stability and seriousness. Compared to competitors like Kindle (which uses lighter grays) or Medium (which leans toward black), Scribd’s primary is softer than pure black but still high-contrast on light backgrounds.

Secondary accent: #1e7b85 — teal. This is a cool, muted accent, used for links and app store buttons. It’s more subdued than a bright cyan, which fits the brand’s professional tone.

2.2 Complete Palette

Here’s every color from the extracted data:

2.3 Color Relationships

The primary charcoal (#282828) over off-white (#fffffe) is high contrast — easily WCAG AA and AAA for text. Teal (#1e7b85) on white also passes comfortably for normal text sizes. The danger red (#d33044) is vivid enough for error messaging but not neon, keeping with the brand’s muted tone.

Dark mode isn’t explicit here — most colors are light-background oriented. The presence of deep neutrals suggests they could invert for dark mode with off-white text over charcoal backgrounds.

2.4 Usage Guide

Works well together:

• Charcoal + off-white for core UI
• Teal accents with charcoal text for links
• Basil greens for positive states paired with neutral backgrounds

Avoid:

• Mixing too many bright accents in one view — it breaks the subdued brand tone.
• Using hover blues (#005fcc) outside of interactive states — they look foreign in the palette.

3. Typography

3.1 Font Families

• Primary: Scribd Sans (custom)
• Secondary: Source Sans Pro — used for some headings, captions, body text
• Fallbacks: Helvetica with an extensive East Asian font stack: Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei, Hind, MS Gothic, Apple SD Gothic Neo, NanumBarunGothic.

No Google Fonts or Adobe Fonts loaded — this is a custom-hosted solution.

3.2 Type Scale

3.3 Hierarchy

Large headings (52px, 41px) establish strong page hierarchy. The wide range of heading-1 sizes suggests responsive scaling rather than a rigid H1 style. Smaller headings and buttons stick to 16–20px for UI consistency. The repeated use of 1.30 line height for large headings keeps them tight — no loose line spacing that would waste vertical space.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px grid. Common values:

4.2 Layout

Breakpoints are granular — from tiny (320px) to large desktop (1920px). This suggests fine-tuned responsive design with many intermediate tweaks. No single “container width” given, but the range implies adaptive layouts rather than fixed breakpoints.

5. Visual Elements

• Border radius: Values: 4px (buttons), 6px (inputs, buttons, links), 8px (combobox), 14px (span elements), 22px (pill buttons), 50% (modals, circular icons).
• Shadows: Minimal. Two shadows:
  • rgba(0,0,0,0.2) 0px 3px 6px 0px — used for paddles.
  • rgb(204,204,204) 0px 0px 2px 2px — rare border-shadow.
• Borders: 1px solid #cccccc is common for buttons and list items. Hairline bottom borders in divs use #282828.

6. Components

6.1 Buttons

Variants:

1. Circular close button — Transparent background, 50% radius, 2px transparent border. Hover: purple background (rgb(57,9,147)), focus: scale(1.2) with purple focus ring.
2. Secondary button — #282828 BG, white text, 4px radius. Hover: purple BG, focus: snow BG with purple ring.
3. Search input button — White BG, dark text, 6px radius, gray border. Focus: pinkish BG (#ffedea), red border.
4. Primary CTA — #098647 BG, white text, 6px radius, no border. Hover: purple BG, focus: snow BG with purple ring.
5. Carousel paddle — White BG, gray text, 22px radius, gray border, subtle shadow.

6.2 Links

Variants:

• Charcoal underline
• Teal no-underline
• White no-underline (header)
• Near-black underline
• Gray no-underline

Hover generally adds underline regardless of default.

6.3 Forms

Search inputs: 6px or 8px radius, gray border, focus state with pink BG and red border. Checkbox: no border, transparent BG, focus adds pink BG and red border.

7. Design Tokens

:root {
  /* Colors */
  --color-primary: #282828;
  --color-accent-teal: #1e7b85;
  --color-black: #000000;
  --color-offwhite: #fffffe;
  /* (Include all from palette above) */

  /* Typography */
  --font-scribd-sans: "Scribd Sans";
  --font-source-sans-pro: "Source Sans Pro";
  --font-helvetica-stack: Helvetica, Arial, Hiragino Sans GB, STXihei, Microsoft YaHei, WenQuanYi Micro Hei, Hind, MS Gothic, Apple SD Gothic Neo, NanumBarunGothic;

  /* Spacing */
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-60: 60px;
  --space-80: 80px;
  --space-110: 110px;
  --space-120: 120px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 14px;
  --radius-pill: 22px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-paddle: rgba(0,0,0,0.2) 0px 3px 6px 0px;
  --shadow-border: rgb(204,204,204) 0px 0px 2px 2px;
}

8. AI Coding Assistant Prompt

# Scribd Design System Specification

You are a Scribd design expert. Build UIs matching their visual language exactly.

## Brand Context
Scribd’s design is professional, reading-focused, and restrained. Colors are muted with deep neutrals and cool accents. Typography prioritizes legibility over decorative style.

## Color Palette
- Primary charcoal: #282828 — Text, icons, primary buttons
- Accent teal: #1e7b85 — Links, app store buttons
- Off-white: #fffffe — Button text, backgrounds
- Danger red: #d33044 — Error messages
- Accent green: #098647 — CTA buttons
- Light gray: #cccccc — Borders
- (Include all palette entries above with usage)

## Typography
- Headings: Scribd Sans
- Secondary: Source Sans Pro
- Fallback: Helvetica stack

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 52px | 700 | 1.30 | Page titles |
| H1 alt | 41px | 700 | 1.30 | Section titles |
| Body | 16px | 400 | 1.50 | Reading text |
| Link | 18px | 600 | 1.30 | Navigation links |
| Caption | 12px | 400 | 1.50 | Metadata |

## Spacing & Grid
Base: 8px
Scale: 1px, 2px, 4px, 8px, 12px, 16px, 24px, 32px, 40px, 48px, 56px, 60px, 80px, 110px, 120px

## Border Radius
- sm: 4px — buttons
- md: 6px — inputs, buttons
- lg: 8px — combobox
- xl: 14px — spans
- pill: 22px — paddles
- full: 50% — circular buttons

## Shadows & Depth
- Paddle: rgba(0,0,0,0.2) 0px 3px 6px 0px
- Border shadow: rgb(204,204,204) 0px 0px 2px 2px

## Component Specifications

### Primary Button
Default: bg #098647, color #fffffe, padding 8px 16px, radius 6px, border none.
Hover: bg rgb(57,9,147), color rgb(28,38,61).
Active: transparent bg, border var(--spl-color-border-button-accent-click).
Focus: bg var(--color-snow-100), scale(1.2), purple focus ring.

### Secondary Button
Default: bg #282828, color #fffffe, radius 4px, border 1px solid #fffffe.
Hover: bg rgb(57,9,147).
Focus: var(--color-snow-100) bg, scale(1.2), purple ring.

### Input Fields
Default: bg #ffffff, border 1px solid #757575, radius 6px, padding 0px 82px 0px 16px.
Focus: bg #ffedea, border rgb(227,58,34), box-shadow rgba(0,0,0,0.06) 0px 2px 10px.

## Layout & Responsive Rules
Breakpoints: 320px, 360px, 768px, 1024px, 1920px (plus granular points in between).
Keep all spacing multiples of 8px.

## Interaction Rules
- 150ms ease transitions for hover/focus.
- Focus indicators: 2px white outline + 4px purple outline.

## DO List
- Use ONLY palette colors.
- Maintain 8px grid.
- Use Scribd Sans for headings.
- Apply consistent focus rings.
- Keep hover states subtle.

## DON'T List
- Don't introduce bright, non-palette colors.
- Don't mix sharp and rounded corners.
- Don't remove focus indicators.
- Don't use heavy shadows.

## Code Examples

```css
.btn-primary {
  background: #098647;
  color: #fffffe;
  padding: 8px 16px;
  border-radius: 6px;
  border: none;
  font-weight: 600;
  font-size: 16px;
  transition: background 150ms ease;
}
.btn-primary:hover { background: rgb(57,9,147); color: rgb(28,38,61); }
.btn-primary:focus {
  background: var(--color-snow-100);
  transform: scale(1.2);
  box-shadow: #fff 0 0 0 2px, rgb(111,39,246) 0 0 0 4px;
}

.input-search {
  background: #ffffff;
  border: 1px solid #757575;
  border-radius: 6px;
  padding: 0 82px 0 16px;
}
.input-search:focus {
  background: #ffedea;
  border-color: rgb(227,58,34);
  box-shadow: rgba(0,0,0,0.06) 0px 2px 10px;
}
```

9. Summary

TL;DR: Scribd's design system is neutral-first, teal-accented, and tailored for long-form reading. Buttons are flat, typography is custom and comfortable, spacing is disciplined on an 8px grid.

Brand Keywords: reading-focused, muted-professional, teal-accented, grid-disciplined