# DCS AI Social Media Kit
All assets in this folder are released for free use across your social media properties and brand surfaces. Same colors, same typography, same mark — consistent across every channel.
## File index
| File | Use case | Dimensions |
|---|---|---|
| `favicon.svg` | Browser tab icon (root site) | 32×32 source, scales to any size |
| `dcsai-mark.svg` | App icon, social avatar, square branding | 128×128 source |
| `dcsai-wordmark-dark.svg` | Wordmark on dark backgrounds | 320×80 source |
| `dcsai-wordmark-light.svg` | Wordmark on white backgrounds | 320×80 source |
| `dcslabs-wordmark-dark.svg` | DCS Labs wordmark on dark | 380×80 source |
| `dcslabs-wordmark-light.svg` | DCS Labs wordmark on light | 380×80 source |
| `twitter-banner.svg` | Twitter/X profile header | 1500×500 (X spec) |
| `linkedin-banner.svg` | LinkedIn personal + company page header | 1584×396 (LinkedIn spec) |
| `og-launch.svg` | OpenGraph share preview for /blog/coming-live | 1200×630 (OG spec) |
## Where to use what
| Platform | Avatar | Banner | Share image |
|---|---|---|---|
| X (Twitter) | `dcsai-mark.svg` (export as 400×400 PNG) | `twitter-banner.svg` (export as PNG, 1500×500) | `og-launch.svg` (PNG, 1200×630) |
| LinkedIn (personal) | personal photo | `linkedin-banner.svg` (PNG, 1584×396) | `og-launch.svg` (PNG, 1200×630) |
| LinkedIn (company) | `dcsai-mark.svg` (PNG, 400×400) | `linkedin-banner.svg` (PNG, 1584×396) | same |
| GitHub org | `dcsai-mark.svg` (PNG, 460×460) | — | — |
| Farcaster | `dcsai-mark.svg` (PNG, 256×256) | — | OG image (auto) |
| Browser favicon | `favicon.svg` direct + 16×16 + 32×32 + 180×180 PNG fallbacks | — | — |
| npm package | `dcsai-mark.svg` (registered as `iconUrl` in package.json) | — | — |
## Converting SVG → PNG (for platforms that don't accept SVG)
```bash
# Using rsvg-convert (Homebrew: brew install librsvg)
rsvg-convert -w 400 -h 400 dcsai-mark.svg -o dcsai-mark-400.png
rsvg-convert -w 1200 -h 630 og-launch.svg -o og-launch-1200x630.png
rsvg-convert -w 1500 -h 500 twitter-banner.svg -o twitter-banner.png
# Or using ImageMagick (brew install imagemagick)
magick convert -background none -size 1200x630 og-launch.svg og-launch.png
# Or upload the SVG to https://cloudconvert.com/svg-to-png if you don't want to install tools
```
## OG metadata block to add to every page
Drop this into the `` of any page you want shared cleanly on X / LinkedIn / Facebook:
```html
```
## Favicon installation
Drop into the `` of every page:
```html
```
To generate the PNG fallbacks from `favicon.svg`:
```bash
for size in 16 32 180; do
rsvg-convert -w $size -h $size favicon.svg -o brand/favicon-${size}.png
done
mv brand/favicon-180.png brand/apple-touch-icon.png
```
## Brand colors (reminder)
| Token | Hex | Use |
|---|---|---|
| Accent | `#1e7eff` | Primary blue, CTA buttons, gradient start |
| Accent-2 | `#4aa3ff` | Hover blue, gradient end, link color |
| Background | `#0a0a0f` | Dark theme background |
| Surface | `#13131a` | Card / panel background on dark |
| Text | `#e8e8ec` | Primary text on dark |
| Dim | `#9c9ca8` | Secondary text on dark |
| Green | `#34d399` | Success states, "live" indicators |
| Amber | `#fbbf24` | Warnings, draft status |
| Red | `#f87171` | Errors, critical alerts |
## Typography
- **Display:** Inter (700, 800)
- **Body:** Inter (400, 500, 600)
- **Mono:** JetBrains Mono (400, 500, 600, 700)
Both available free from Google Fonts.
## Media use policy
Use freely in editorial, press, and educational contexts without prior permission. Don't alter colors, proportions, or add effects to the wordmarks. For commercial use beyond editorial (e.g., merchandise, ads paid by third parties), email **press@dcsai.ai**.