TOKENS, COMPONENTS, and brand foundations
Marketing Design System
A working reference for the Marketing Design System, built in alignment with the T2 Design System.
40+
Reusable components
8
Color families
Inter
Primary font
8px
Base rhythm
COLOR TOKENS
Semantic Colors
Use semantic tokens for interfaces. Palette tokens are available for controlled accents, states, and supporting visuals.
background/bg.dark.indigo
rgb(4, 3, 74)
accent/accent.default
rgb(0, 203, 235)
border/border.dark
rgb(34, 34, 97)
neutral/white
rgb(255, 255, 255)
text/text.muted.on.dark
rgba(255, 255, 255, 0.65)
background/bg.subtle.indigo
rgb(245, 245, 254)
Palette ramps
Ocean
Indigo
TYPOGRAPHY
Inter
display-xl · 800
Scale trust without losing the relationship.
body-md · 400
Body copy should stay calm, direct, and compact. Use it for explanation, instruction, and product context. Keep links and emphasis tokenized rather than ad hoc.
Display XL — Product-led headlines
Heading XL — Section title
Heading MD — Component heading
Body MD — Long-form supporting copy and product explanation.
Label MD — NAVIGATION, EYEBROWS, TOKEN NAMES
COMPONENTS
Atoms
These examples use the current project components, so visual updates to the source components stay visible here.
Product cards
MOLECULE
Solution Card
Use for product or solution summaries with optional link and icon treatments.
CTA and disclosure
Document before extending.
New variants should reuse semantic colors, spacing rhythm, and existing type presets.
FOUNDATIONS
Spacing, radius, and surface
Spacing
Use 16px for internal groups, 32px for content blocks, and 64px+ for section breathing room.
Radius
Use 6–8px for cards and controls; reserve full pills for tags and compact status elements.
Surfaces
Layer dark panels with borders and restrained alpha fills. Let cyan mark focus, selection, and emphasis.
Reuse first
Start with existing components, text presets, link styles, and color tokens before drawing new UI.
Keep contrast obvious
Dark surfaces need white or light indigo text. Cyan is for emphasis, not long-form body copy.
Document extensions
When a new pattern becomes reusable, add it here with states, controls, and the reason it exists.