Skip to content
wikipedia.com logo

Wikipedia

wikipedia.com

“Wikipedia embodies a utilitarian, academic, and globally accessible vibe, prioritizing information clarity and neutrality over aesthetic flair. The design is strictly functional, relying on system fonts and high-contrast, flat layouts to ensure readability and speed across all devices and languages.”

utilitarian
neutral
academic
minimal
accessible
global
functional
trustworthy

Color Palette

Colors

Light Mode

#3366cc

primary

#3366cc

accent

#ffffff

background

#202122

text

#54595d

secondaryText

#202122

border

#3366cc

link

#54595d

muted

Dark Mode

#000000

background

Typography

Fonts

-apple-system

body
400
700
system

BlinkMacSystemFont, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif

Linux Libertine

heading
700
self-hosted

Hoefler Text, Georgia, Times New Roman, Times, serif

-apple-system

heading
700
system

BlinkMacSystemFont, Segoe UI, Roboto, Inter, Helvetica, Arial, sans-serif

Montserrat

heading
700
self-hosted

Helvetica Neue, Helvetica, Arial, sans-serif

body

The quick brown fox

h1

The quick brown fox

h2

The quick brown fox

h3

The quick brown fox

Components

Design System

Search
primary
0px 2px 2px 0px
#3366cc#ffffff
Read Wikipedia in your language
secondary
2px
#f8f9fa#3366cc
modal
box-shadow

rgba(0, 0, 0, 0.25) 3px 3px 10px 0px

Voice & Tone

Personality

Visual Energy

2/10

Design Era

classic-editorial

Emotional Tone

objective-informative

Target Audience

Global users seeking quick, reliable, and neutral factual information across all literacy levels and technical abilities.

Comparable Brands

Project Gutenberg
The New York Times
Library of Congress
GitHub

Brand Rules

Dos & Don'ts

Do

  • Use Linux Libertine at 700 weight for main headings, ensuring text is in lowercase sentence case.
  • Use -apple-system for body text and secondary headings, maintaining a line-height of 21px for optimal readability.
  • Apply primary brand color #3366cc for links, primary buttons, and accent elements against a pure white (#ffffff) or black (#000000) background.
  • Style primary buttons with #3366cc background, #ffffff text, 8px vertical and 16px horizontal padding, and a specific border-radius of 0px 2px 2px 0px.
  • Style secondary buttons with #f8f9fa background, #3366cc text, 6px vertical and 12px horizontal padding, and a 2px border-radius.
  • Use base border radius of 2px for small UI elements and 10px/12px for larger containers, avoiding pill-shaped or fully rounded corners.
  • Apply a single, subtle shadow (rgba(0, 0, 0, 0.25) 3px 3px 10px 0px) only to modal overlays, never to cards or buttons.
  • Maintain a flat design aesthetic with no gradients, using simple 1px borders (#a2a9b1) for secondary interactive elements.

Don't

  • Do not use Title Case for headings; strictly enforce lowercase sentence case for all heading levels.
  • Do not use gradients of any kind; all surfaces must be solid flat colors.
  • Do not use emoji in body copy or headings; keep visual language text-only and professional.
  • Do not use serif fonts for body text; reserve Linux Libertine exclusively for headings.
  • Do not apply shadows to buttons or standard content cards; reserve shadows exclusively for modals.
  • Do not use vibrant or saturated accent colors outside of the primary #3366cc blue.
  • Do not use exclamation points or enthusiastic punctuation; maintain a matter-of-fact tone.
  • Do not use rounded corners (border-radius > 2px) on primary action buttons.

Design Assets

Visual Elements

Design asset
png200×183
Design asset
png80×64
Design asset
png80×64
Design asset
png80×64
Design asset
png80×64
Design asset
png80×64
Design asset
png80×64

DESIGN.md

AI-ready

Drop into any project root. Cursor, Claude Code, v0, Lovable, and other AI coding agents read this file to generate on-brand UI. Spec

Download
DESIGN.md not yet generated for this brand.
How to use this file

1. Save this file as DESIGN.md in your project root (sibling to README.md).

2. AI agents that read project files (Claude Code, Cursor, v0, Lovable, Bolt, Windsurf) will discover it automatically.

3. Validate or export tokens with the official CLI:

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md
Developer Access
cURL
# Fetch the full brand kit
curl https://extractvibe.com/api/brand/wikipedia.com \
  -H "x-api-key: ev_your_key"

# Export as CSS variables
curl https://extractvibe.com/api/extract/JOB_ID/export/css \
  -H "x-api-key: ev_your_key"

# Export as Tailwind config
curl https://extractvibe.com/api/extract/JOB_ID/export/tailwind \
  -H "x-api-key: ev_your_key"

Extract your own brand kit

Get colors, fonts, voice, and personality from any website in seconds. Open source.

Get started free