Reef Remix — Style Guide & Page Template

Colour Palette

🎨 Brand Colours — copy these exact hex values everywhere

Primary

Hot Pink#FF3D85

Lime#7FD636

Turquoise#3CC4D4

Navy#1A4A8A

Yellow#FFD93D

Secondary

Coral#FF7BA8

Orange#FF8A3D

Purple#9B6DFF

Navy Deep#0E3266

Lime Deep#5BB81E

Text on dark backgrounds

On-dark#FFF8E8

On-dark soft#B8D4F0

Ink soft#3A5A8C

Ink faint#8FA3AF

💡

Category colour coding (match these across all pages): Turquoise = Planning · Pink = Content · Lime = Brand · Orange = Ops · Navy = Legal · Yellow = External/Highlight · Purple = Algorithm/Tech · Coral = Fun/Casual

Typography

🔤 Fonts — two only, always

Display / Headings

Fredoka

Used for: all headings, nav brand, buttons, badges, labels, card titles, section names, numbers. Never use for body copy.

Weights used: 500 · 600 · 700

Body / UI text

Nunito

Used for: all body copy, descriptions, help text, nav subtitles, long-form content. Always bold — minimum weight 600.

Weights used: 600 · 700 · 800 · 900

Monospace — code, file paths, IDs

Fira Code — RR-SNG-0001-brush-brush-brush-v01-FINAL.mp3

📏 Type scale — copy these classes

.page-title Page Title

.h1 Section heading one

.h2 Section heading two

.h3 / .card-title Card or subsection title

.body-text Body copy — 14px Nunito 700. Always use this for descriptions and paragraphs.

.label-text SMALL LABEL — 11px UPPERCASE

Cards

.card — standard white

📋 Card Title Here

This is the standard card. White background, 3px navy border, 6px drop shadow. Used for most content blocks.

.card-accented — coloured top bar

🎵 Accented Card

Add a colour bar on top. Change the background colour to match the section. Great for resource cards.

.card.card-teal — tinted card

🌊 Teal Card

For featured callouts, intro blocks, "what is this" sections. Text goes white on dark cards.

.card.card-yellow — highlight card

💡 Yellow Card

For tips, important notes, action items. Penny's fill-in sections. Ink stays navy on yellow.

.card-glass — frosted, on dark bg

✨ Glass Card

For status strips, metadata footers, or when you want a card that sits lightly on the ocean background.

.card-sm — compact card

Small Card

Less padding. For dense lists, sidebar items, or supplemental content.

Buttons

🖱️ Button Classes

btn-yellow btn-pink btn-white btn-teal btn-ghost

btn-sm default btn-lg

📌

Rule: Primary CTA = btn-yellow. Secondary = btn-white. Destructive/urgent = btn-pink. Ghost buttons only on dark/ocean backgrounds.

Badges & Tags

🏷️ Badges (small status indicators)

Ready Draft Coming Soon New External Warning Key Field

🔖 Tags (dimension chips)

Callout Boxes

💡

callout-yellow: Action items, most important info, things Penny needs to fill in.

ℹ️

callout-teal: Info and context. Helpful background. Not urgent.

🎵

callout-pink: Content-related notes. Penny's voice guidelines. Creative direction.

✅

callout-lime: Success states, completed items, approved content.

⚠️

callout-warn: Warnings, hard rules, things that will break the system if ignored.

🔒

callout-navy: Legal, COPPA, compliance, security notes.

Step Lists & Pipeline

.step-list — numbered steps

1

First step title

Description of what happens here and who does it.

2

Second step

Rotate through brand colours for each step.

3

Third step

Colour the border and number together.

.pipeline — horizontal status bar

💡 Idea

Anyone submits via form.

✍️ Draft

Writer assigned.

✅ Done

Approved + live.

Page Shell — Copy This Every Time

⚠️

Always start with this shell. Every page on the team hub uses the exact same structure. Only change what's inside .container. Never change the nav, bubbles, background, or footer.

<!-- 1. HEAD — copy exactly, change only the title -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Reef Remix — [Page Name]</title>
  <meta name="robots" content="noindex, nofollow">
  <link href="https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700
    &family=Nunito:wght@600;700;800;900
    &family=Fira+Code:wght@400;500&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/team/rr-styles.css">
</head>

<!-- 2. BODY SHELL — copy exactly -->
<body>
  <div class="bubbles" aria-hidden="true">
    <div class="bubble"></div> <!-- repeat 5–8 times -->
  </div>

  <nav class="app-nav">
    <a class="nav-brand" href="/">
      <div class="nav-logo"><img src="/reef-remix-logo.png" alt="RR"
        onerror="this.parentElement.textContent='RR'"></div>
      <div class="nav-brand-text">Reef Remix
        <small>[Page Name]</small></div>
    </a>
    <div class="nav-right">
      <span class="nav-internal-badge">🔒 Internal</span>
      <a class="nav-back-btn" href="/team">← Team Hub</a>
    </div>
  </nav>

  <main class="container"> <!-- or container-narrow / container-wide -->

    <nav class="breadcrumb">
      <a href="/team">Team Hub</a>
      <span class="breadcrumb-sep">/</span>
      [Page Name]
    </nav>

    <div class="page-header anim-1">
      <div class="page-eyebrow">[Section Label]</div>
      <h1 class="page-title">[Title with .pk .yw .tl .lm accents]</h1>
      <p class="page-subtitle">[One sentence — what this page is and who it's for]</p>
    </div>

    <!-- YOUR CONTENT GOES HERE -->

  </main>

  <footer class="page-footer">
    <div class="footer-tagline">Tune up your tomorrow.</div>
    <div class="footer-info">Reef Remix LLC
      <span>·</span> Summer 2026
      <span>·</span> Team Internal</div>
  </footer>
</body>
    

📁

The stylesheet: Save rr-styles.css to your /team/ folder. Every page in the hub links to it. You only maintain one stylesheet — never embed styles page-by-page.

URL & Folder Rules

📁 Every new page = a folder with index.html

public_html/
├── index.html                    → reefremix.com
└── team/
    ├── index.html                → reefremix.com/team
    ├── rr-styles.css             → shared stylesheet for all team pages
    ├── content-planning-system/
    │   └── index.html            → reefremix.com/team/content-planning-system
    ├── file-system/
    │   └── index.html            → reefremix.com/team/file-system
    ├── coppa-training/
    │   └── index.html            → reefremix.com/team/coppa-training
    └── character-bible/
        └── index.html            → reefremix.com/team/character-bible
      

1Folder names: lowercase, hyphens only, no spaces. coppa-training not COPPATraining

2The file inside is always called index.html — never coppa-training.html

3All image and asset paths: use root-relative (/reef-remix-logo.png) not relative (../../reef-remix-logo.png)

4Link rr-styles.css as /team/rr-styles.css from every subpage — root-relative so it works at any depth

5Every page must have <meta name="robots" content="noindex, nofollow"> — team pages don't go in Google

Reef Remix Style Guide