Brand Guidelines

The visual identity of The Habits Company

Logo

Our logo is available in multiple formats (SVG, PNG, JPG) and color variations (green, black, white). Use the appropriate version for your background.

Primary Logos

Green

Black

White

Secondary Logos

Green

Black

White

White/Green

Logo Usage Guidelines

Use the green logo on light backgrounds for primary branding.
Use the white logo on dark or colored backgrounds.
Maintain adequate spacing around the logo - at least the height of the "H" letter in all directions.
Don't stretch, distort, or change the colors of the logo.
Don't place the logo on busy backgrounds that reduce visibility.

Download All Logos

Typography

Our primary typeface is Inter, a versatile sans-serif font designed for excellent readability on screens.

Inter Black (900) Use for main headlines

Inter Bold (700) Use for section headers

Inter Semibold (600) Use for subheadings

Inter Medium (500) Use for emphasized body text

Inter Regular (400) Use for body text

Inter Light (300) Use for captions and notes

Typography Usage Guidelines

Use appropriate font weights for hierarchy (heavier for headers, lighter for body)
Maintain sufficient contrast against backgrounds for readability
Line height should be 1.5x font size for optimal readability
For large blocks of text, use left alignment for better readability
Limit line length to approximately 60-80 characters for best readability

Color Palette

Click on any color to copy its hex code to your clipboard.

Green

Core

#2DA44E

rgb(45, 164, 78)

hsl(137, 57%, 41%)

Shade

#1B622F

rgb(27, 98, 47)

hsl(137, 57%, 25%)

Tint 1

#81C895

rgb(129, 200, 149)

hsl(137, 39%, 65%)

Tint 2

#DBFAE3

rgb(219, 250, 227)

hsl(135, 76%, 92%)

Blue

Core

#1C4E65

rgb(28, 78, 101)

hsl(199, 57%, 25%)

Shade

#112F3D

rgb(17, 47, 61)

hsl(199, 56%, 15%)

Tint 1

#7795A3

rgb(119, 149, 163)

hsl(199, 19%, 55%)

Tint 2

#E8EDF0

rgb(232, 237, 240)

hsl(202, 21%, 93%)

Red

Core

#F05D49

rgb(240, 93, 73)

hsl(7, 85, 61)

Shade

#AB3B2C

rgb(171, 59, 44)

hsl(7, 59, 42)

Tint 1

#F69E92

rgb(246, 158, 146)

hsl(7, 85, 77)

Tint 2

#FFEAE7

rgb(255, 234, 231)

hsl(7, 100, 95)

Orange

Core

#F4A258

rgb(244, 162, 88)

hsl(28, 88%, 65%)

Shade

#B35500

rgb(179, 85, 0)

hsl(28, 100%, 35%)

Tint 1

#F8C79B

rgb(248, 199, 155)

hsl(28, 87%, 79%)

Tint 2

#FFEEDD

rgb(255, 238, 221)

hsl(30, 100%, 93%)

Yellow

Core

#F9D86D

rgb(249, 216, 109)

hsl(46, 92%, 70%)

Shade

#E7B100

rgb(231, 177, 0)

hsl(46, 100%, 45%)

Tint 1

#FBE8A7

rgb(251, 232, 167)

hsl(46, 91%, 82%)

Tint 2

#FEF7E2

rgb(254, 247, 226)

hsl(45, 93%, 94%)

Mint

Core

#96C3A4

rgb(150, 195, 164)

hsl(139, 27%, 68%)

Shade

#5A7562

rgb(90, 117, 98)

hsl(138, 13%, 41%)

Tint 1

#C0DBC8

rgb(192, 219, 200)

hsl(138, 27%, 81%)

Tint 2

#E8F7EC

rgb(232, 247, 236)

hsl(136, 48%, 94%)

Ivory

Core

#F0E7C8

rgb(240, 231, 200)

hsl(47, 57%, 86%)

Shade

#C6B67A

rgb(198, 182, 122)

hsl(47, 40%, 63%)

Tint 1

#F6F1DE

rgb(246, 241, 222)

hsl(47, 57%, 92%)

Tint 2

#FFFCF4

rgb(255, 252, 244)

hsl(44, 100%, 98%)

Text

Dark

#22293A

rgb(34, 41, 58)

hsl(222, 26%, 18%)

Medium

#414651

rgb(65, 70, 81)

hsl(221, 11%, 29%)

Light

#898C93

rgb(137, 140, 147)

hsl(222, 4%, 56%)

Disabled

#E7E8E9

rgb(231, 232, 233)

hsl(210, 4%, 91%)

Color Usage Guidelines

Use green as our primary brand color for important UI elements and calls to action.
Use blue for secondary actions and information-based elements.
Orange and yellow are accent colors - use sparingly for highlights and attention.
Mint and ivory provide softer, complementary options for backgrounds and subtle elements.
Use text colors appropriately: Dark for primary text, Medium for secondary text, Light for tertiary information, and Disabled for inactive elements.
Ensure sufficient contrast between text and background colors for accessibility.

Card Components

Cards are a core UI component used throughout our products for organizing content. We maintain consistent styling across card types to ensure brand cohesion.

Card Types

Standard Card

Used for feature highlights, statistics, and general content blocks.

⚡

Fast

Everything loads in less than 100ms.

Stat Cards

Used for displaying metrics, statistics, and analytics data across the application.

✅

Total Done: 52

🥇

Best Set: 23

May 15, 2023

Feature Card

Used for showcasing product features, benefits, or habit types.

💪

Card Label

Feature Title

Brief description of the feature or benefit.

Floating Card

Used for decorative elements and visual interest in hero sections.

🧪 Core Habit Theory

🏠 Environment Design

Card Usage Guidelines

Maintain consistent padding (p-6) across all standard cards
Use rounded corners (rounded-lg) on all card elements
Apply subtle shadows (shadow-sm) and borders (border border-gray-200) for depth
Include appropriate spacing between card elements (mb-2 for titles, mb-3 for icons)
Use hover states (hover:border-[#2da44e]) for interactive cards
Keep content concise and focused within each card
Use icons that align with our brand style and message
Apply responsive design (grid grid-cols-1 md:grid-cols-X) for card layouts