Egab Design System

Style Guide

A living reference for Egab's colors, typography, spacing, and components. These values map to the Webflow Variables in the Color and Sizing collections.

Colors

Brand, neutral, and utility tokens.

Brand

Primary

#C26558

Primary Dark

#47231E

Primary Hover

#A9503F

Neutral

Neutral 100

#F7F5F4

Neutral 200

#E5E2E0

Neutral 400

#B8B2AD

Neutral 600

#6E6862

Text & Utility

Text Primary

#333333

Text On Dark

#E9E9E9

White

#FFFFFF

Black

#1A1A1A

Typography

Inter is the primary typeface. Scale shown in pixels.

Display — 50px / 600

Global Majority journalism

Heading XL — 40px / 600

Global Majority journalism

Heading L — 26px / 600

Global Majority journalism

Heading M — 20px / 600

Global Majority journalism

Body — 17px / 400

Egab connects journalists and experts across the Global Majority with international newsrooms seeking original, on-the-ground perspectives.

Small — 14px / 400

Supporting text, captions, and metadata use the small size.

Spacing

A base-4 scale used for padding, margins, and gaps.

4px · space-4

8px · space-8

16px · space-16

24px · space-24

32px · space-32

48px · space-48

64px · space-64

96px · space-96

Radius

Corner radii for cards, inputs, and buttons.

sm · 4px

md · 8px

lg · 16px

Buttons

Primary uses the brand color with an 8px radius and 500 weight.

PrimaryPrimary · hoverSecondaryDark

Components

Common building blocks assembled from the tokens.