Three roles: primary for brand identity, ink for type and surfaces, signals for tints and borders. Click any hex or RGB code to copy it.

Primary & brand

Ink & type

Signals & surfaces

A serif for headings, a sans for everything else. DM Serif Display brings warmth and editorial weight; Inter handles long-form reading and UI without distraction.

Two scales. Article is for long-form content, blog posts, and program pages. Display is for hero sections, landing pages, and marketing moments where the type needs to do more work. Sizes below are the desktop ceiling — headings ship as clamp() so they scale down on phones.

Inter 16 / 600, padding: 1rem 2rem, 8px radius, 0.18s color transition. Squarespace link styles bleed into code blocks, so button anchors always set color and text-decoration with !important.

Reusable building blocks. These appear on blog posts, program pages, and donor-facing content. Reach for an existing pattern before inventing one — the brand stays consistent by repetition, not by novelty.

Motion is a hint, not a performance. Everything moves on the same short curve, and nothing moves that doesn't have to.

• Transitions

  0.18s to 0.2s ease on color, background, border, and opacity. Nothing longer, nothing bouncy.

• Card hover

  Border goes to TCF Cyan with a matching 1px ring (box-shadow: 0 0 0 1px #00B4DB). No translateY card lift in new work — legacy lifts are being removed as pages are rebuilt.

• Ledger hover

  Hovering a row drops its siblings to opacity: .55, turns the italic phrase cyan, and slides the arrow 4px. The hovered row stays at full opacity.

• Focus

  Every interactive element gets :focus-visible { outline: 2px solid #0F172A; outline-offset: 3px; }. Never remove focus rings without replacing them.

• Not allowed

  No pulse, glow, bounce, parallax, or auto-playing motion. No animation that repeats while the page sits idle.

The site runs on Squarespace 7.1, so most new design work ships as a self-contained code block dropped into a fluid-engine section. These rules keep those blocks from fighting each other or the platform.

• Class prefix

  Every new block uses the tcfx- prefix. tcf- belongs to legacy Custom CSS and will collide.

• Scoped reset only

  .tcfx-block, .tcfx-block * { box-sizing: border-box; margin: 0; padding: 0; } and nothing wider. A page-wide * reset has broken the site before.

• Namespace everything

  Scope every rule under the block's root class. A code block should be safe to paste onto any page without side effects.

• Import first

  If a <style> uses @import for fonts, it must be the first line in that tag or the browser drops it.

• No comments

  Production HTML and CSS ship without comments. Document the block in the project notes instead.

• No emoji as icons

  Text, numerals, or inline SVG. Emoji render inconsistently across platforms and read as informal.

• Navy, not black

  Deep Navy stands in for black everywhere in UI. Pure black is reserved for media.

• Mobile first

  Author the phone layout as the base and add min-width queries upward. Single-column stacks, clamp() type, reduced padding under 640px, tap-friendly targets.

• External links

  target="_blank" always ships with rel="noopener noreferrer".

• Copy is verbatim

  When restyling an existing page, preserve headlines, body copy, URLs, and UTM parameters exactly. Flag any recast rather than making it silently.

• Keep the H1

  Rebuilt heroes keep exactly one H1 with its original wording, for SEO. Avoid Squarespace's sqsrte-scaled-text wrapper — its inline size can vanish at runtime and collapse the heading.

• Section takeover

  To force a block's section dark, target the background layer, not the section box — painting .page-section squares off any clip-path divider.

.page-section:has(.tcfx-block) .section-background {
  background: #0F172A !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}