VibrationFit

VibrationFit Brand Kit

Color Guidelines & Component Library

System Colors

Core system colors used throughout the platform for consistent branding.

Primary

#199D67
Main brand color representing growth, alignment, and living "above the Green Line."
When to use:
  • • Primary CTA buttons
  • • Success states
  • • Main navigation active states
  • • "Above the Green Line" moments

Secondary

#14B8A6
Secondary color representing clarity, flow, and calm energy.
When to use:
  • • Info cards
  • • Progress bars
  • • Links and interactive text
  • • Secondary buttons

Accent

#8B5CF6
Premium accent color for special moments and premium features.
When to use:
  • • Hover states
  • • AI Vibrational Assistant
  • • Premium feature highlights
  • • Special mystical moments

Button System

Modern, pill-shaped buttons with smooth interactions.

Standard Buttons

Main CTAs, primary actions

Supporting actions, info

Premium features, special actions

Subtle actions within cards

Tertiary actions, cancel

Destructive actions

Gradient Buttons

Hero CTAs, main actions

Growth, success moments

Calm energy, water themes

Premium, mystical elements

Transformational moments

AI features with mystical glow

Button Sizes

Compact actions, inline usage

Standard size for most actions

Prominent CTAs

Hero sections

Interactive States

Default appearance

Lifts up 2px, brighter color

Shows spinner during async actions

50% opacity, cursor not-allowed

Complete Color Palette

Primary Green Family

Primary Green

#199D67

Main brand color, primary CTAs

Green Light

#5EC49A

Hover states, lighter accents

Green Lighter

#A8E5CE

Backgrounds, subtle highlights

Teal (Secondary) Family

Teal

#14B8A6

Secondary actions, links

Teal Light

#2DD4BF

Hover states, bright accents

Teal Dark

#0D9488

Active states, deep moments

Purple (Accent) Family

Primary Purple

#601B9F

Premium base

Accent Purple

#8B5CF6

Main accent

Button Purple

#7C3AED

Active states

Violet

#B629D4

Special accents

Purple Lighter

#C4B5FD

Backgrounds

Energy Colors

Vibrant Red

#D03739

Alerts, below green line

Red Light

#EF4444

Hover states, warnings

Energy Yellow

#FFB701

Celebration, wins

Yellow Light

#FCD34D

Subtle highlights

Badges & Status Indicators

Badge Variants

SuccessAbove Green Line, aligned
InfoClarity, in progress
WarningCelebration, actualized
ErrorBelow Green Line, contrast
PremiumAI Assistant, special
NeutralInactive, paused

Progress Bars

Vision Completion75%
Alignment Score50%
Premium Features90%

Form Components

Inputs

We'll never share your email

This field is required

Textarea

Be as detailed as you like

Loading States

Primary Spinner

Secondary Spinner

Accent Spinner

Best Practices

✓ Do

  • •Use primary green for main CTAs and success states
  • •Maintain high contrast ratios for accessibility
  • •Use gradients sparingly for special moments
  • •Test colors in both light and dark contexts
  • •Use consistent color meanings across the app
  • •Apply hover states that lift elements up

✗ Don't

  • •Don't use too many colors in one interface
  • •Don't use red for positive actions
  • •Don't ignore accessibility guidelines
  • •Don't use colors inconsistently
  • •Don't overuse gradients or effects
  • •Don't use squared buttons (always pill-shaped)

Ready to Build?

Use this design system as your single source of truth for all VibrationFit development.