Add brand design system reference guide

[jianreis]

Summary

• Adds a comprehensive brand design system reference document to Guides/
• Documents all visual identity tokens extracted from tazama.org: colors, typography, spacing, buttons, shadows, border radius, and layout
• Follows existing docs style conventions (SPDX header, TOC, numbered sections, Top navigation links)

Contents

• Logo — primary logo usage, icon mark, SVG color classes
• Color palette — brand core (Deep Green, Teal, Orange), teal/green tints, neutrals, semantic colors
• Typography — Open Sans type scale (48px down to 10px), font weights, letter spacing
• Buttons — four variants (Primary CTA, Secondary, Dark, Outline) with hover states
• Spacing — WordPress preset scale (0.44rem–5.06rem)
• Border radius & Shadows — brand-tinted shadow values
• Layout — container widths, header heights, breakpoints
• CSS custom properties — copy-paste-ready reference block

Test plan

• Verify markdown renders correctly on GitHub
• Confirm color hex values match tazama.org
• Check TOC links resolve to correct sections

🤖 Generated with Claude Code

Summary by CodeRabbit

• Documentation
  • Added a comprehensive Brand Design System guide documenting complete branding standards including logo usage, color palette specifications, typography guidelines, UI component patterns, spacing definitions, border radii, shadow specifications, and layout tokens. Includes concrete design values and CSS custom properties for consistent brand implementation across all platforms and touchpoints.

[coderabbitai]

📝 Walkthrough

Walkthrough

A new comprehensive Brand Design System reference document was added, consolidating branding tokens, guidelines, and specifications across logo usage, color palettes, typography, UI components, spacing, borders, shadows, layout, and CSS custom properties.

Changes

Cohort / File(s)	Summary
Brand Design System Documentation Guides/brand-design-system.md	New reference document containing complete brand design system specifications including color tokens, typography guidelines, component definitions, spacing scale, shadows, layout tokens, CSS custom properties, and platform/tooling notes (WordPress, Salient theme, WPBakery, Font Awesome).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Poem

🐰 A carrot-colored guide now shines so bright,
With tokens, hues, and spacing just right,
From shadows deep to typography grand,
The brand design system takes its stand!
A reference true for all to see,
Consistency blooming, wild and free! 🥕

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title 'Add brand design system reference guide' directly and clearly summarizes the main change: adding a comprehensive brand design system reference document to the Guides/ directory.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@Guides/brand-design-system.md`:
- Around line 286-296: Check and update the Technical Notes table entries for
external dependencies: verify the live site tazama.org current versions for
"WordPress 6.9", "Salient (ThemeNectar) v18.0.2", and "Font Awesome 6.0" (and
any other listed items like WPBakery, Open Sans source) by inspecting the site
admin/dashboard, theme/plugin details, and served assets; then replace the
values in the table (the cells containing "WordPress 6.9", "Salient
(ThemeNectar) v18.0.2", and "Font Awesome 6.0") with the confirmed versions and
add a short note or date of verification if versions differ.

🧹 Nitpick comments (1)

Guides/brand-design-system.md (1)

7-7: Add an “as of” date for the extracted tokens.

This content is a snapshot from a live site; adding an extraction date will prevent future ambiguity.