Site Style Guide
🎨 Brand Color Palette
| Color | HEX Code | Usage |
|---|---|---|
| Primary | #806000 | Logo, links, key buttons |
| Accent | #B28700 | CTA buttons, highlights |
| Secondary Text | #4B2E00 | Headings, small titles |
| Body Text | #403020 | Paragraphs and content |
| Background | #FDF2D0 | Page background |
| Muted Gold | #F5CC63 | Subsection backgrounds |
| Hero Gold | #B78B28 | Hero sections |
| Line / Border | #E6D4A0 | Dividers and form borders |
| Link Hover | #9A6E00 | Hover color for links |
🔠 Typography Hierarchy
| Text Role | Font Family | Size | Weight / Style | Usage Example |
|---|---|---|---|---|
| H1 – Page Titles | Playfair Display / Georgia | 48px | Bold | Submit Your Project |
| H2 – Section Headings | Georgia / Open Sans | 36px | Bold | Why Submit to FAVunite TV? |
| Body Text | Open Sans / Inter | 16–18px | Regular | We welcome emerging Black storytellers worldwide. |
| Button Text | Open Sans / Poppins | 16px | Bold / 600+ |
🧱 UI Components
| Element | Preview | Description |
|---|---|---|
| Primary Button | Used for main calls-to-action | |
| Accent Button | Used for secondary actions | |
| Text Link (Hover) | Visit FAQ | Styled hover for internal links |
| Icon Box |
 Filmmakers |
Used in “We Welcome Submissions From” section |
| Form Field | Form styling with branded border color |
📐 Layout & Spacing Guidelines
| Element | Spacing / Size | Guideline |
|---|---|---|
| Section Padding | Top/Bottom: 60px Left/Right: 20px |
Ensure breathing room between content blocks |
| Widget Spacing | Vertical Margin: 20px | Maintain visual rhythm |
| Text Line Height | 1.6–1.8 | Improve readability on all screens |
| Column Gaps | 20–30px | Use Inner Section padding or responsive controls |
| Responsive Breakpoints |
Desktop: 1024px+ Tablet: 768px–1023px Mobile: <768px |
Ensure all pages look great across devices |
| Button Padding | 12px 24px | Creates a clickable area and balanced button size |