Academia Brand Design System Deep Dive
1. Brand Overview
Academia.edu is one of those brands that doesn’t need to scream to be heard. The moment you land on their site, the tone is scholarly but approachable. It’s a platform for academics to share research, so the design language leans heavily into credibility, clarity, and a quiet confidence. No flashy gradients. No gimmicky animations. It’s the digital equivalent of a well-lit reading room in an old university library — but updated with functional UI patterns.
The vibe is restrained: deep blues, neutral grays, precise typography. The brand clearly values legibility over decoration. This is for people who spend hours reading papers, not skimming headlines. There’s a lot of Georgia in the headings — the serif touch gives it that academic gravitas. Roboto and DM Sans handle the UI and body copy, keeping things clean and modern.
They’ve nailed the “trustworthy but contemporary” balance. The color palette feels institutional — navy primaries, golds and muted neutrals for accents — but the spacing and component shapes make it feel like a modern web app, not a digitized textbook. Corners are mostly small-radius, with occasional full circles for avatars. Shadows are minimal, mostly subtle drops for elevation cues.
Audience-wise, this is for researchers, students, and educators who want a distraction-free platform. The design is invisible until it needs to guide you — links are colored but not underlined, buttons are clear, input fields are utilitarian. It’s a design philosophy that says: “We’re here to help you find and share knowledge, not to entertain you.”
You can tell they’ve built a design system that prioritizes content density and clear hierarchy. Breakpoints are tight (mobile kicks in at ~568px), meaning they expect people to use it on laptops and tablets more than on tiny phones. The whole system feels like it’s been tuned for PDF-heavy, text-heavy workflows. And it works — because they stay out of their own way.
2. Color System
2.1 Primary Colors
The main brand color is rgb(34, 34, 51) (#222233). This deep navy-gray hybrid is the semantic primary in their system. Psychologically, it’s conservative, trustworthy, and just a bit more sophisticated than pure black. Compared to competitors like ResearchGate (which leans teal) or Google Scholar (which is mostly white and blue), Academia’s primary feels heavier and more grounded — a signal of seriousness.
Links and call-to-action elements lean heavily on rgb(6, 69, 177) (#0645b1). This is a mid-to-deep blue with enough saturation to stand out against white but not so bright that it feels casual. It’s the “active” color — you click this.
2.2 Complete Palette
| Color Name | Hex | Role | Usage |
|---|---|---|---|
| Link Blue | #0645b1 | Interactive | Links, some buttons |
| Primary Navy | #222233 | Semantic primary | Headings, primary containers |
| Secondary Blue | #337ab7 | Accent | Alternate link color |
| White | #ffffff | Background | Page background, button text |
| Dark Gray | #333333 | Neutral | Hero images, CTA text |
| Black | #000000 | Neutral | Icons, text in some buttons |
| Medium Gray | #494848 | Neutral | Header backgrounds |
| Near Black | #141413 | Neutral | Misc text |
| Mid Gray | #777777 | Neutral | Dropdown links/buttons |
| Cool Gray | #535366 | Neutral | Search input text |
| --text-placeholder | #6d6d7d | Functional | Placeholder text |
| --brand-colors-neutral-400 | #dddde2 | Neutral token | UI surfaces |
| --brand-colors-neutral-500 | #c8c8cf | Neutral token | Borders |
| --brand-colors-blue-500 | #386ac1 | Brand blue | CTAs |
| --brand-colors-gold-200 | #f9f6ed | Accent | Backgrounds |
| --brand-colors-success-500 | #05b01c | Functional | Success states |
| --button-secondary-text-press | #082f75 | Functional | Button press state |
| --button-xs-text-inactive | #91919e | Functional | Disabled text |
| --text-error | #b60000 | Functional | Error states |
| --brand-colors-blue-900 | #043059 | Brand blue dark | Deep backgrounds |
| --brand-colors-blue-700 | #0c3b8d | Brand blue mid | Hover states |
| --button-secondary-text-inactive | #b1b1ba | Functional | Inactive states |
| --brand-colors-violet | #f7ccff | Accent | Backgrounds |
| --brand-colors-turquoise | #ccf7ff | Accent | Backgrounds |
| --brand-colors-gold-500 | #877440 | Accent | Text |
| --brand-colors-blue-300 | #e6ecf7 | Brand blue light | Backgrounds |
| --brand-colors-error-100 | #fff2f2 | Functional | Error backgrounds |
| --brand-colors-yellow | #f7ffcc | Accent | Highlights |
| --brand-colors-gold-300 | #f2efe8 | Accent | Surfaces |
| --brand-colors-error-900 | #920000 | Functional | Error text |
| --brand-colors-green | #ccffd4 | Functional | Success background |
| --brand-colors-success-100 | #f0f8f1 | Functional | Success background light |
| --brand-colors-neutral-300 | #ebebee | Neutral token | Dividers |
| --brand-colors-gold-400 | #e9e3d4 | Accent | Surfaces |
| --brand-colors-blue-400 | #cddaef | Brand blue light | Surfaces |
| --brand-colors-blue-200 | #eef2f9 | Brand blue very light | Backgrounds |
| --brand-colors-peach | #ffd4cc | Accent | Backgrounds |
| --brand-colors-success-900 | #035c0f | Functional | Success text |
2.3 Color Relationships
Primary navy (#222233) with white text passes WCAG AA easily. Link blue (#0645b1) on white is fine for accessibility, but on darker backgrounds it may fall short unless lightened or bolded — which they do. Gray-on-gray combinations (e.g., #777777 on #f9f6ed) are borderline; they rely on font weight and size to maintain readability.
No explicit dark mode detected — the palette is tuned for light backgrounds. Deep blues serve as “dark mode” components in specific contexts (e.g., headers), but the system is fundamentally light-first.
2.4 Usage Guide
- Use #0645b1 for interactive text (links) on white backgrounds.
- Keep #222233 for headings and key containers.
- Avoid using bright accents (violet, turquoise, peach) for core UI — these are for backgrounds and highlights.
- Success states: #05b01c text on #f0f8f1 or #ccffd4 backgrounds.
- Error states: #b60000 text on #fff2f2 background.
- Gold tones (#877440, #f9f6ed) are reserved for decorative or premium cues — don’t overuse.
3. Typography
3.1 Font Families
Three main families in play:
- Georgia — serif, academic feel. Often with Times New Roman fallback.
- Roboto — sans-serif, modern UI workhorse.
- DM Sans — sans-serif, slightly softer than Roboto, used for some headings and buttons.
- Material Symbols Outlined — icon font for inline symbols.
No Google Fonts or Adobe Fonts detected in the source; these may be self-hosted.
3.2 Type Scale
| Element | Font | Size | Weight | Line Height |
|---|---|---|---|---|
| heading-1 | Gupter / Times New Roman | 40px | 400 | 1.20 |
| heading-1 | Georgia / Times New Roman | 40px | 400 | 1.20 |
| heading-1 | Georgia | 36px | 500 | 1.30 |
| heading-1 | Georgia | 32px | 500 | 1.10 |
| heading-1 | Roboto / Helvetica, Arial | 32px | 500 | 1.20 |
| heading-1 | Georgia / Times New Roman | 28px | 400 | 1.14 |
| button | Roboto / Helvetica, Arial | 24px | 400 | 1.25 |
| heading-1 | Material Symbols Outlined | 24px | 400 | 1.00 |
| heading-1 | DM Sans / Helvetica, Arial | 24px | 400 | 1.50 |
| heading-1 | Roboto / Helvetica, Arial | 24px | 400 | 1.50 |
| heading-1 | Roboto / Helvetica, Arial | 24px | 500 | 1.20 |
| heading-1 | Georgia | 24px | 700 | 1.10 |
| heading-1 | Material Symbols Outlined | 20px | 400 | 1.00 |
| heading-1 | Roboto / Helvetica, Arial | 20px | 400 | 1.20 |
| button | DM Sans / Helvetica, Arial | 16px | 500 | 1.25 |
| heading-1 | DM Sans / Helvetica, Arial | 16px | 500 | 1.25 |
| button | Roboto / Helvetica, Arial | 16px | 500 | 1.25 |
| link | Roboto / Helvetica, Arial | 16px | 500 | 1.25 |
| heading-1 | Roboto / Helvetica, Arial | 16px | 400 | 1.25 |
| link | Roboto / Helvetica, Arial | 16px | 400 | 1.25 |
| caption | DM Sans / Helvetica, Arial | 14px | 400 | 1.43 |
| link | DM Sans / Helvetica, Arial | 14px | 400 | 1.43 |
| button | Roboto / Helvetica Neue | 14px | 400 | 1.43 |
| caption | Roboto / Helvetica, Arial | 14px | 500 | 1.43 |
| caption | Roboto / Helvetica, Arial | 14px | 400 | 1.43 |
| link | Roboto / Helvetica, Arial | 14px | 400 | 1.43 |
| link | Roboto / Helvetica, Arial | 14px | 700 | 1.43 |
| button | Roboto / Helvetica, Arial | 13px | 700 | 4.00 |
| caption | Roboto / Helvetica, Arial | 12px | 400 | 3.00 |
| link | Roboto / Helvetica, Arial | 12px | 400 | 3.00 |
| caption | Roboto / Helvetica, Arial | 12px | 500 | 1.10 |
3.3 Hierarchy
The hierarchy is tight. H1s range from 40px down to 24px depending on context — they don’t rely solely on size, but also on weight shifts (400 to 700) to signal importance. Georgia carries the academic tone in larger headings, Roboto takes over for UI labels and smaller headings. DM Sans is sprinkled in for softer feel in buttons and captions. The line heights are generally compact, keeping content dense. This is deliberate — more text fits per viewport without feeling cramped.
4. Spacing & Layout
4.1 Spacing Scale
Base unit is 8px — confirmed by the frequency of 8px multiples.
| Value | Count | Notes |
|---|---|---|
| 3px | 6 | Hairline gaps |
| 4px | 3 | Minimal padding |
| 5px | 5 | Slight offsets |
| 6px | 2 | Input vertical padding |
| 8px | 427 | The workhorse |
| 10px | 28 | Tight paddings |
| 12px | 6 | Small gaps |
| 14px | 25 | Text offsets |
| 16px | 42 | Button padding, small containers |
| 20px | 8 | Medium gaps |
| 24px | 83 | Common card/content padding |
| 32px | 40 | Section spacing |
| 38px | 2 | Odd — maybe image offsets |
| 40px | 22 | Hero paddings |
| 48px | 3 | Large gaps |
| 54px | 2 | Rare, maybe modal headers |
| 56px | 2 | Rare large |
| 72px | 3 | Section breaks |
| 73.8438px | 2 | Precise layout calc |
| 80px | 2 | Max section spacing |
4.2 Layout
Breakpoints at 567px, 568px (mobile), and 1279px, 1280px (desktop). This suggests two major layout shifts — sub-568px for small devices, and 1280px+ for large screens. The spacing scale is consistent across breakpoints, just applied differently.
5. Visual Elements
Border radius is conservative:
| Radius | Usage |
|---|---|
| 0px 0px 0px 20px | One-off image treatment |
| 1px | Thin div borders |
| 3px | Small buttons |
| 4px | Inputs, divs, buttons, cards |
| 5px | Divs |
| 8px | Modals, some buttons |
| 16px | Larger buttons |
| 50% | Avatars, circular images |
Shadows are sparse:
- rgba(34,34,51,0.25) 0px 2px 4px — subtle drop for buttons/images.
- rgba(0,0,0,0.15) 0px 4px 20px — occasional elevation.
- One combo shadow for complex UI.
- One inset white for subtle depth.
Borders are used for separation more than shadows. Common: 1px solid neutrals (#dddde2, #c8c8cf).
6. Components
6.1 Buttons
Secondary Button (ds2-5-button--secondary):
- Default: bg #eef2f9, text #082f75, padding 0 20px, radius 8px, border 1px solid #cddaef, shadow rgba(34,34,51,0.25) 0px 2px 4px.
- Font: Roboto 16px, weight 500.
- No hover/active/focus data in extract — likely subtle color shifts.
Primary Button (Button--lg):
- Default: bg #0954d3, text #ffffff, padding 0 28px, radius 3px, border 1px solid rgba(0,0,0,0.15), no shadow.
- Font: Roboto 13px, weight 700, uppercase, letter-spacing 1.5px.
- No hover/active/focus seen — probably standard darker-on-hover.
6.2 Links
Five styles:
- #337ab7, weight 400 — standard link.
- #777777, weight 400 — muted link.
- #0645b1, weight 700 — bold link.
- #222233, weight 400 — dark link.
- #ffffff, weight 500 — white link on dark bg.
No underline by default. Hover states not in extract.
6.3 Forms
Text input:
- bg #f8f8fb, text #535366, border 1px solid #dddde2, radius 4px, padding 6px 40px 6px 34px.
- No focus style in extract.
6.4 Cards
No explicit card component extracted, but radius values (4px, 5px, 8px) and shadows suggest subtle elevation with neutral borders.
7. Design Tokens (CSS)
:root {
/* Colors */
--color-link-blue: #0645b1;
--color-primary-navy: #222233;
--color-secondary-blue: #337ab7;
--color-white: #ffffff;
--color-dark-gray: #333333;
--color-black: #000000;
--color-medium-gray: #494848;
--color-near-black: #141413;
--color-mid-gray: #777777;
--color-cool-gray: #535366;
--text-placeholder: #6d6d7d;
--brand-colors-neutral-400: #dddde2;
--brand-colors-neutral-500: #c8c8cf;
--brand-colors-blue-500: #386ac1;
--brand-colors-gold-200: #f9f6ed;
--brand-colors-success-500: #05b01c;
--button-secondary-text-press: #082f75;
--button-xs-text-inactive: #91919e;
--text-error: #b60000;
--brand-colors-blue-900: #043059;
--brand-colors-blue-700: #0c3b8d;
--button-secondary-text-inactive: #b1b1ba;
--brand-colors-violet: #f7ccff;
--brand-colors-turquoise: #ccf7ff;
--brand-colors-gold-500: #877440;
--brand-colors-blue-300: #e6ecf7;
--brand-colors-error-100: #fff2f2;
--brand-colors-yellow: #f7ffcc;
--brand-colors-gold-300: #f2efe8;
--brand-colors-error-900: #920000;
--brand-colors-green: #ccffd4;
--brand-colors-success-100: #f0f8f1;
--brand-colors-neutral-300: #ebebee;
--brand-colors-gold-400: #e9e3d4;
--brand-colors-blue-400: #cddaef;
--brand-colors-blue-200: #eef2f9;
--brand-colors-peach: #ffd4cc;
--brand-colors-success-900: #035c0f;
/* Typography */
--font-georgia: Georgia, "Times New Roman", serif;
--font-roboto: Roboto, Helvetica, Arial, sans-serif;
--font-dm-sans: "DM Sans", Helvetica, Arial, sans-serif;
--font-material-icons: "Material Symbols Outlined";
/* Spacing */
--space-3: 3px;
--space-4: 4px;
--space-5: 5px;
--space-6: 6px;
--space-8: 8px;
--space-10: 10px;
--space-12: 12px;
--space-14: 14px;
--space-16: 16px;
--space-20: 20px;
--space-24: 24px;
--space-32: 32px;
--space-38: 38px;
--space-40: 40px;
--space-48: 48px;
--space-54: 54px;
--space-56: 56px;
--space-72: 72px;
--space-73_8438: 73.8438px;
--space-80: 80px;
/* Border Radius */
--radius-none: 0;
--radius-1: 1px;
--radius-3: 3px;
--radius-4: 4px;
--radius-5: 5px;
--radius-8: 8px;
--radius-16: 16px;
--radius-full: 50%;
/* Shadows */
--shadow-sm: rgba(34, 34, 51, 0.25) 0px 2px 4px 0px;
--shadow-md: rgba(0, 0, 0, 0.15) 0px 4px 20px 0px;
--shadow-combo: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.15) 0px 1px 8px 0px;
--shadow-inset-white: rgba(255, 255, 255, 0.1) 0px 1px 0px 0px inset;
}8. AI Coding Assistant Prompt
# Academia Design System Specification
You are an Academia design expert. Build UIs matching their visual language exactly.
## Brand Context
Academia values scholarly credibility, clarity, and functional UI. The design is restrained, with muted blues and neutrals, minimal shadows, and precise typography. Components are utilitarian, content-focused, and tuned for dense reading experiences.
## Color Palette
- Primary Navy: #222233 — Headings, primary containers
- Link Blue: #0645b1 — Interactive links
- Secondary Blue: #337ab7 — Alternate links
- White: #ffffff — Page background, button text
- Dark Gray: #333333 — Hero text
- Black: #000000 — Icons
- Medium Gray: #494848 — Header backgrounds
- Near Black: #141413 — Misc text
- Mid Gray: #777777 — Dropdown text
- Cool Gray: #535366 — Input text
- Placeholder Gray: #6d6d7d — Placeholder text
- Neutral 400: #dddde2 — Borders
- Neutral 500: #c8c8cf — UI surfaces
- Blue 500: #386ac1 — CTAs
- Gold 200: #f9f6ed — Accent backgrounds
- Success 500: #05b01c — Success text
- Secondary Button Press: #082f75 — Pressed state
- XS Text Inactive: #91919e — Disabled text
- Error: #b60000 — Error text
- Blue 900: #043059 — Deep backgrounds
- Blue 700: #0c3b8d — Hover states
- Secondary Button Inactive: #b1b1ba — Inactive
- Violet: #f7ccff — Accent
- Turquoise: #ccf7ff — Accent
- Gold 500: #877440 — Premium text
- Blue 300: #e6ecf7 — Backgrounds
- Error 100: #fff2f2 — Error backgrounds
- Yellow: #f7ffcc — Highlights
- Gold 300: #f2efe8 — Surfaces
- Error 900: #920000 — Error text dark
- Green: #ccffd4 — Success backgrounds
- Success 100: #f0f8f1 — Success light backgrounds
- Neutral 300: #ebebee — Dividers
- Gold 400: #e9e3d4 — Surfaces
- Blue 400: #cddaef — Surfaces
- Blue 200: #eef2f9 — Backgrounds
- Peach: #ffd4cc — Accent
- Success 900: #035c0f — Success dark text
## Typography
- Headings: Georgia, Times New Roman (serif) — 40px-24px, weights 400-700
- UI/Body: Roboto, Helvetica, Arial — 32px-12px, weights 400-700
- Soft UI: DM Sans, Helvetica, Arial — 24px-14px, weights 400-500
- Icons: Material Symbols Outlined
| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 | 40px | 400 | 1.20 | Page titles |
| H1 alt | 36px | 500 | 1.30 | Section titles |
| H2 | 32px | 500 | 1.10-1.20 | Subheadings |
| Body lg | 24px | 400-500 | 1.20-1.50 | Lead paragraphs |
| Body md | 16px | 400-500 | 1.25 | Standard text |
| Caption | 14px | 400-500 | 1.43 | Small notes |
| Label | 13px | 700 | 4.00 | Button labels uppercase |
| Micro | 12px | 400-500 | 1.10-3.00 | Footnotes
## Spacing & Grid
Base: 8px grid. Scale includes 3, 4, 5, 6, 8, 10, 12, 14, 16, 20, 24, 32, 38, 40, 48, 54, 56, 72, 73.8438, 80px.
Use multiples for all component paddings and margins.
## Border Radius
- none: 0 — Square elements
- xs: 1px — div borders
- sm: 3px — small buttons
- md: 4px — inputs, cards
- md+: 5px — divs
- lg: 8px — modals, buttons
- xl: 16px — large buttons
- full: 50% — avatars
## Shadows & Depth
- shadow-sm: rgba(34,34,51,0.25) 0px 2px 4px
- shadow-md: rgba(0,0,0,0.15) 0px 4px 20px
Minimal use; rely on borders for depth.
## Component Specifications
### Primary Button
Default: bg #0954d3, color #ffffff, padding 0 28px, radius 3px, border 1px solid rgba(0,0,0,0.15), font Roboto 13px, weight 700, uppercase, letter-spacing 1.5px.
### Secondary Button
Default: bg #eef2f9, color #082f75, padding 0 20px, radius 8px, border 1px solid #cddaef, shadow-sm, font Roboto 16px, weight 500.
### Navigation Links
No underline, color per context, weight varies 400-700.
### Input Fields
bg #f8f8fb, color #535366, border 1px solid #dddde2, radius 4px, padding 6px 40px 6px 34px.
## Layout & Responsive Rules
Breakpoints: 567px, 568px (mobile), 1279px, 1280px (desktop).
Use consistent spacing tokens across breakpoints.
## Interaction Rules
Transitions: 150ms ease for state changes.
Focus indicators: outline in brand blue.
Disabled: 50% opacity.
## DO List
- Use ONLY colors from palette
- Maintain 8px grid
- Use Georgia for headings, Roboto for body
- Keep button radii consistent
- Use minimal shadows
## DON'T List
- Don't invent new colors
- Don't mix serif and sans in same heading
- Don't add heavy shadows
- Don't round only some corners
## Code Examples
```css
.btn-primary {
background: #0954d3;
color: #ffffff;
padding: 0 28px;
border-radius: 3px;
border: 1px solid rgba(0,0,0,0.15);
font-family: var(--font-roboto);
font-size: 13px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
transition: background 150ms ease;
}
.btn-primary:hover { background: #0c3b8d; }
.btn-secondary {
background: #eef2f9;
color: #082f75;
padding: 0 20px;
border-radius: 8px;
border: 1px solid #cddaef;
box-shadow: var(--shadow-sm);
font-family: var(--font-roboto);
font-size: 16px;
font-weight: 500;
}
.input {
background: #f8f8fb;
color: #535366;
border: 1px solid #dddde2;
border-radius: 4px;
padding: 6px 40px 6px 34px;
}
```9. Summary
TL;DR — Academia.edu’s design system is scholarly, restrained, and practical. Deep blues and neutrals dominate, Georgia brings the academic voice, Roboto keeps UI clean. 8px grid everywhere, minimal shadows, tight breakpoints.
Brand Keywords:
- scholarly-minimal
- trust-first
- content-driven
- academic-modern