# Og Brand
> Generate a complete OpenGradient-branded website with bold design, micro-animations, and scroll effects. Writes an HTML file and opens it in the browser.
- Skill: `golldyck/og-brand` (Agent Skill, multi-file: 25 files)
- Install (CLI): `npx skillmds@latest add golldyck/og-brand`
- Raw SKILL.md: https://api.skillmd.com/api/skills/golldyck/og-brand/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: golldyck (https://skillmd.com/u/golldyck)
- Updated: 2026-09-22
- Page: https://skillmd.com/skills/golldyck/og-brand
---
## Objective
Generate a production-ready, visually distinctive single HTML file using the OpenGradient brand skill (`og-skill.js` via CDN). Parse the user's description, choose a bold design direction, write complete HTML with animations, and open it in the browser immediately.
## CDN Setup (always required)
```html
```
This single script auto-loads `og-brand.css` and injects the official logo SVG wherever `data-og-logo="wordmark"` is found.
## Theme Selection
Choose the theme based on the product context:
| Theme class on `` | Use when |
|---|---|
| `og-scope` | Dark navy — AI/tech products, infra, nodes, developer tools |
| `og-scope og-light` | White/teal — matches real opengradient.ai; use for OG marketing pages, grants, ecosystem sites |
| `og-scope og-finance` | Dark + mono data — trading, analytics, dashboards, leaderboards |
| `og-scope og-minimal` | Ultra-clean white — consumer apps, SaaS, MemSync-style |
## Logo Rule (critical)
**Always** use `` in the nav.
- On **light backgrounds** (`og-light`, `og-minimal`): add `filter: brightness(0)` to make the white SVG dark.
- On **dark backgrounds** (`og-scope`, `og-finance`): no filter needed.
- **Never** write custom inline SVG as a logo.
- **Never** use text "OpenGradient" styled as a logo.
- Footer logo: `style="height:22px; opacity:.4;"` (+ `filter: brightness(0)` on light themes).
## Brand Tokens
```css
/* Core palette */
--og-blue: #24bce3 /* primary accent */
--og-navy: #0a0f19 /* dark bg */
--og-navy-mid: #141e32 /* cards */
--og-teal-dark: #0e4b5b /* dark text on light */
--og-green: #41c885 /* success / finance gains */
--og-red: #f05168 /* error / finance losses */
/* Hub tokens */
--og-hub-blue: #11558e
--og-hub-pink: #e74771
--og-hub-blue-light: #CEE5F9
--og-hub-bg-darkest: #03111c
```
## Component Classes
Use these from `og-brand.css`:
```
og-scope, og-light, og-finance, og-minimal, og-hub
og-h1 … og-h4, og-body, og-caption
og-btn og-btn-primary, og-btn-secondary, og-btn-lg, og-btn-sm
og-btn-dark, og-btn-mono ← for og-light theme (UPPERCASE pill buttons)
og-card, og-grid, og-badge, og-badge-primary
og-divider, og-nav, og-hero, og-container, og-section
og-text-gradient ← static cyan gradient text
og-reveal ← scroll-triggered fade+slide up
og-float ← gentle float animation
og-levitate ← slower premium levitate with shadow
og-pulse-glow ← radial glow pulse (for badges, CTAs)
og-shimmer ← shimmer sweep
og-tilt ← 3D tilt on hover (cards)
og-stagger, og-stagger-fast ← stagger children entrance
og-marquee + og-marquee__track + og-marquee__item ← infinite scroll ticker
og-table-wrap + og-table ← data table with hover rows
og-tabs + og-tabs__nav + og-tabs__tab + og-tabs__panel
og-timeline + og-timeline__item
og-progress + og-progress__bar
og-alert (--info, --success, --warning, --error)
og-count-up ← number counter on scroll (data-target="2400")
```
## Animation Patterns (embed in `