Color palette.
The brand is built on a two-color system — a deep ultramarine and a clear cyan-light blue — with a tag-line gray for supporting role. Body copy reads at roughly 80% black; coloured heads run at 100%. Avoid introducing new accents.
Primary
Neutrals & surfaces
Typography.
The brand uses one typeface family per the Style Guide: ITC Avant Garde Gothic (Condensed for body, Regular for headlines & emphasis). On web, Jost is the open-source geometric stand-in until the licensed family is loaded. Body copy renders at ~80% black; coloured heads at 100%.
Display & headings
Body
Utility
Spacing & radius.
Sections breathe at fluid scale — tighter on mobile, generous on desktop. Containers cap at 1320px; reading columns at ~64ch. Cards and pills use a 14px / 999px radius pair.
Scale
Radii
Buttons.
Pill buttons, uppercase label, 600 weight, 14px size. Primary is brand blue. Use Ghost for secondary actions on light surfaces, and Light for buttons sitting on the dark blue band.
Variants
Sizes
Usage rules
- Always include the
→arrow on call-to-action buttons; not on neutral / cancel actions. - Never put two primary buttons next to each other — primary + ghost only.
- Hover lifts -1px and shifts to
--blue-deep(#001F8E). - Buttons sitting on the dark band invert to white with brand-blue text.
Form fields.
Single-style fields — thin border, 14px label uppercased above the control, 8px radius. Focus reveals a 2px light-blue ring with brand-blue border for clarity.
Cards.
Cards are white on light surface, with a 1px rule border and 14px radius. Hover gives a subtle lift and a brand-light border. Used for practice areas, training totals, journal entries, and any tile pattern.
Child Welfare & Investigations
Family interventions, foster care operations, adoption practice, child injury and fatality review, federal consent decrees, and oversight of child-serving facilities.
Daycare & Early Childhood
Health and safety standards, playground safety, child injury and fatality, quality rating systems, licensing administration, and operational best practices.
Chips, tags & eyebrows.
Small system marks used to label and categorise. All uppercase, 11px or 10.5px size, 0.12–0.14em tracking.
Chip (topic tag)
Caption pill (over imagery)
Eyebrow
Bands & sections.
Long-form pages alternate paper / paper-tint / brand-blue bands for rhythm. The brand-blue band carries pull-quotes, CTAs, and statements; the paper-tint band carries supporting tables, totals, and process steps.
Paper — default surface
A practice grounded in operations.
Paper tint — ledgers, tables
A practice grounded in operations.
Brand blue — statements, CTAs
Voice & tone.
Per the Cagle Consulting Branding Style Guide, the brand voice is grounded in the CARES personality — four working principles that shade every piece of copy on the site.
Caring & authentic
Driven by a genuine commitment to serve clients and community. Every engagement is in service of an outcome that affects a real family, a real child, or a real defendant.
Approachable & engaging
Plain language, fast turnarounds, and direct phone calls. Eager to pose and answer questions; easy to talk to.
Open & affirming
Welcoming of people and perspectives from all walks of life. Cases are evaluated on the record as it stands, not as would be convenient.
Smart & purposeful
Charting a way toward goals and aspirations. Reports cite the statute, the rule, and the operational fact pattern. Opinions are stated only where the work supports them.
Litmus test
When writing in the company’s voice and trying to determine what sort of tone to use, ask: “Does this feel authentic?” and “Is this tone believable?”
CSS tokens.
Reference list of the custom properties used throughout assets/styles.css. Use these tokens rather than literal values so palette and scale stay coordinated.
:root {
--blue-dark: #0031DA; /* Pantone 293 C */
--blue-light: #70D6FF; /* Pantone 292 C */
--blue-deep: #001F8E; /* hover / pressed */
--tag-gray: #808080; /* Pantone 9 C */
--paper: #FFFFFF;
--paper-2: #F4F8FF;
--paper-3: #E9F3FE;
--ink: #1A1A1A;
--ink-80: #333333;
--ink-50: #808080;
--rule: #D8E2EC;
--rule-strong: #B8C6D6;
--sans: 'Jost', 'ITC Avant Garde Gothic', system-ui, sans-serif;
--gutter: clamp(20px, 4vw, 56px);
--col-max: 1320px;
--reading: 64ch;
--ease: cubic-bezier(.2, .7, .2, 1);
}