Oak IV Hydration & Wellness Brand Guidelines

This skill provides official brand guidelines for the Oak IV Hydration & Wellness website. Apply these standards to all UI components, pages, and design elements.

Brand Overview

Company: Oak IV Hydration & Wellness Industry: IV Hydration and Wellness Services Brand Identity: Premium wellness brand using nature-inspired imagery (oak tree with roots) conveying strength, growth, and deep-rooted health.

Color Palette

Primary Colors

Name	Hex	RGB	Usage
Teal (Primary)	`#008778`	rgb(0, 135, 120)	Primary brand color, CTAs, headers, primary buttons
Gold (Accent)	`#CD8C00`	rgb(205, 140, 0)	Accents, highlights, secondary elements, tree/roots imagery
White	`#FFFFFF`	rgb(255, 255, 255)	Backgrounds, text on dark backgrounds
Dark (Black 6)	`#101921`	rgb(16, 25, 33)	Text, dark backgrounds, footer

CSS Variables

Define brand colors as CSS variables in the project:

css

:root {
  /* Primary Brand Colors */
  --oakiv-teal: #008778;
  --oakiv-teal-rgb: 0, 135, 120;
  --oakiv-gold: #CD8C00;
  --oakiv-gold-rgb: 205, 140, 0;
  --oakiv-white: #FFFFFF;
  --oakiv-dark: #101921;
  --oakiv-dark-rgb: 16, 25, 33;

  /* Semantic Aliases */
  --color-primary: var(--oakiv-teal);
  --color-accent: var(--oakiv-gold);
  --color-background: var(--oakiv-white);
  --color-text: var(--oakiv-dark);
}

Tailwind Configuration

When using Tailwind CSS, extend the theme:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        oakiv: {
          teal: '#008778',
          gold: '#CD8C00',
          dark: '#101921',
        }
      }
    }
  }
}

Typography

Primary Font: Larken

Larken is the official brand font. Use for headings, logos, and display text.

Available Weights:

•Thin (100)
•Light (300)
•Regular (400)
•Medium (500)
•Bold (700)
•Black (900)

All weights have italic variants (_I suffix).

Font Files Location: public/fonts/larken/

Available weights (with italic variants):

•Larken_THIN.otf / Larken_THIN_I.otf
•Larken_Light.otf / Larken_Light_I.otf
•Larken_Regular.otf / Larken_Regular_I.otf
•Larken_Medium.otf / Larken_Medium_I.otf
•Larken_BOLD.otf / Larken_BOLD_I.otf
•Larken_BLACK.otf / Larken_BLACK_I.otf

Font Usage Guidelines

Element	Font	Weight	Notes
H1 Headings	Larken	Bold/Black	Large display headings
H2-H3 Headings	Larken	Medium/Bold	Section headings
Body Text	System sans-serif or Inter	Regular	For readability
Navigation	Larken	Medium	Brand consistency
Buttons	Larken	Bold	CTAs and actions

CSS Font-Face Declaration

css

@font-face {
  font-family: 'Larken';
  src: url('/fonts/larken/Larken_Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Larken';
  src: url('/fonts/larken/Larken_Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Larken';
  src: url('/fonts/larken/Larken_Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Larken';
  src: url('/fonts/larken/Larken_BOLD.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}

Logo Assets

Location: public/images/logos/

Circular Emblem Logo Variants

Variant	Path	Use Case
Full Color	`/images/logos/OakIV_Color.png`	Primary use on light backgrounds
White	`/images/logos/OakIV_White.png`	On teal/dark backgrounds
White + Gold	`/images/logos/OakIV_White_Gold.png`	On teal backgrounds with gold accents
White + Green	`/images/logos/OakIV_White_Green.png`	Alternative white variant
Black	`/images/logos/OakIV_Black.png`	Monochrome applications
Gray	`/images/logos/OakIV_Gray.png`	Subtle/muted applications

Text Logo Variants (Horizontal)

Variant	Path	Use Case
Text Gold	`/images/logos/OAK_TEXT_Gold.png`	Horizontal text logo in gold
Text Green	`/images/logos/OAK_TEXT_Green.png`	Horizontal text logo in teal
Text Black	`/images/logos/OAK_TEXT_Black.png`	Horizontal text logo in black
Text White	`/images/logos/OAK_TEXT_White.png`	Horizontal text logo in white

Usage in Vue Components

vue

<!-- Circular logo on light background -->
<img src="/images/logos/OakIV_Color.png" alt="Oak IV Hydration & Wellness" />

<!-- Logo on teal/dark background -->
<img src="/images/logos/OakIV_White.png" alt="Oak IV Hydration & Wellness" />

<!-- Horizontal text logo -->
<img src="/images/logos/OAK_TEXT_Green.png" alt="Oak IV Hydration & Wellness" />

Logo Usage Rules

DO:

•Maintain original aspect ratio when scaling
•Use appropriate variant for background color
•Provide adequate clear space around logo
•Use vector formats (AI, PDF) for print

DON'T:

•Stretch or distort the logo
•Add effects, shadows, or outlines
•Place on busy backgrounds without contrast
•Modify colors outside approved variants

Design Elements

Decorative Assets

Asset	File	Usage
Gradient Element	`element_gradient_gold-teal.png`	Background accents
Metallic Bottom	`element_metallic-bottom.png`	Footer/bottom decorations
Sphere	`element_sphere.png`	Decorative orbs
Tree (Transparent)	`element_tree_transparent.pdf`	Hero sections, backgrounds

Visual Style

•Nature-inspired: Oak tree imagery, organic shapes
•Premium feel: Gold accents, clean layouts
•Wellness focus: Calming teal, spacious designs
•Professional: Clean typography, consistent spacing

Component Styling Patterns

Primary Button

vue

<template>
  <button class="btn-primary">
    <slot />
  </button>
</template>

<style scoped>
.btn-primary {
  background-color: var(--oakiv-teal);
  color: white;
  font-family: 'Larken', sans-serif;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
}

.btn-primary:hover {
  background-color: #006d62; /* Darker teal */
}
</style>

Secondary Button

vue

<style scoped>
.btn-secondary {
  background-color: var(--oakiv-gold);
  color: white;
  font-family: 'Larken', sans-serif;
  font-weight: 700;
}

.btn-secondary:hover {
  background-color: #b87a00; /* Darker gold */
}
</style>

Section Header

vue

<template>
  <h2 class="section-header">
    <slot />
  </h2>
</template>

<style scoped>
.section-header {
  font-family: 'Larken', serif;
  font-weight: 700;
  color: var(--oakiv-teal);
  margin-bottom: 1.5rem;
}
</style>

Additional Resources

Reference Files

For detailed brand specifications, consult:

•references/logo-guide.md - Complete logo usage guidelines
•references/color-applications.md - Color usage examples and combinations

Source of Truth (Additional Assets)

For additional brand assets not in the repo (vector files, decorative elements, additional font weights), access the full brand kit:

code

Google Drive: generative-bricks-corporate/02_clients/oakivhydration/50_digital_assets/00_brand/

Official Brand Guide PDF

code

00_brand/Business Logos/Oak IV Logo Guide 2023.pdf