RENEWABLE DREAM TEAM LLC
BRAND STYLE AND TEXT GUIDE
FONT: Oswald (Primary); Calibri, Arial (Fallback)
SIZES: 12px, 16px, 20px, 24px, 32px, 40px, 55px
SETTINGS: bB bB iI iI uU uU uU Uu
PRIMARY COLORS
Primary Blue
Deep Navy
Solar Orange
Vivid Green
Neutral Grey
Sunlight Yellow
Signal Red
COLOR PALETTES
Primary Blue – #046ABB
Analogous
Monochromatic
Complementary
Split Complementary
Triadic
Tetradic
Deep Navy – #00197A
Analogous
Monochromatic
Complementary
Split Complementary
Triadic
Tetradic
Solar Orange – #F87F12
Analogous
Monochromatic
Complementary
Split Complementary
Triadic
Tetradic
Vivid Green – #37CA37
Analogous
Monochromatic
Complementary
Split Complementary
Triadic
Tetradic
Neutral Grey – #9FA1A3
Neutral Grey Ramp
Sunlight Yellow – #FFCC00
Analogous
Monochromatic
Complementary
Split Complementary
Triadic
Tetradic
Signal Red – #EA3C2D
Analogous
Monochromatic
Complementary
Split Complementary
Triadic
Tetradic
BRAND USAGE GUIDELINES
Logo Usage
The Renewable Dream Team logo should always be displayed with proper clearance space around it. The minimum clearance space should be equal to the height of the "R" in the logo.
Do not distort, recolor, or alter the logo in any way that compromises its integrity. Always use the approved versions provided in this guide.
Allowed backgrounds: Neutral Grey-100 or solid brand colors (Blue-500, Navy-700). Do not place on busy backgrounds or add drop-shadows.
Typography
Oswald is the primary brand font for headlines and key messaging. For body text, use Calibri or Arial as a fallback.
Headlines should use size 55pt, 24pt, or 16pt as specified in the brand guidelines.
- Headline (H1): Oswald Bold, 55 pt, uppercase
- Subhead (H2): Oswald Regular, 24 pt, sentence case
- Body: Calibri/Arial, 16 pt, line-height 1.5, Neutral Grey-900 (#0D0103)
Font Sizes
Line Heights
- Body/text: 1.5 (24px on 16px text)
- Headlines (≥24px): 1.25
Letter Spacing
- All-caps: 0.05em
- Headlines (Oswald): -0.02em
Layout & Spacing
Spacing Scale (no two values closer than ~25% apart):
- Component gutters: use --space-2 (16px) inside cards & lists
- Group vs. group: ensure inter-group margin ≥ --space-3 (24px) to avoid ambiguous spacing
- Max container width: 1280px; center with margin: 0 auto;
- Card backgrounds: use Grey-50 (#E7E6E6) → Grey-100 (#CFCCCD)
- Section dividers: 1px solid Grey-200 (#B6B3B3)
- Alerts:
- Success: fill Green-100 (#CCFFC8) + border Green-500 (#37CA37)
- Error: fill Red-100 (#FFD5D3) + border Red-500 (#EA3C2D)
Elevation & Depth
Box-shadow tokens (two-part shadows):
- Cards & dropdowns: use --shadow-md
- Modals & tooltips: use --shadow-lg
- Overlaps: let panels overhang slightly to reinforce stacking
Medium Shadow
--shadow-md
Large Shadow
--shadow-lg
Radius & Corners
Pick one radius per context and stay consistent—mixing radii undermines polish.
Small Radius
4px
Medium Radius
8px
Large Radius
16px
Color Application
Primary Blue (#046ABB) and Deep Navy (#00197A) should be used as the primary colors for most applications.
Solar Orange (#F87F12) provides accent and energy, and should be used sparingly for highlights or calls to action.
Vivid Green (#37CA37) represents sustainability and growth, suitable for environmental messaging.
Neutral Grey (#9FA1A3) provides balance and can be used for body text or subtle backgrounds.
Final Do's & Don'ts
Do
- ✓ Keep core surfaces and text within Monochromatic & Analogous families
- ✓ Use Complementary only for highest-priority CTAs or alerts
- ✓ Document token names and usage examples in your code repo
Don't
- ✗ Create new hues outside the established wheel relationships
- ✗ Layer more than two high-contrast colors without a neutral buffer
By following these expanded guidelines—defining clear roles, naming tokens consistently, ensuring accessibility and documenting state palettes—you'll guarantee that every screen and interaction feels unmistakably "Renewable Dream Team."
Color Roles & Hierarchy
Use the following guidelines to ensure consistent application of our brand colors across different contexts:
| Role | Palette Source | Example Usage |
|---|---|---|
| Primary UI | Blue Mono & Analogous | Nav bars, primary buttons, headers |
| Secondary UI | Navy Mono & Analogous | Sub-navigation, secondary buttons |
| Highlights / CTAs | Solar Orange Mono / Comp. | Links, primary calls-to-action, badges |
| Success / Eco-msg | Vivid Green Mono / Analogous | "Task completed," environmental badges |
| Warnings / Alerts | Signal Red Mono / Comp. | Error states, destructive actions |
| Data Visualizations | Triadic / Tetradic sets | Charts, graphs (3-series or 4-series) |
| Backgrounds & Text | Neutral Grey Ramp | Page backgrounds, body text, dividers |
Tip: Reserve "big leaps" (Complementary, Triadic, Tetradic) for moments you need user attention. Use Monochromatic and Analogous for everyday surfaces and states.
Naming Conventions & Variables
In your CSS or design tokens, normalize to 6-digit hex and drop the FF alpha. For each hue, define a scale from light to dark:
Scale numbers (50–900): light → base → dark
Roles:
- -base (or -500) = "brand primary"
- -hover = next darker shade (e.g. -600)
- -active = even darker (e.g. -700)
- -disabled = very light tint (e.g. -100)
- -contrast = your complementary hue
Accessibility & Contrast
WCAG AA for normal text: 4.5:1
WCAG AAA for large text (≥24 px bold or ≥19 px regular): 3:1
Checklist:
- Body text on grey-200 (≈ #CFCCCD) vs. grey-900 (≈ #0D0103) → OK
- White text on Navy-700 → check ≥ 4.5:1
- Button text on Orange-500 → check ≥ 4.5:1
- Border on background contrasts by ≥ 3:1
Use a contrast-checker plugin in your design tool to validate each combination.
Component State Palettes
| Component | Default | Hover | Active | Disabled |
|---|---|---|---|---|
| Primary Btn | --red-500 | --red-600 | --red-700 | --red-100 |
| Secondary | --blue-500 | --blue-600 | --blue-700 | --blue-100 |
| Success | --green-500 | --green-600 | --green-700 | --green-100 |
Disabled: use your lightest tint + 40% opacity text
Focus outline: 2 px solid var(--yellow-500) for high visibility