TKTech Brand Style Guide

Consistent visual identity for all TKTech Health marketing materials and digital properties.

Color Palette

Our brand colors convey professionalism, trust, and innovation in healthcare technology.

Primary Brand Colors

From our logo - these are our core brand colors.

Logo Orange #F47920 rgb(244, 121, 32) Primary brand color, CTAs, accents
Logo Blue #7CC8E8 rgb(124, 200, 232) Secondary brand color, backgrounds

Extended Brand Colors

New colors to expand our visual identity and add depth.

Forest Green #1E4D2B rgb(30, 77, 43) Trust, stability, growth
Forest Green Dark #1A4025 rgb(26, 64, 37) Slightly darker green, healthcare IT

Color Variants

Darker and lighter versions for hover states, backgrounds, and depth.

Orange Dark #D9681C
Orange Light #FFA066
Blue Dark #5DADE2
Blue Light #C7E7FD
Forest Green Dark #1A4025
Forest Green Light #4A7C59

Neutral Colors

Backgrounds, text, and borders.

Dark #1c1c1c rgb(28, 28, 28) Dark backgrounds
Dark Soft #2a2a2a rgb(42, 42, 42) Soft dark backgrounds
Light #f8f9fa rgb(248, 249, 250) Light backgrounds
White #ffffff rgb(255, 255, 255) Pure white backgrounds

Typography

We use system fonts for optimal performance and compatibility.

TKTech Health - Heading

System Sans-Serif Headings, body text -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial

Heading Scale

H1 - 2.75rem (44px)

H2 - 2.25rem (36px)

H3 - 1.5rem (24px)

H4 - 1.25rem (20px)

Body Scale

Body - 1rem (16px)

Small - 0.95rem (15.2px)

Large - 1.15rem (18.4px)

Spacing System

Consistent spacing using a 0.5rem base unit.

xs 0.5rem (8px)
sm 1rem (16px)
md 1.5rem (24px)
lg 2rem (32px)
xl 2.5rem (40px)
2xl 3rem (48px)
3xl 4rem (64px)

Border Radius

Consistent rounded corners for cards, buttons, and containers.

Small 6px
Medium 8px
Large 12px
X-Large 16px
Full 50%

Shadows

Subtle shadows for depth and elevation.

Small 0 2px 8px rgba(0,0,0,0.06)
Medium 0 4px 12px rgba(0,0,0,0.08)
Large 0 8px 24px rgba(0,0,0,0.1)
X-Large 0 12px 32px rgba(0,0,0,0.12)
Primary 0 4px 12px rgba(244,121,32,0.15)
Primary Large 0 8px 24px rgba(244,121,32,0.2)

Component Examples

Pre-built components using our design system.

Primary Button

Primary Button
.btn-cta

Secondary Button

Secondary Button
.btn-secondary

Card

Card Content

background: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);

Color Usage Guidelines

How and when to use each color.

Orange (#F47920)

  • Primary CTAs and buttons
  • Accents and highlights
  • Important notifications
  • Links and interactive elements

Blue (#7CC8E8)

  • Secondary actions
  • Background sections
  • Borders and dividers
  • Informational elements
  • Workflow Automation category

Forest Green (#1E4D2B)

  • Trust and stability accents
  • Revenue/growth themes
  • Revenue Cycle Management category
  • Success states

Forest Green Dark (#1A4025)

  • Healthcare IT sections
  • Healthcare IT Solutions category
  • Technology themes
  • Professional services