# TiDB Visual Brand System

> Source of truth for TiDB's complete visual identity: colors, typography, logo, Cornerstone graphic element, and layout standards.
> Owner: PMM / Brand. Update trigger: Brand refresh, palette change, or design system update.
> Source: [tidb-brand](https://github.com/yybaroq/tidb-brand) by Yan Yang ([@yybaroq](https://github.com/yybaroq)). Ported and adapted for this brain layer in beta v0.10.

---

## 1. Color Palette

### Primary Colors

| Color | Hex | RGB | Primary Use |
|-------|-----|-----|-------------|
| Brand Red | #DC150B | 220/21/11 | Primary brand color, logo symbol, CTAs |
| Dark Red | #87120C | 135/18/12 | Cornerstone left face, dark accents |
| Light Red | #F35048 | 243/80/72 | Cornerstone top face, highlights |
| Background Red | #630D09 | 99/13/9 | Full-bleed dark backgrounds |
| Black | #000000 | 0/0/0 | Primary text on light backgrounds |
| White | #FFFFFF | 255/255/255 | Primary text on dark backgrounds |

### Secondary Color Families

Each family: dark · medium · light · background.

| Family | Dark | Medium | Light | Background |
|--------|------|--------|-------|------------|
| Violet | #5D137D | #9E4EC4 | #C76FF2 | #3C174C |
| Blue | #10487B | #2C80CE | #509DEA | #0D3152 |
| Teal | #0F5353 | #1AA8A8 | #50DBD9 | #093434 |

### Carbon Scale (Neutrals)

| Step | Hex | Use |
|------|-----|-----|
| Carbon 100 | #E5E8EB | Lightest background, alternating rows |
| Carbon 200 | #CBD1D7 | Light borders, table dividers |
| Carbon 300 | #B9C2CA | Secondary borders |
| Carbon 400 | #A2ADB9 | Subdued UI text |
| Carbon 500 | #8B96A2 | Dark-mode mid-tone |
| Carbon 600 | #74808B | Secondary on dark |
| Carbon 700 | #5D6974 | Dark dividers |
| Carbon 800 | #424D57 | Near-black backgrounds |

### Color Usage Rules

- **Text:** Black on light backgrounds; White on dark. No colored body text.
- **Backgrounds:** Prefer Black or White as primary canvas. Background-family colors for dark, Cornerstone-branded slides only.
- **Secondary colors (Violet/Blue/Teal):** Use for Cornerstone graphic variety or data-viz. **Do NOT use Linen, Peacock, Mango, or Plum families in marketing** — reserved for in-product UI.
- **Brand Red:** CTAs, logo, accent only. Never as body text color.

### Accessibility (WCAG 2.0)

| Combination | Rating |
|-------------|--------|
| White on Black / Background colors / Dark colors | AAA |
| Black on White / Carbon 100–300 | AAA |
| White on Brand Red / Medium Violet | AA |
| Black on Carbon 400 / Light Red / Medium Blue / Medium Teal | AA |

### CSS Custom Properties
```css
:root {
  --tidb-brand-red:  #DC150B;
  --tidb-dark-red:   #87120C;
  --tidb-light-red:  #F35048;
  --tidb-bg-red:     #630D09;
  --tidb-black:      #000000;
  --tidb-white:      #FFFFFF;
  --tidb-carbon-100: #E5E8EB;
  --tidb-carbon-200: #CBD1D7;
  --tidb-carbon-300: #B9C2CA;
  --tidb-carbon-800: #424D57;
  --tidb-med-violet: #9E4EC4;
  --tidb-dk-violet:  #5D137D;
  --tidb-med-blue:   #2C80CE;
  --tidb-dk-blue:    #10487B;
  --tidb-med-teal:   #1AA8A8;
  --tidb-dk-teal:    #0F5353;
}
```

---

## 2. Typography

### Fonts

| Role | Licensed | Free fallback |
|------|----------|---------------|
| Primary | Moderat (TIGHTYPE) | DM Sans (Google Fonts) |
| Monospace / code | Moderat Mono (TIGHTYPE) | DM Mono (Google Fonts) |

**Use free fallbacks for Office / Workspace deliverables; licensed fonts for marketing materials.**

### Font Weights

- **Marketing:** Regular, Medium, Bold (Moderat)
- **Web / product only:** Thin, Light, Black
- Moderat Mono: Regular through Bold for most applications

### Usage Rules

- **Headlines:** Moderat Bold (5–6 words) or Medium (longer); line spacing 1.1–1.2×
- **Body:** Moderat Regular; line spacing 1.2–1.4×; bold for headers/emphasis only
- **Code/Technical:** Moderat Mono Regular; lining numerals; slashed zeros for standalone numerals
- **Text color:** Black or White only. No italics for body emphasis (italics for titles only). No extra letter spacing on headlines.
- **Don'ts:** No Moderat Mono for body text or large headlines; no Thin/Light/Black in marketing.

### Type Scale

| Role | Size |
|------|------|
| Display headlines | 48–120 px |
| Section headlines | 32–48 px |
| Subheadings | 24–32 px |
| Body large | 18–20 px |
| Body standard | 16 px |
| Body small | 14 px |
| Captions / labels | 12–14 px |
| Code | 14–16 px |

---

## 3. Logo Usage

### Components
Hexagon symbol (bright red, #DC150B, with "Ti" 3D effect) + custom wordmark. Use both together in most situations.

### Logo Versions

| File | Use when |
|------|----------|
| TiDB-Logo-Full-Pos-RGB.png | Light backgrounds (white, Carbon 100–400) |
| TiDB-Logo-Full-Rev-RGB.png | Dark backgrounds (black, Background colors, Carbon 500–800) |
| TiDB-Logo-1c-Rev-RGB.png | On Brand Red only (all-white) |
| TiDB-Logo-w-Tagline-Full-Pos-RGB.png | Light bg, when PingCAP relationship must be explicit |
| TiDB-Logo-w-Tagline-Full-Rev-RGB.png | Dark bg, with tagline |
| TiDB-Logo-w-Tagline-1c-Rev-RGB.png | Brand Red bg, with tagline |

Files: https://github.com/yybaroq/tidb-brand/tree/main/assets/logos/

### Sizing

| Context | Minimum height |
|---------|---------------|
| Standard (no tagline) | 48 px / 0.5 in |
| With tagline | 84 px / 0.875 in |
| Symbol only | 18 px / 0.18 in |

**Clear space:** 2× the height of one hexagon segment on all sides.

### Symbol-Only Usage
Hexagon alone is permitted for: social media profile icons, apparel, document headers, large brand moments. Prefer full logo when space allows.

### Prohibitions
Never: stretch/squash, rotate, recolor, add drop shadows/glows/gradients/outlines, place over photography, use logotype without symbol, use on non-palette colors.

---

## 4. Cornerstone Graphic Element

The Cornerstone is TiDB's primary graphic — an isometric 3D cube symbolizing scalable architecture and data foundations. Always **monochromatic** within one hue family.

### Face Color Mapping

| Face | Value |
|------|-------|
| Left face | Dark |
| Right face | Medium (or Brand Red for Red family) |
| Top face | Light |

### Color Values by Family

| Family | Left (Dark) | Right (Medium) | Top (Light) |
|--------|-------------|----------------|-------------|
| Red | #87120C | #DC150B | #F35048 |
| Violet | #5D137D | #9E4EC4 | #C76FF2 |
| Blue | #10487B | #2C80CE | #509DEA |
| Teal | #0F5353 | #1AA8A8 | #50DBD9 |

**Alternative (full-bleed only):** Left #CBD1D7 · Right #E5E8EB · Top #FFFFFF

### Four Variations

| Variation | When to use |
|-----------|-------------|
| **Cornerstone with Grid** (most common) | Presentation backgrounds, social posts — cube centered in dashed isometric grid |
| **Standalone Cornerstone** | Bold print/banner use — must be cropped on at least 3 sides |
| **Scalable Cornerstone** | Website hero sections — outlined isometric shapes show growth around cube |
| **Cornerstone Matrix** | Complex data diagrams — matrix of outline cubes with one filled Cornerstone at base |

### Grid Rules

- Lines always **dashed**, never solid; 6 dashes per segment between intersections
- Line color: White on dark/colored backgrounds; Black on white/light backgrounds
- Line weight: 1–2 px digital; minimum 0.5 pt print
- **Don'ts:** Multiple colors within one Cornerstone; grid without Cornerstone; multiple Cornerstones in same graphic; standalone uncropped; solid grid lines; colored grid lines.

### Background Pairings

| Cornerstone | Approved Backgrounds |
|-------------|---------------------|
| Red | Background Red, Black, White |
| Violet | Background Violet, Black, White |
| Blue | Background Blue, Black, White |
| Teal | Background Teal, Black, White |

---

## 5. Layouts

### Presentation Slides

| Format | Size | Use |
|--------|------|-----|
| Widescreen | 1920 × 1080 px | Standard (16:9) |
| Standard | 1024 × 768 px | Legacy (4:3) |

**Margins:** 5% of slide dimension on all sides (safe area).  
**Logo placement:** Top-left or bottom-left on title slides; footer area (small) on content slides.

### Documents

| Format | Size | Margins |
|--------|------|---------|
| A4 | 210 × 297 mm | 20 mm all sides |
| US Letter | 8.5 × 11 in | 0.75 in all sides |

**Body text:** 65–75 characters per line optimal for single column; 45–55 for two-column.

### Social Media

| Platform / Asset | Size |
|------------------|------|
| LinkedIn Post | 1200 × 627 px |
| LinkedIn Company Banner | 1584 × 396 px |
| Twitter/X Post | 1200 × 675 px |
| Twitter/X Header | 1500 × 500 px |
| WeChat Article Header | 900 × 500 px |
| WeChat Moment / Instagram Post | 1080 × 1080 px |
| Instagram Story | 1080 × 1920 px |
| YouTube Channel Banner | 2560 × 1440 px |
| YouTube Thumbnail | 1280 × 720 px |

### Display Ads (IAB Standard)

| Name | Size | Priority |
|------|------|----------|
| Medium Rectangle | 300 × 250 px | High |
| Leaderboard | 728 × 90 px | High |
| Mobile Banner | 320 × 50 px | High |
| Wide Skyscraper | 160 × 600 px | Medium |
| Half Page | 300 × 600 px | Medium |

**Banner rules:** Logo always visible at minimum 48 px height; headline 3–6 words; clear CTA button.

### Grid System

- **12-column grid** for web/digital: 20–30 px gutters; 5% container margins
- **8-point grid** for UI: all spacing in multiples of 8 px
- **Visual hierarchy:** Primary (logo + headline) → Secondary (subheadline + visuals) → Tertiary (body + CTA)
- **Alignment:** Left-aligned default; centered for quotes and impact statements

---

## 6. Asset Library

74 brand assets organized at: https://github.com/yybaroq/tidb-brand/tree/main/assets/  
Visual thumbnail index: https://github.com/yybaroq/tidb-brand/blob/main/preview.html

| Folder | Contents | Sizes |
|--------|----------|-------|
| `logos/` | 6 logo lockups | Various |
| `cornerstones/` | Single solid cubes × 4 colors × 2 orientations × 2 sizes | 361×399, 312×324 |
| `cornerstones-grid/` | Cube + dashed grid × 4 colors × 2 orientations | 600×433 |
| `matrices/` | Multi-cube matrix × 4 colors × 2 orientations | 444×554 |
| `lattices/` | Dark stack/tower with red accent, light/dark variants | 584×538, 632×730 |
| `scaffolds/` | Outline grids, large isometric backgrounds | 499×412 variants |
| `banners/` | Pre-composed blog/social/slide backgrounds | 910×480 (primary) |
| `cta-blocks/` | Full-bleed CTA backgrounds × 5 colors | 1440×574 |
| `textures/` | Diagonal stripe patterns | 1972×909 |
| `overview/` | Brand sheet poster, approved photography | 2083×1190 |

**Asset usage:** Brand assets © PingCAP. Distribute internally or to TiDB partners; do not redistribute publicly without permission.