# Brand Information & Design System Template
> [!NOTE]
> **HOW TO USE THIS TEMPLATE**: Replace all placeholder values `[LIKE_THIS]` with your specific color hex codes, font links, and aesthetic definitions. Provide this file to your AI developer to ensure full visual consistency, correct CSS framework configs, and rapid UI development.
---
## 1. Logo Asset Registry
Use this table to map out your primary graphic assets so the system knows exactly which file paths to call.
| Asset Type | File Path Placeholder | Intended Web Placement |
|:---|:---|:---|
| **Full Horizontal Logo** | `assets/logo/[fulllogo_horizontal].png` | Desktop Navbars, Header banners |
| **Square/Vertical Logo** | `assets/logo/[logo_vertical].png` | Hero graphics, large marketing spots |
| **Icon Only (no text)** | `assets/logo/[icon_only].png` | Favicons, mobile navbars, profile avatars |
| **Transparent SVG** | `assets/logo/[logo_transparent].svg` | High-definition print, multi-colored backgrounds |
### Logo Usage Guidelines
* **On Dark Surfaces**: Use `[horizontal/icon-only logo path]` with light/gold accents.
* **On Light Surfaces**: Use `[dark text or transparent SVG logo path]`.
* **Minimum Display Padding**: Always preserve a padding clearance of `[e.g., 16px]` around logo placements.
---
## 2. Brand Color Palette
Define your color tokens here. Use these names when communicating with your CSS frameworks or variables.
### Primary Color Block
#### [Primary Dominant, e.g., Base Navy]
* **Token Name**: `brand-primary`
* **Hex Code**: `#[HEX_1]` (e.g., `#0D0D50`)
* **RGB**: `rgb([R], [G], [B])`
* **Usage**: Page backgrounds, dominant structural panels, footer bases, primary blocks.
#### [Secondary Accent, e.g., Gold Accent]
* **Token Name**: `brand-accent`
* **Hex Code**: `#[HEX_2]` (e.g., `#FCD408`)
* **RGB**: `rgb([R], [G], [B])`
* **Usage**: Primary headings, highlight badges, primary call-to-action buttons, high-priority icons.
#### [Tertiary Accent, e.g., Purple Energy]
* **Token Name**: `brand-accent-secondary`
* **Hex Code**: `#[HEX_3]` (e.g., `#8B53FF`)
* **RGB**: `rgb([R], [G], [B])`
* **Usage**: Hover states, interactive highlights, decorative borders, active status indicators.
---
### Supporting / UI Shades
| Role | Color Name | Hex Code | Ideal Element Placements |
|:---|:---|:---|:---|
| **Surface Elevated** | `brand-surface` | `#[HEX_4]` | Cards, dropdown menus, inner modals |
| **Accent Light** | `brand-accent-light` | `#[HEX_5]` | Text tag backgrounds, secondary highlights |
| **Accent Dark** | `brand-accent-dark` | `#[HEX_6]` | Pressed button states, dark underlines |
| **Body Text on Dark** | `text-on-dark` | `#F5F0FF` | Primary paragraph text inside dark containers |
| **Body Text on Light**| `text-on-light`| `#111111` | Primary paragraph text on white/light blocks |
| **Muted/Caption** | `text-muted` | `#999999` | Helper text, form labels, footer copyright |
---
## 3. CSS Framework Theme Configuration
### Tailwind CSS Configuration (v3 & v4 compatible)
Integrate this config snippet directly into your `tailwind.config.js` or CSS theme directive rules:
```js
module.exports = {
theme: {
extend: {
colors: {
'brand-primary': '#[HEX_1]',
'brand-accent': '#[HEX_2]',
'brand-accent-secondary': '#[HEX_3]',
'brand-surface': '#[HEX_4]',
'brand-accent-light': '#[HEX_5]',
'brand-accent-dark': '#[HEX_6]',
},
fontFamily: {
'display': ['"[DISPLAY_FONT_NAME]"', 'Georgia', 'serif'],
'heading': ['"[HEADING_FONT_NAME]"', 'Helvetica', 'sans-serif'],
'body': ['"[BODY_FONT_NAME]"', 'sans-serif'],
}
}
}
}
```
---
## 4. Typography Rules
### Google Fonts Import
Embed this pre-connect tag in your base HTML `` structure:
```html
```
### Font Selection & Roles
1. **Display Font (`font-display`)**: `[Display Font Name, e.g., Cormorant Garamond]`
* *Usage*: Main brand headers, huge hero headlines, stylistic uppercase quotes.
2. **Heading Font (`font-heading`)**: `[Heading Font Name, e.g., Playfair Display or Montserrat]`
* *Usage*: Secondary page titles, card headers, section titles.
3. **Body Font (`font-body`)**: `[Body Font Name, e.g., Inter or Roboto]`
* *Usage*: Informational body text, paragraphs, form inputs, button labels.
---
## 5. Brand Identity & Visual Aesthetic
* **Overall Brand Aesthetic**: `[Describe the primary visual vibe, e.g., "Sleek Minimalist Tech" (light mode first, sharp edges, neon borders) or "Upscale Classic Lounge" (dark mode first, gold accents, soft shadows).]`
* **Core UI Rules**:
* *Border-radius*: `[e.g., rounded-xl (12px) for a soft modern feel, or rounded-none for a brutalist, sharp vibe]`
* *Transitions*: `[e.g., transition-all duration-300 ease-in-out for smooth interactions]`
* *Whitespace / Padding*: `[e.g., Generous spacing with py-16 to py-24 on all main sections]`