Guidelines for using the AI Safety Atlas name, logo, colors, and visual elements.
The full logo combines the mark with the wordmark. Use it wherever space allows.
https://ai-safety-atlas.com/brand/lockup_color_20260131.svg https://ai-safety-atlas.com/brand/lockup_color_20260131.png https://ai-safety-atlas.com/brand/lockup_white_20260131.svg https://ai-safety-atlas.com/brand/lockup_white_20260131.png
The logomark can be used standalone as an icon or avatar.
Do not alter, rotate, or recolor the logo beyond the provided variants.
https://ai-safety-atlas.com/brand/mark_color_20260323.svg https://ai-safety-atlas.com/brand/mark_color_20260323.png https://ai-safety-atlas.com/brand/mark_white_20260323.svg https://ai-safety-atlas.com/brand/mark_white_20260323.png
The brand palette is built around a blue primary and a warm dark background.
100
300
500
600
900
100
300
500
700
900
Two typefaces create hierarchy across the site.
Display — 30px / Righteous
AI Safety Atlas
Heading — 20px / Righteous
Chapter heading
Body — 16px / Jost 400
Body text uses Jost at regular weight with relaxed leading for comfortable reading.
Small — 14px / Jost 400
Small text for captions, labels, and metadata.
A subtle grain overlay adds warmth and depth to dark and colored backgrounds. Blended with mix-blend-overlay at ~50% opacity.
Brand + grain
Black + grain
mix-blend-mode: overlayopacity: 0.5background-repeat: repeatThe site is structured like pages of a book — contained sections with rounded corners over a visible page background, split into two columns.
Sections have rounded-3xl corners with mx-4 margin so the page background shows through.
Most sections use a 50/50 two-column grid. Each half constrains content to max-w-[40rem].
Left side carries the heading and context. Right side carries the content. Light/dark contrast between halves.
Gap between sections: mt-4. The visible gap acts like a book spine.