--- title: "Sidekick Strategies" url: https://www.sidekickstrategies.com/brand description: "Explore the Sidekick Strategies design system: brand colors, typography, buttons, spacing tokens, shadows, and reusable UI components for consistency." type: page canonical: https://www.sidekickstrategies.com/brand --- # Brand Cheat Sheet Design System The single source of truth for every page we build. Screenshot it, paste it into prompts, or keep it open as you work. 01 ## Colors ### Navy 900#0a1a3a 800#142d63 700#1a3770 600#214080 500#2d5091 400#4a6a9f ### Teal 600#026d7a 500#028393 400#03a0b5 300#2abfcf 200#b8e8ef ### Orange 500 primary (eyebrows + links) · 600 hover · 400 secondary 600#d44a1a 500#f65625 Primary 400#faaa68 Secondary 300#fcc89a 200#fde8d5 ### Surfaces Background#fafafa Surface#ffffff Elevated#f5f5f5 Border#e5e5e5 Success#4ade80 Warning#fbbf24 Error#f87171 02 ## Type ### Space Grotesk: Display Ambitious ideas deserve a sidekick with superpowers that ship fast text-7xl · 4.5remtext-5xl · 3remtext-3xl · 1.875remtext-xl · 1.25rem ### DM Sans: Body text-lg · Lead Strategy, design, development, and marketing. We bring the firepower so you can focus on the vision. text-base · Body We're a crew of strategists, designers, and builders who believe great work happens when ambition meets execution. text-sm · Small Secondary text, captions, meta information, and supporting details. text-xs · Fine Print Timestamps, auxiliary labels, and supplementary content. ### Weights Aa 400 Regular Aa 500 Medium Aa 700 Bold ### Eyebrows Pill EyebrowCentered Eyebrow Pill: hero and page-level labels, left aligned. Centered with rules: section heads. Both teal, text-xs, wide tracking. 03 ## Buttons ### On Light [Primary](https://www.sidekickstrategies.com/brand#buttons)[Outline](https://www.sidekickstrategies.com/brand#buttons) primary: orange-500 pill, white arrow chip that rotates 45deg on hover outline: navy-800/20 border, fills navy on hover (white in dark mode) component: ### On Dark [Primary](https://www.sidekickstrategies.com/brand#buttons)[Outline](https://www.sidekickstrategies.com/brand#buttons) 04 ## Contrast WCAG AA requires 4.5:1 for normal text, 3:1 for large bold. ### On Light (#fafafa) Aa navy-700 on background 11.8:1Pass Aa navy-500 on background 8.7:1Pass Aa navy-400 on background 5.9:1Pass Aa teal-600 on background 3.8:1Pass Aa teal-500 on background 2.6:1Fail Aa orange-600 on background 4.7:1Pass Aa orange-500 (primary) on background 3.3:1Fail ### On Dark (#142d63 navy-800) Aa white 17.4:1Pass Aa white/80 5.2:1Pass Aa orange-500 (primary) 4.9:1Pass Aa orange-400 (secondary) 8.5:1Pass Aa teal-500 3.1:1Large Aa white/60 3.5:1Fail 05 ## Spacing 8px base unit. 14px 28px 312px 416px 624px 832px 1040px 1248px 1664px 2080px 2496px 06 ## Effects ### Shadows sm Subtle lift md Cards lg Modals glow Teal accent ### Border Radius sm4px md8px lg16px xl24px full9999px ### Transitions Fast 150ms · Hovers, focus Base 300ms · Color, opacity Slow 500ms · Layout shifts 07 ## Components ### Cards #### Surface White bg, border, teal accent on hover. #### Elevated Gray bg, no border, shadow on hover. #### Dark For contrast sections or CTA blocks. ### CTA Banner Ready to Start? ### Let's Build Something Great Drop us a line and let's get the conversation started. [Get Started](https://www.sidekickstrategies.com/brand#components) ### Scroll Reveal This block animated in Fade up 30px, 0.6s, power2.out. Wrap anything in `` ### Section Surfaces Sections sit on the page background and separate with space and a hairline border, not color bands or waves. Every surface has a dark twin. Background bg-background / dark:iron-950 Surface (cards) bg-surface / dark:iron-850 Elevated bg-elevated / dark:iron-900 ### Section Dividers Default: `border-t border-border` between sections. `` when a section needs a softer break. 08 ## Hero Ambient glow, copy first, light and dark. Eyebrow Copy ### You Statement Headline Goes Here Supporting copy that names the visitor's pain. Then a bold turn: We fix that. [Primary CTA](https://www.sidekickstrategies.com/brand#hero-pattern)[Secondary CTA](https://www.sidekickstrategies.com/brand#hero-pattern) surface: page background, no photo, no overlay glow: blurred teal-to-orange gradient behind the copy (dark: teal-600/20 to orange-600/20) eyebrow: teal pill, text-xs, tracking 0.16em headline: navy-800 / white, leading-\[1.02\], key phrase in buttons: primary + outline 09 ## Testimonials Dark band with glassmorphic cards. ★★★★★ > “Example testimonial quote that shows the card pattern. The glassmorphic background and orange stars create a premium feel on the dark band.” Client Name Company Name band bg: bg-navy-800, full-width card bg: rgba(255,255,255,0.05) with 0.1 border stars: #faaa68 (orange-400), ★ entity quote: rgba(255,255,255,0.8), text-sm name: #ffffff, font-bold 10 ## Interactive Motion-powered components. Hover and interact. ### Magnetic Button [Hover Near Me](https://www.sidekickstrategies.com/brand#interactive) wraps any element. Pulls toward cursor within \~60px. Spring physics on release. ### Split Text Animation splits into word or char spans. GSAP stagger animation. SSR-safe. ### 3D Tilt Card #### Hover me This card tilts in 3D based on your cursor position. 6 degrees max, spring physics. #### Works on dark too Same tilt effect, any background. wraps children. Mouse-tracking rotateX/Y with spring easing. ### Image Card (Services Pattern) ![Example service card](https://billing.sidekickstrategies.com/hubfs/sidekick-site/images/services/onboarding.webp) #### Service Name One-line benefit statement. Short description of what the service does for the client. 3:2 aspect image + p-7 text block. Teal benefit line. Hover: shadow-md + border-teal-200. 11 ## Animation Duration, easing, and the decision framework. ### Duration Scale micro200ms: Hover, tap, focus fast300ms: Underline draws, color shifts reveal600ms: Scroll-triggered reveals hero800ms: Hero entrance elements slow1000ms: Absolute max (rare) ### Easing Curves Premium cubic-bezier(0.25, 0, 0, 1) Default. Fast start, slow end. Spring stiffness: 300, damping: 30 Motion hover/tap. Natural bounce. Power2 Out GSAP power2.out Scroll reveals. Clean deceleration. Back Out GSAP back.out(1.4) Hero entrances. Slight overshoot. ### Decision Framework CSS (Tailwind)Hover, focus, active, color transitions, underline draws0kB MotionSprings, gestures (hover/tap/drag), exit animations, layout shifts\~5kB GSAP + ScrollTriggerScroll timelines, text splitting, pinning, complex sequencesalready loaded LenisSmooth scroll momentum, device normalization\~4kB Rule: CSS first. If CSS can't do it, use Motion. If Motion can't do it, use GSAP. 12 ## Voice EnergeticPlayfulConfidentApproachableSharp ### Do - ✓ Talk to a smart friend, not a boardroom - ✓ Lead with energy, follow with substance - ✓ Active voice, short sentences, punchy rhythm - ✓ Be specific: "We ship fast" not "We deliver solutions" - ✓ Humor when it fits naturally ### Don't - ✗ No Lorem ipsum, always real copy - ✗ No corporate jargon or buzzwords - ✗ No "Welcome to our website" - ✗ No stiff, formal, boardroom language - ✗ No generic gradients or stock photos 13 ## Logo Sidekick Strategies Sidekick Strategies Space Grotesk Bold. Teal (#028393) on dark, navy (#142d63) on light. Clear space: 1× cap height on all sides. --- Source: https://www.sidekickstrategies.com/brand Sidekick Strategies · HubSpot consulting and content operations