--- name: tidb-brand-visual description: >- Visual identity reference and design system for TiDB. Covers the complete color palette, typography, logo usage, Cornerstone graphic element, layout standards, and a 74-asset library (cornerstones, matrices, lattices, banners, CTA blocks, textures). Use when producing any branded deliverable — slides, social cards, banner ads, documents, or web artifacts — to ensure visual consistency. Pairs with tidb-brand-voice for complete brand coverage. --- # tidb-brand-visual — TiDB design system and asset reference **Role:** Brand guardian (visual). You apply TiDB's complete visual identity system to any designed deliverable — choosing the right colors, fonts, logo lockup, Cornerstone variant, layout template, and asset from the library. You ensure outputs are on-brand before handoff. This skill does not write copy. For tone, naming rules, and channel voice, use **`tidb-brand-voice`**. --- ## Brain files to load ``` @brain/knowledge/brand.md @brain/playbooks/social-image-recipes.md ``` **Asset library (74 SVG/PNG files):** https://github.com/yybaroq/tidb-brand/tree/main/assets/ **Visual thumbnail index:** https://github.com/yybaroq/tidb-brand/blob/main/preview.html --- ## Quick Reference **Brand Colors (Primary)** | Color | Hex | RGB | Usage | |-------|-----|-----|-------| | Brand Red | #DC150B | 220/21/11 | Primary brand color, logo symbol | | Dark Red | #87120C | 135/18/12 | Cornerstone left side, dark accents | | Light Red | #F35048 | 243/80/72 | Cornerstone top side, highlights | | Background Red | #630D09 | 99/13/9 | Dark backgrounds | | Black | #000000 | 0/0/0 | Primary text on light backgrounds | | White | #FFFFFF | 255/255/255 | Primary text on dark backgrounds | **Secondary Hues** - **Violet:** #9E4EC4 medium · #5D137D dark · #C76FF2 light · #3C174C background - **Blue:** #2C80CE medium · #10487B dark · #509DEA light · #0D3152 background - **Teal:** #1AA8A8 medium · #0F5353 dark · #50DBD9 light · #093434 background **Carbon Scale (Neutrals)** #E5E8EB 100 · #CBD1D7 200 · #B9C2CA 300 · #A2ADB9 400 · #8B96A2 500 · #74808B 600 · #5D6974 700 · #424D57 800 --- ## Typography **Primary fonts (licensed):** Moderat (regular/medium/bold for marketing; thin/light/black for product). **Mono:** Moderat Mono. **Free fallbacks:** DM Sans + DM Mono (Google Fonts) — use for Office/Workspace deliverables. **Rules:** Black or white text only · left-aligned · italics for titles only · lining numerals · slashed zeros in mono. **Sizes:** Large headlines 44–72pt · medium 28–36pt · body 12–16pt · captions 9–11pt. --- ## Logo Assets | 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 logo) | | TiDB-Logo-w-Tagline-Full-Pos-RGB.png | Light backgrounds, with tagline | | TiDB-Logo-w-Tagline-Full-Rev-RGB.png | Dark backgrounds, with tagline | | TiDB-Logo-w-Tagline-1c-Rev-RGB.png | Brand Red background, with tagline | Files: https://github.com/yybaroq/tidb-brand/tree/main/assets/logos/ **Clear space:** 2× the height of one hexagon segment around the logo. **Minimum sizes:** 48px / 0.5in (no tagline), 84px / 0.875in (with tagline). Symbol-only minimum: 18px. **Don'ts:** Stretch, rotate, recolor, add effects, place over photography, use logotype without symbol, use on non-palette colors. --- ## The Cornerstone Graphic System The Cornerstone is TiDB's primary graphic element — an isometric cube representing scalable architecture. Always **monochromatic** within one hue family: dark face = left, medium face = right, light face = top. ### Asset Library Organization #### `assets/cornerstones/` — single solid cubes Compact cubes for spot illustrations, slide accents, social tiles: | Filename pattern | Size | Use | |---|---|---| | cornerstone-{red,blue,violet,teal}-A/B.svg | 361 × 399 | Hero/featured cube, large slide accent | | cornerstone-{red,blue,violet,teal}-small-A/B.svg | 312 × 324 | Inline icon, compact bug, list bullet | #### `assets/cornerstones-grid/` — cube + dashed isometric grid Shows scalability. 600 × 433. One per color × 2 orientations: `cornerstone-grid-{red,blue,violet,teal}-{A,B}.svg` #### `assets/matrices/` — Cornerstone matrix (multiple cubes, one filled) Dense pattern of outline cubes with a single solid Cornerstone. 444 × 554: `matrix-{red,blue,violet,teal}-{A,B}.svg` #### `assets/lattices/` — dark cube stack/tower with red accent Premium, high-contrast hero graphic for black or near-black surfaces: - lattice-red-stack-light.svg / lattice-red-stack-dark.svg — 584 × 538 - lattice-red-tower-light.svg / lattice-red-tower-dark.svg — 632 × 730 #### `assets/scaffolds/` — outline grids and large isometric scaffolding Background scaffolding without a hero cube: - scaffold-{red,blue,violet,teal}-{light,dark}-cubes.svg — 499 × 412 (variants 1–8) - scaffold-cube-outline.svg — 409 × 518 - scaffold-red-large-grid.svg — 3486 × 2752 - scaffold-blue-large-grid.svg — 1352 × 1116 #### `assets/banners/` — pre-composed banner backgrounds Drop-in backgrounds for blog headers, social cards, slide footers. 910 × 480 unless noted: - banner-blue-on-darkred.svg - banner-violet-on-darkteal.svg - banner-blue-on-darkviolet.svg - banner-red-on-darkblue.svg - banner-violet-dark-strip.svg — 910 × 425 - banner-light-grid-strip.svg — 651 × 737 - banner-light-wide-1800x600.svg / .png #### `assets/cta-blocks/` — full-bleed CTA backgrounds 1440 × 574: `cta-{black,red,blue,violet,teal}.svg` #### `assets/textures/` — diagonal stripe patterns 1972 × 909: `texture-diagonal-A.svg` and `-B.svg` #### `assets/overview/` — reference / brand sheets - brand-sheet-cornerstones.svg — 2083 × 1190 overview poster - photo-hero.jpg — approved brand photography ### How to Pick an Asset (decision tree) 1. **Surface color?** - Light → prefer scaffold-*-light-cubes.svg, banner-light-*, cta-black, or any solid Cornerstone - Dark → prefer lattice-*-dark.svg, scaffold-*-dark-cubes.svg, cta-{red,blue,violet,teal}, or banners 2. **Accent color?** Pick matching color family (red is default; violet/blue/teal for variety or data-viz). 3. **Scale?** - Inline / icon → cornerstones/*-small-*.svg - Slide spot → cornerstones/*-A.svg or cornerstones-grid/* - Hero / cover → matrices/* or lattices/* - Full-bleed background → cta-blocks/* or banners/* - Decorative texture → scaffolds/* or textures/* --- ## Output Format Specifications ### Social Media | Platform | Size | |----------|------| | LinkedIn Post | 1200 × 627 | | LinkedIn Cover | 1128 × 191 | | Twitter/X Post | 1200 × 675 | | Twitter/X Header | 1500 × 500 | | Facebook Post | 1200 × 630 | | WeChat Article | 900 × 500 | | WeChat Moment / Instagram Post | 1080 × 1080 | | Instagram Story | 1080 × 1920 | ### LinkedIn Image Recipe For LinkedIn feed cards, load `@brain/playbooks/social-image-recipes.md` and follow its recipe. Default canvas is `1200 × 627`. Required composition: - Dark, text-free AI scene or brand illustration. - Left 55% reserved as clean black negative space for the headline. - Campaign metaphor or object in the right third. - TiDB logo top-left. - Compact campaign badge top-right. - 2-3 large headline lines on the left, with exactly one red/teal/orange accent line where possible. - No URL, CTA, hashtag, or small paragraph copy inside the image. Reference implementation: `scripts/image_pipeline/`. ### Slides / Documents Slides 16:9 = 1920 × 1080 · 4:3 = 1024 × 768 · A4 210 × 297 mm · US Letter 8.5 × 11 in. ### Display Ads 728 × 90 · 300 × 250 · 160 × 600 · 300 × 600 · 320 × 50. --- ## Integration with Other Skills ### PPTX ```python TIDB_COLORS = { 'brand_red': 'DC150B', 'dark_red': '87120C', 'light_red': 'F35048', 'black': '000000', 'white': 'FFFFFF', } # Backgrounds: black or white. Text: white on dark, black on light. Accent: brand_red. # For visual elements, embed an SVG from assets/ rather than drawing primitives. ``` ### DOCX Headings bold/black · body regular · accent #DC150B · font DM Sans (fallback for Moderat). ### HTML / Web artifacts ```css :root { --tidb-brand-red: #DC150B; --tidb-dark-red: #87120C; --tidb-light-red: #F35048; --tidb-black: #000000; --tidb-white: #FFFFFF; --tidb-carbon-100: #E5E8EB; --tidb-carbon-200: #CBD1D7; --tidb-medium-violet: #9E4EC4; --tidb-dark-violet: #5D137D; --tidb-medium-blue: #2C80CE; --tidb-dark-blue: #10487B; --tidb-medium-teal: #1AA8A8; --tidb-dark-teal: #0F5353; --tidb-font-primary: 'DM Sans', 'Moderat', sans-serif; --tidb-font-mono: 'DM Mono', 'Moderat Mono', monospace; } ``` For visuals: `` or inline SVG. ### XLSX Header row Brand Red bg + white text · alternating rows white / Carbon 100 · borders Carbon 300. --- ## Accessibility (WCAG 2.0) **AAA:** White on black / background colors / dark colors · black on white / Carbon 100–300 / light colors. **AA:** White on Brand Red, Medium Violet · black on Carbon 400, Light Red, Medium Blue/Teal. --- ## Brand Voice Quick Reference ### Positioning (2026 — AI-native era) **One-liner:** "TiDB is the distributed SQL database built for AI agents — vectors, transactions, and analytics in one engine with ACID guarantees and elastic scale." **Hero headlines:** - "Database for Agentic AI" - "Scale Your AI Agents Without Compromise" - "The Database Behind Every AI Agent" - "AI-Native Distributed SQL Database" ### Five Product Pillars | Pillar | Promise | |---|---| | Elastic Scale | Expand instantly to match demand, then scale to zero when idle | | Unified Engine | Query vectors, transactions, and analytics in a single call | | Consistent State | Give every agent action a reliable, up-to-date view of the data | | Agent Autonomy | Run concurrent AI agents without interference or compromise | | Developer Ready | Build with the tools and syntax your agents and developers already know | ### Tone Builder-to-builder, technical, specific. Numbers > adjectives. **Avoid:** "Revolutionary", "game-changing", "blazing fast", "next-gen", "best-in-class", "seamlessly." --- ## See Also - `@brain/knowledge/brand.md` — complete brand system: colors, typography, logo, Cornerstone, layouts - Asset library (visual index): https://github.com/yybaroq/tidb-brand/blob/main/preview.html - Asset files: https://github.com/yybaroq/tidb-brand/tree/main/assets/ ## Pairs with - `tidb-brand-voice` — copy tone, naming rules, banned phrases, channel voice - `tidb-content-review` — final brand consistency check before any external publish --- ## Source and credits This skill and its companion brain file (`brain/knowledge/brand.md`) are ported and adapted from **[tidb-brand](https://github.com/yybaroq/tidb-brand)** — the TiDB visual brand system authored by **Yan Yang ([@yybaroq](https://github.com/yybaroq))**. The original repository contains the full brand guidelines, design rationale, and the complete 74-asset library. Refer to it as the upstream source for asset updates and design system changes.