DESIGN.md — Contentful

Overview

Contentful's design system (Forma 36) supports a content management platform used by enterprises. A calm blue primary on clean white surfaces communicates reliability and professionalism. The system is highly component-driven with accessibility baked into every element.

Colors

Primary Palette

Token	Hex	Usage
color-brand	#0286C3	Primary blue, CTAs
color-bg-dark	#1B1E28	Marketing dark sections
color-bg	#FFFFFF	App background
color-surface	#F7F9FA	Sidebar, table headers
color-muted	#6C7889	Secondary text

Typography

Role	Family	Size	Weight
Display	Avenir Next	36px	700
Heading	Avenir Next	24px	600
Body	Avenir Next	14px	400
Small	Avenir Next	12px	400

Components

Entry Editor

• Full-page form for content entries
• Field types: short text, rich text, media, reference
• Sidebar with status, schedule, and versioning

Content Model Builder

• Field list with drag-to-reorder
• Field type icons and validation rules
• Preview pane for API response shape

Space Navigation

• Left sidebar: Content, Media, Content Model, Apps
• Environment selector (master, staging, preview)
• Breadcrumbs for nested content

Do's and Don'ts

Do

• Use Forma 36 components exclusively in the web app
• Follow WCAG 2.1 AA for all interactive elements
• Use blue for primary and navigational actions only

Don't

• Don't use custom form controls — Forma 36 has them all
• Don't mix font families inside the application
• Don't place more than 3 actions in a single toolbar