Fiverr Design System Deep Dive

1. Brand Overview

Fiverr’s visual language is built for speed and clarity. This is a marketplace where the transaction is the hero – not the brand fluff. The UI is stripped to essentials, but not in a cold way. There’s a sense of pragmatic friendliness. You see it in their typography choice – Macan – clean, geometric, with enough warmth to feel human. No serif heritage, no ornamental distractions.

The layout is straightforward. Breakpoints at 800px and 1000px tell you they’re tuned for mobile-first but want a comfortable desktop browsing experience. This isn’t a brand trying to wow you with visual theatrics; they want you to find a service, click a button, and move on. The design system reflects that: minimal color palette (almost too minimal – there’s only one extracted color token here), tight spacing scale, and extremely light on ornamentation.

Borders, not shadows, give structure. That single green border (rgb(29, 191, 115)) is the brand’s handshake — it’s the Fiverr green you expect from their logo. No gradients, no depth illusions.

Typography hierarchy is lean: two heading sizes, two caption sizes. No sprawling type scale. That keeps the brand voice consistent across hundreds of seller listings and gig descriptions.

Overall, the vibe: utilitarian with a friendly accent. This is a design system for high-volume, transactional UI. The kind you can scroll through for hours without cognitive fatigue. They nailed clarity. They sacrificed richness. And that’s a deliberate choice — Fiverr is about speed, not indulgence.

2. Color System

2.1 Primary Colors

Primary color: rgb(29, 191, 115) — the "Fiverr Green". This is the only extracted color in the dataset, and it’s clearly the functional and brand anchor.

Psychologically, green is associated with growth, trust, and "go" signals. Fiverr’s shade leans more towards a saturated emerald, which feels fresh and modern compared to darker, more conservative greens in fintech brands.

Compared to Upwork’s softer green, Fiverr's is punchier. It works well on white backgrounds and pairs with black text for high contrast.

2.2 Complete Palette

That’s it — from the extracted data, we see only one defined color. Either the rest is handled via CSS variables loaded at runtime or they rely heavily on neutral system defaults.

2.3 Color Relationships

With only one functional color token, contrast calculations are straightforward. On white (#ffffff), Fiverr Green has a contrast ratio of ~3.5:1 with white text — too low for WCAG AA for body text, so they’ll almost certainly use dark text on green backgrounds. On dark (#000000), Fiverr Green’s contrast ratio is ~5.7:1 — safe for accessibility.

Dark mode? The data doesn’t show alternate colors, so likely handled elsewhere.

2.4 Usage Guide

• Fiverr Green is for interactive elements — borders, accents, possibly primary buttons.
• Avoid using it for large background areas unless paired with white text in display sizes.
• Pair with neutrals for body content.
• Do not introduce secondary accent colors unless part of a campaign — this brand is heavily tied to its single green.

3. Typography

3.1 Font Families

Primary font: Macan, with fallbacks "Helvetica Neue", Helvetica, Arial.
No Google Fonts or Adobe Fonts — likely a custom/self-hosted font.

This stack is a solid choice: Macan for brand personality, Helvetica Neue as a clean fallback, Arial as the safe fallback.

3.2 Type Scale

3.3 Hierarchy

Two heading styles and two caption styles. No explicit body text style in extracted data, which suggests they reuse heading 1 (400 weight) or caption (400) for general copy. The small caption line height (1.00) for bold captions is tight — likely labels or badges. The larger caption line height (1.88) is generous, improving readability in dense lists.

The hierarchy uses weight and size to create contrast, not color. This is consistent with the minimalist palette.

4. Spacing & Layout

4.1 Spacing Scale

Scale type: 8px grid. This means all spacing values are multiples of 8px or close fractional values.

Extracted values:

The 6.4px and 6.8px values suggest fine-tuned micro spacing — likely for icon padding or aligning text baselines. 16px is the core unit for comfortable spacing between elements.

4.2 Layout

Breakpoints:

• 800px — mobile to tablet transition
• 1000px — tablet to desktop transition

No max-width extracted, but likely container widths are tied to these breakpoints. Mobile-first approach ensures the 16px base spacing scales up cleanly.

5. Visual Elements

Border Radius

Only one value: 3px. Low confidence extraction, but this hints at subtle rounding. This is not a pill-button brand. Corners are mostly sharp, with a hint of softness.

Shadows

None extracted. Fiverr is flat. Depth is created through layout and borders.

Borders

Single extracted border style:

• Width: 1px
• Style: solid
• Color: rgb(29, 191, 115)

Usage: likely around inputs or as accent dividers.

6. Components

The data shows no explicit button styles, but we can infer from the tokens:

• Primary actions: likely use Fiverr Green for borders or text, not full backgrounds.
• Links: probably green or underlined; no hover data.
• Forms: bordered inputs (1px Fiverr Green or neutral), 3px radius.
• Cards: flat, bordered, no shadows.

With only one color, components rely on spacing, typography, and border to signal hierarchy.

7. Design Tokens

:root {
  /* Colors */
  --color-primary-green: rgb(29, 191, 115);

  /* Typography */
  --font-family-primary: "Macan", "Helvetica Neue", Helvetica, Arial;
  --heading-1-size: 1.50rem; /* 24px */
  --heading-1-weight-bold: 700;
  --heading-1-weight-regular: 400;
  --heading-1-line-height-bold: 1.33;
  --heading-1-line-height-regular: 1.50;
  --caption-size-regular: 0.80rem; /* 12.8px */
  --caption-weight-regular: 400;
  --caption-line-height-regular: 1.88;
  --caption-size-bold: 0.64rem; /* 10.2px */
  --caption-weight-bold: 700;
  --caption-line-height-bold: 1.00;

  /* Spacing */
  --space-xs: 0.40rem; /* 6.4px */
  --space-sm: 0.42rem; /* 6.8px */
  --space-md: 1.00rem; /* 16px */

  /* Border Radius */
  --radius-sm: 3px;

  /* Borders */
  --border-width: 1px;
  --border-style: solid;
  --border-color-primary: rgb(29, 191, 115);
}

8. AI Coding Assistant Prompt

# Fiverr Design System Specification

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

## Brand Context
Fiverr’s design system is minimal, fast, and transactional. It uses a single bold green accent for brand recognition. Corners are slightly rounded, typography is clean and geometric, and spacing follows an 8px grid.

## Color Palette
- Primary Green: rgb(29, 191, 115) — Borders, accents, brand identity

## Typography
Font family: "Macan", "Helvetica Neue", Helvetica, Arial

| Level | Size | Weight | Line Height | Use For |
|-------|------|--------|-------------|---------|
| H1 Bold | 24px | 700 | 1.33 | Page titles |
| H1 Regular | 16px | 400 | 1.50 | Section headings, body |
| Caption Regular | 12.8px | 400 | 1.88 | Secondary info |
| Caption Bold | 10.2px | 700 | 1.00 | Labels, badges |

## Spacing & Grid
Base: 8px grid  
Values: 6.4px (xs), 6.8px (sm), 16px (md)

## Border Radius
- sm: 3px — inputs, buttons

## Shadows & Depth
Flat design—use borders, not shadows.

## Component Specifications

### Primary Button
```css
.btn-primary {
  background: transparent;
  color: rgb(29, 191, 115);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: var(--border-width) var(--border-style) var(--color-primary-green);
  font-family: var(--font-family-primary);
  font-size: var(--heading-1-size);
  font-weight: var(--heading-1-weight-bold);
  transition: color 150ms ease, border-color 150ms ease;
}
.btn-primary:hover {
  color: #fff;
  background: rgb(29, 191, 115);
}
.btn-primary:focus {
  outline: 2px solid rgb(29, 191, 115);
  outline-offset: 2px;
}
.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
```

### Secondary Button
```css
.btn-secondary {
  background: transparent;
  color: #000;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  border: var(--border-width) var(--border-style) #ccc;
  font-family: var(--font-family-primary);
  font-size: var(--heading-1-size);
  font-weight: var(--heading-1-weight-regular);
}
```

### Input Field
```css
.input {
  border: var(--border-width) var(--border-style) var(--color-primary-green);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font-size: var(--caption-size-regular);
  font-family: var(--font-family-primary);
}
.input:focus {
  border-color: rgb(29, 191, 115);
  outline: none;
}
```

### Card
```css
.card {
  background: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-md);
  border: var(--border-width) var(--border-style) #e0e0e0;
}
```

## Layout & Responsive Rules
- Breakpoints: 800px, 1000px
- Mobile padding: var(--space-md)
- Desktop padding: var(--space-md) * 2

## Interaction Rules
- Transition timing: 150ms ease for color changes
- Focus indicators: 2px solid Fiverr Green
- Loading states: opacity reduced to 0.5

## DO
- Use ONLY rgb(29, 191, 115) for brand accents
- Maintain 8px grid spacing
- Use Macan for all text
- Keep corners at 3px radius
- Use borders instead of shadows

## DON'T
- Add unauthorized colors
- Use heavy shadows
- Mix sharp and overly rounded corners
- Use gradients

## Code Examples

Primary Button:
```css
.btn-primary { ... }
```

Card:
```css
.card { ... }
```

Input:
```css
.input { ... }
```

9. Summary

TL;DR — Fiverr’s design system is lean. One green accent, Macan font, 8px grid, 3px corners, flat borders. Built for speed and clarity.

Brand Keywords:

• transactional-minimalist
• green-accented
• flat-structured
• typography-driven