---
version: alpha
name: Cross Gates Family Fitness
description: Brand standards and implementation guidance for AI agents.
colors:
  primary: "#0C2340"
  secondary: "#426DA9"
  accent-red: "#BA0C2F"
  accent-yellow: "#FFC72C"
  seasonal-orange: "#FF5C39"
  seasonal-pink: "#F890A5"
  seasonal-dark-green: "#6BA539"
  seasonal-light-green: "#B7DB57"
  white: "#FFFFFF"
  light-grey: "#C1C6C8"
  slate: "#5B6770"
  charcoal: "#373A36"
typography:
  h1:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "42px"
    fontWeight: 800
    lineHeight: "52px"
    letterSpacing: "-0.01em"
  h2:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "30px"
    fontWeight: 800
    lineHeight: "38px"
    letterSpacing: "0em"
  h3:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "20px"
    fontWeight: 700
    lineHeight: "28px"
    letterSpacing: "0.01em"
  body:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "16px"
    fontWeight: 400
    lineHeight: "26px"
    letterSpacing: "0em"
  micro:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "12px"
    fontWeight: 600
    lineHeight: "16px"
    letterSpacing: "0.02em"
  h1-mobile:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "32px"
    fontWeight: 800
    lineHeight: "40px"
    letterSpacing: "-0.01em"
  h2-mobile:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "24px"
    fontWeight: 800
    lineHeight: "32px"
    letterSpacing: "0em"
  h3-mobile:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "18px"
    fontWeight: 700
    lineHeight: "24px"
    letterSpacing: "0.01em"
  body-mobile:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "15px"
    fontWeight: 400
    lineHeight: "24px"
    letterSpacing: "0em"
  micro-mobile:
    fontFamily: "Nunito Sans, Arial, Helvetica, sans-serif"
    fontSize: "11px"
    fontWeight: 600
    lineHeight: "15px"
    letterSpacing: "0.02em"
rounded:
  control: "6px"
  inset: "8px"
  swatch: "10px"
  panel: "12px"
spacing:
  xs: "4px"
  sm: "8px"
  control: "12px"
  md: "16px"
  lg: "24px"
  section: "40px"
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.white}"
    rounded: "{rounded.control}"
  button-primary-hover:
    backgroundColor: "{colors.secondary}"
    textColor: "{colors.white}"
  body-on-light:
    textColor: "{colors.slate}"
    typography: "{typography.body}"
  body-on-dark:
    textColor: "{colors.white}"
    typography: "{typography.body}"
---

# Cross Gates brand standards

## Overview

Use this guide when creating Cross Gates Family Fitness interfaces, marketing assets, or documents. The [visual library](design) provides interactive examples. Resolve relative asset links against this document's URL; when building elsewhere, copy the assets into the destination project and update its paths.

The palette, type families, type sizes, allocation rules, and logo restrictions come from the supplied CG26 standards. Heading weights, spacing, rounding, and component defaults describe the current brand library implementation. Treat those implementation defaults as a starting point for new work, rather than additional source brand requirements.

Use plain section titles, concise factual descriptions, and direct action labels. Preserve the task's content and function. The library's sidebar, page layout, and tools are specific to this reference site; choose a layout appropriate to the artifact being built.

For requirements not specified here, consult the [original standards](downloads/cross-gates-source-library.zip). Minimum logo sizes and exact clear-space measurements are unspecified; keep the logo legible with adequate clear space and identify any proposed numeric rule as a proposal.

## Colors

YAML tokens above define exact digital values. Use the following roles:

| Token | Pantone | Use |
| --- | --- | --- |
| `primary` | 289 C | Main headings, navigation, primary actions, core backgrounds |
| `secondary` | 7683 C | Supporting sections, secondary actions, structural elements |
| `accent-red` | 200 C | Small calls to action, emphasis, urgency |
| `accent-yellow` | 123 C | Small highlights; use dark text |
| `seasonal-orange` | 171 C | Temporary campaign accent |
| `seasonal-pink` | 708 C | Temporary campaign accent |
| `seasonal-dark-green` | 7737 C | Temporary campaign accent |
| `seasonal-light-green` | 2298 C | Temporary campaign accent |
| `white` | — | Light surfaces; text on dark backgrounds |
| `light-grey` | 428 C | Borders and supporting surfaces |
| `slate` | 431 C | Body text and secondary headings on light surfaces |
| `charcoal` | 447 C | Neutral text and functional communication |

**Color allocation:** 60% primary + 20% secondary + 10% neutrals form the 90% structural core. Permanent accents share 7%; seasonal accents share 3%. These guide the balance of branded compositions; white-dominant reading interfaces are permitted by the layout guidance. Avoid treating color-reference swatches as an example of campaign allocation.

Use one seasonal palette per asset and restrict it to the campaign's duration. Permanent accents are for small highlights, rather than large background fills. Use exact source colors; avoid custom gradients or palette substitutions.

**Source discrepancy:** page 8 prints yellow as `#FCC72C`; pages 1, 9, and 10 agree on the `accent-yellow` token used here. Preserve original documents. For print RGB/CMYK values, read [source palette page 1](downloads/01%20-%20Brand%20Color%20System.md).

Use the [CSS color tokens](downloads/cross-gates-color-tokens.css) when a CSS export is useful. Its `--cg-*` names correspond to the same palette values.

## Typography

| Typeface | Role | Native weights | Brand-use share |
| --- | --- | --- | --- |
| Nunito Sans | Headlines, web copy, navigation, UI controls | 300, 400, 600, 700, 800 | 80% |
| Bitter | Print body, editorial paragraphs, long-form policies | 300, 400, 500, 600, 700; 400 italic | 15% |
| Kalam | Youth-program and informal promotional callouts | 300, 400, 700 | 3% |
| Oswald | Campaign headlines, badges, urgent callouts | 500, 600, 700 | 2% |

Use the desktop and mobile type tokens for their corresponding contexts. Body leading is approximately 1.6×; display leading is 1.25–1.4×. Print body uses Bitter at 11pt with 16pt leading. Microcopy sizes are reserved for compact metadata, rather than primary reading text.

Nunito Sans owns functional controls. Bitter is reserved for editorial reading. Oswald is used sparingly at display sizes, in all caps or title case with `0.02em`–`0.05em` tracking. Use real font files and weights; preserve letterform proportions and set `font-synthesis: none`. Bitter 400 italic provides soft editorial emphasis; Bitter 700 is for critical actions or strong callouts.

The [local font stylesheet](assets/fonts.css) includes all four families. Its font URLs resolve relative to that stylesheet; copy the stylesheet and its `fonts/` folder together when self-hosting elsewhere. Fallbacks: Nunito Sans → Arial/Helvetica/sans-serif; Bitter → Georgia/Times New Roman/serif; Kalam → Comic Sans MS/Marker Felt/cursive; Oswald → Arial Narrow/Trebuchet MS/sans-serif.

## Layout

Use navy, blue, or neutral white as the dominant structural surface. Use white or suitable light text on dark containers, and keep seasonal motifs secondary. Paragraphs are left-aligned with a ragged right edge; justified text is prohibited by the source standards.

For new interfaces, use responsive columns, readable text measures, wrapping controls, and tables that scroll within their container. The current library uses a maximum body measure of 70 characters, a 20px mobile gutter, and 46px desktop gutters; these are implementation defaults. Adapt content structure and breakpoints to the target artifact.

## Elevation & Depth

The library uses flat surfaces, fine dividers, and restrained tonal separation. Ordinary panels use borders rather than drop shadows. Short clipboard feedback uses `0 8px 25px #0c234024`. These are implementation choices, rather than source brand requirements.

Keep state changes brief. The library uses `cubic-bezier(.16, 1, .3, 1)` for transitions. Honor `prefers-reduced-motion`; content and controls remain usable without animation.

## Shapes

Use the YAML radius tokens as the current interface defaults. Preserve original logo geometry, aspect ratio, colors, and transparency. Icons in the library use a consistent outline style: a 24×24 viewBox, 1.6px stroke, round caps and joins, typically displayed at 16–20px.

## Components

### Logo files

| Asset | Format | Dimensions | Preview background |
| --- | --- | --- | --- |
| [Horizontal white logo](assets/logos/cg-horizontal-white.png) | PNG | 4200×900 | Navy |
| [Stacked white logo](assets/logos/cg-stacked-white.png) | PNG | 2400×1500 | Navy |
| [Navy circle mark](assets/logos/cg-circle-navy.svg) | SVG | 1086×1086 viewBox | White |

Use these originals directly, rather than extracting logos from screenshots or document previews. The [logo ZIP](downloads/cross-gates-logos.zip) contains all three. The supplied circle SVG has an original fill of `#0A2240`; preserve that file's fill while using the primary token for interface navy.

Approved primary logo colorways are navy, white, and slate. Red is limited to specific promotional campaigns. Standalone decorative CG marks are restricted to fully branded environments; on external flyers, ads, and websites they must accompany the full primary lockup. Use solid marks with sufficient contrast. Seasonal recoloring, gradients, unapproved outlines, and dark-on-dark treatments are prohibited.

### Controls and content

- Primary actions use the primary-button tokens; the library's button label is Nunito Sans 700 at 13px with 20px leading and 11px/17px vertical/horizontal padding.
- Secondary actions use white with navy text and a fine border. Selected navigation and filters use navy with white text.
- Inputs have persistent labels. The library uses 6px corners, white fill, navy text, and a fine border.
- Keyboard focus remains visible; the library uses a 3px blue outline with 4px offset. Action labels name the action and object.
- Errors describe the problem and recovery. Copy feedback confirms the copied value. State indicators combine text or icons with color.

## Do's and Don'ts

Before completing an artifact, verify:

1. Palette values and native font weights match this guide; supplied logos retain their aspect ratio, original colors, and transparency.
2. Text meets the brand minimum contrast of **4.5:1**, including large text. White on yellow and white on light grey fail. The library's separate 3:1 WCAG large-text result does not relax the brand requirement.
3. The layout follows the color roles, keeps seasonal accents limited, and uses left-aligned paragraphs with the specified body leading.
4. Desktop and mobile content remains readable, controls have accessible names and visible keyboard focus, and reduced-motion preferences are honored.
5. User-facing headings and descriptions are plain and direct. Source artwork containing historical dates or prices is labeled as an example.
6. Distinguish source requirements from implementation defaults and proposed extensions. Flag unresolved source conflicts rather than inventing an authoritative value or numeric logo rule.