TCDA Style Guide
Text Style Demonstrations
This is the Topper style.
This is the Title style.
This is the Body Text style, used for general content on the website. It includes line-height and margin adjustments.
Color Swatches
#124e66 (Dark Teal — var(--primary))
#748d92 (Light Grayish Teal — var(--primaryLight))
#2e3944 (Slate Gray — var(--secondary))
#1a1a1a (Black — var(--headerColor))
#212a31 (Very Dark Slate Gray — var(--bodyTextColor))
#d3d9d4 (Light Gray — var(--secondaryBgLight))
Bright Accent Colors
#FFD700 (Bright Yellow — var(--accent-yellow))
#FF5733 (Bright Orange — var(--accent-ruby))
#00BFFF (Bright Blue — var(--accent-coral))
#32CD32 (Bright Green — var(--accent-ruby))
#A020F0 (Bright Purple — var(--accent-purple))
#FF69B4 (Bright Pink — var(--accent-pink))
Accent Colors with Pairing Suggestions
#FFD700 (Bright Yellow — var(--accent-yellow))
#124E66 (Dark Teal — var(--primary))
#FF5733 (Bright Orange — var(--accent-ruby))
#2E3944 (Slate Gray — var(--secondary))
#00BFFF (Bright Blue — var(--accent-coral))
#748D92 (Light Grayish Teal — var(--primaryLight))
#32CD32 (Bright Green — var(--accent-ruby))
#1A1A1A (Black — var(--headerColor))
#A020F0 (Bright Purple — var(--accent-purple))
#212A31 (Very Dark Slate Gray — var(--bodyTextColor))
#FF69B4 (Bright Pink — var(--accent-pink))
#D3D9D4 (Light Gray — var(--bodyTextColorWhite))
Deep Red
Vibrant Orange
Deep Blue
Muted Purple
Soft Green
Light Grey
Dark Charcoal