Brands813
↑ ↓ to browse
View full design.md ↗
Basecamp· Productivitybasecamp.com
Productivity

Basecamp

A clean, confident project management canvas where a signature cobalt blue anchors every call-to-action against a white or mint-tinted ground, Graphik grotesk keeps copy direct and human, and generously rounded corners plus hand-drawn accents give a rock-solid tool an unexpectedly warm, approachable character.

Color Palette18 tokens
background#ffffff
surface#ffffff
surface-mint#f5faf6
ink#263340
ink-secondary#4a5568
ink-muted#718096
on-dark#ffffff
primary#0465be
primary-hover#0354a1
on-primary#ffffff
secondary#263340
on-secondary#ffffff
success#1ba151
error#d93025
border#e5e7eb
border-medium#d1d5db
shadow-soft#000000
shadow-light#f0f4f8
Buttons
TypographyGoogle Font
Hanken Groteskbrand uses Graphik
display-hero

The quick brown fox

56px · 600 · -1.26px
display

The quick brown fox

51px · 600 · -1.14px
heading

The quick brown fox

36px · 600 · -0.8px
heading-sub

The quick brown fox

25px · 600 · -0.48px
body-large

The quick brown fox

23px · 400 · -0.38px
IconsLucide
Set: Lucide · brand-matched
Formfocus ring
Email
you@company.com
Password
••••••••
Card · Shapes

Basecamp

A clean, confident project management canvas where a signature cobalt blue anchors every call-to-action against a white…

Productivity
sm
md
lg
xl
Elevation
RING
CARD
ELEVATED
Controls
On
Off
✓Checked
Unchecked
Selected
Option
Alerts
Heads up — a new version of the design system is available.
Saved. Your changes are live across all surfaces.
Some tokens are missing a contrast-safe pairing.
Couldn’t reach the server. Retry in a moment.
Badges
SolidSoftOutlineNewv2.0
FAQ
Basecamp
A clean, confident project management canvas where a signature cobalt blue anchors every call-to-action against a white or mint-tinted ground, Graphik grotesk keeps copy…
How does it integrate with my stack?
Is there a free tier?
Tabs
OverviewActivitySettings
DayWeekMonth
Stats
48.2k
Active users
+12.4%
$12.8k
MRR
+3.1%
99.9%
Uptime
−0.02%
Table
MemberPlanStatus
AQAvery QuinnPro Active
JLJordan LeeTeam Pending
SRSam RiveraFree Active
Avatars
AQJLSR+5
AQ
Avery Quinn
Online · Owner
Slider · Progress
Volume62%
Storage used78%
Tooltip · Popover
Brand-styled tooltipHover target

Keyboard shortcuts

Press ⌘K to open the command menu, ? for help.

Navigation bar
Banner
NewBasecamp just shipped a refreshed design system.Read more →
Pricing
Pro
$24 /mo
  • Unlimited projects
  • Priority support
  • Custom domains
Stepper
CartDetails3Payment4Review
Breadcrumb
HomeProductivityBasecamp
Menu
Profile
Settings
Billing
Sign out
Toast
Changes savedUndo
You have 3 new updates
Activity
Avery created a new project
2h ago
Jordan left a comment
5h ago
Sam shipped v2.0
1d ago
Notifications
AQAvery Quinn invited you to Basecamp.
2 minutes ago
JLJordan Lee approved your design tokens.
1 hour ago
SRSam Rivera mentioned you in a thread.
Yesterday
Code
theme.ts
// Basecamp tokens
export const theme = {
  primary: "#0465be",
  radius: "10px",
}
Calendar
March 2026
SMTWTFS28291234567891011121314151617181920212223242526272829303112
No resultsTry adjusting your filters or search for something else.
Loading
Pagination
‹123…12›
Brand moment

Basecamp's marketing site makes a bold, disarming statement: project management doesn't have to feel like enterprise software. The canvas is pure white with sections that flip to a…

Basecamp · Productivity

Similar systems

Generated from shared tags, visual DNA, category, color, type, and radius.

Filter by this ↗
Motion84%

shared styles: Minimal, Light, Cool · same category: Productivity

Trello84%

shared styles: Minimal, Light, Cool · same category: Productivity

Coda81%

shared styles: Minimal, Bold, Light · same category: Productivity

Proton78%

shared styles: Minimal, Light, Cool · same category: Productivity

Grammarly76%

shared styles: Minimal, Light, Cool · same category: Productivity

Bauhaus Clock76%

shared styles: Minimal, Bold · same category: Productivity