# Bevel AI — Brand Guidelines

## Brand Overview

Bevel AI builds agentic AI systems for education and life sciences. Our brand reflects a humanistic, warm, and intellectually refined identity — technology that works *with* humans, not instead of them.

## Logo

Use the Bevel AI logo (provided as `Bevel_AI.svg`). Maintain clear space around the logo equal to the height of the "B" in Bevel. Do not alter, rotate, or recolor the logo.

## Color Palette

### Primary Colors

| Name             | Hex       | Usage                                      |
|------------------|-----------|---------------------------------------------|
| **Charcoal**     | `#2D2521` | Primary text, headings, dark backgrounds    |
| **Warm Beige**   | `#F0E4D4` | Page backgrounds, light surfaces            |
| **Golden Sand**  | `#D4B896` | Accent backgrounds, gradient tones          |

### Secondary Colors

| Name             | Hex       | Usage                                      |
|------------------|-----------|---------------------------------------------|
| **Muted Brown**  | `#8C7B6B` | Secondary text, captions, subtle labels     |
| **Soft Cream**   | `#F7F2EB` | Card backgrounds, content areas             |
| **Deep Black**   | `#141414` | Footer, dark sections, high-contrast areas  |
| **Warm White**   | `#FDFAF6` | Light mode backgrounds                      |

### Gradients

Use warm, subtle gradients from **Golden Sand** to **Warm Beige** for hero sections and featured areas. Gradients should feel natural and soft — never harsh or overly saturated.

## Typography

### Headings

- **Font family:** Serif (e.g., Playfair Display or similar elegant serif)
- **Style:** Regular and italic — use italics sparingly for emphasis within headings
- **Weight:** 400–700
- **Usage:** Page titles, section headings, hero text

### Body Text

- **Font family:** Sans-serif (e.g., Inter, DM Sans, or similar clean grotesque)
- **Weight:** 400 (regular), 500 (medium for emphasis)
- **Usage:** Paragraphs, descriptions, UI labels, navigation

### Hierarchy

| Element         | Font          | Size (desktop) | Weight |
|-----------------|---------------|----------------|--------|
| Hero title      | Serif         | 64–80px        | 400    |
| Section heading | Serif         | 36–48px        | 400    |
| Subheading      | Sans-serif    | 20–24px        | 600    |
| Body text       | Sans-serif    | 16–18px        | 400    |
| Caption / label | Sans-serif    | 12–14px        | 500    |

## Tone of Voice

- **Warm and humanistic** — we speak like thoughtful colleagues, not corporate machines
- **Clear and confident** — direct language, no jargon for the sake of jargon
- **Intellectually curious** — we respect our audience's intelligence
- **Aspirational but grounded** — ambitious vision, practical execution

## UI Elements

### Buttons

- **Primary CTA:** Charcoal background, warm white text, fully rounded (pill shape)
- **Secondary CTA:** Outlined with a subtle border, rounded
- **Border radius:** Fully rounded (pill) for buttons, 8–12px for cards

### Tags / Badges

- Use uppercase, small text with a rounded pill border
- Examples: `LIVE BETA`, `COMING SOON`, `PLATFORM`
- Subtle border, no background fill

### Cards

- Clean layout with generous whitespace
- Thin separator lines between items (1px, muted color)
- No heavy drop shadows — use subtle elevation or flat design

## Photography & Imagery

- Warm, natural tones preferred
- Avoid cold, sterile, or overly "tech" imagery
- When using AI-generated visuals, maintain a human, organic feel
- Illustrations should be minimal and refined

## Spacing & Layout

- Generous whitespace throughout
- Content should breathe — avoid dense, cluttered layouts
- Maximum content width: ~1200px
- Section spacing: 80–120px vertical padding