Kluster Logo

Brand Kit

Guidelines and assets for using the Kluster brand. These resources ensure consistency across all platforms and materials.

LogoColorsTypographyGradientsSpacingUsage Guidelines

Color Palette

Our color system is built with CSS custom properties, supporting both light and dark themes.

Primary

Primary Blue

#3B82F6HSL(221 83% 53%)RGB(59, 130, 246)

Main brand color used for buttons, links, and key UI elements.

Accents

Soft Cyan

#0EA5E9HSL(199 89% 48%)RGB(14, 165, 233)

Used in gradient starts and accent highlights.

Neon Purple

#3B82F6HSL(221 83% 53%)RGB(59, 130, 246)

Used in gradient mid-points. Mapped to primary blue.

Neon Pink

#EC4899HSL(336 84% 51%)RGB(236, 72, 153)

Vibrant accent for special highlights and badges.

Semantic

Destructive Red

#D32F2FHSL(0 63% 51%)RGB(211, 47, 47)

Error states, delete actions, danger alerts.

Muted Foreground

#737373HSL(0 0% 45%)RGB(115, 115, 115)

Secondary text, captions, placeholders.

Theme Surfaces

Background

#FFFFFF

Card

#FFFFFF

Muted

#F5F5F5

Border

#E5E5E5

Typography

Kluster uses a native system font stack for optimal performance and platform-native feel.

Font Stack

font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;

System fonts ensure the fastest possible load time with zero layout shift, while providing a native feel on every operating system.

Type Scale

Display

4.5rem / font-weight: 900

Kluster

H1

3rem / font-weight: 700

Page Heading

H2

1.875rem / font-weight: 700

Section Title

H3

1.5rem / font-weight: 600

Subsection

Body

1rem / font-weight: 400

The quick brown fox jumps over the lazy dog.

Small

0.875rem / font-weight: 500

Caption or helper text in interfaces.

XS

0.75rem / font-weight: 400

Fine print, badges, timestamps.

Gradients

Gradients add depth and energy to the Kluster brand. Use them intentionally.

Kluster Primary

bg-gradient-to-r from-soft-cyan via-soft-violet to-soft-blue

Hero text, feature highlights, branded elements

Cyan to Violet

bg-gradient-to-r from-soft-cyan to-soft-violet

Hover effects on download buttons and cards

Violet to Pink

bg-gradient-to-r from-soft-violet to-neon-pink

Special promotions, gamification badges

Spacing & Border Radius

Consistent spacing and rounded corners create a polished, cohesive interface.

Spacing Scale

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

Border Radius

Base radius: --radius: 0.5rem

sm
calc(0.5rem - 4px)
md
calc(0.5rem - 2px)
lg / default
0.5rem
xl
0.75rem
2xl
1rem
full
9999px

Iconography

Kluster uses Lucide Icons — a clean, consistent, open-source icon set.

Library: Lucide React — consistent stroke width of 2px at 24×24.

Default size: w-5 h-5 (20px) in UI, w-4 h-4 (16px) inline with text.

Color: Icons inherit currentColor. Use text-foreground, text-muted-foreground, or text-primary.

UI Components

Built on shadcn/ui — a collection of re-usable components built with Radix and Tailwind.

Buttons

Cards

Default Card

Uses bg-card with border-border and rounded-xl.

Muted Card

Uses bg-muted/50 for subtle differentiation from background.

Badges & Pills

PrimaryCyanPinkDestructiveMuted

Usage Guidelines

Please follow these guidelines when representing the Kluster brand.

Do

  • Use the official logo assets without modification
  • Maintain adequate clear space around the logo
  • Use brand colors from this palette for consistency
  • Use the system font stack for all interface text
  • Spell “Kluster” with a capital K — never all caps
  • Respect both light and dark theme tokens

Don't

  • Rotate, skew, or add effects to the logo
  • Change the logo colors or apply gradients to it
  • Use off-brand colors not in this palette
  • Place the logo on busy or low-contrast backgrounds
  • Write the name as “KLUSTER”, “kluster”, or “KLuster”
  • Use custom fonts that deviate from the system stack

Questions about brand usage? Contact us at official@kluster.in