Internal Reference

Brand GuidelinesOcean. Modern. Focused.

Lypik Technologies Private Limited — design tokens, typography, and usage conventions for consistent digital experiences across Lypik surfaces and Powered-by-Lypik products.

Lypik

Lypik

We Build Products That Power Industries

Identity

Logo System

Three variants: full lockup (default), wordmark, and beaver mark. All are theme-aware; dark backgrounds get the white treatment.

Lypik

Lockup

Beaver + wordmark

Lypik

Wordmark

Wordmark only

Lypik

Icon

Beaver mark only

Identity

Design Tone

Lypik's visual identity should feel ocean-inspired, modern, and enterprise-ready — confident without being loud.

  • Clean & minimal
  • Confident
  • Enterprise-ready
  • Space-heavy layouts
  • Soft shadows
  • Subtle ocean gradients
  • Glassmorphism surfaces
  • Dot grid backgrounds

Typography

Type System

Primary: Inter. Fallback: system-ui. Monospace: Geist Mono.

Font Families

Sans (primary)

Inter

var(--font-inter), system-ui, sans-serif

Mono

Geist Mono

var(--font-geist-mono), ui-monospace, monospace

Font Weights

Normal

400

Medium

500

Semibold

600

Bold

700

Type Scale

Lypikxs · 0.75rem
Lypiksm · 0.875rem
Lypikbase · 1rem
Lypiklg · 1.125rem
Lypikxl · 1.25rem
Lypik2xl · 1.5rem
Lypik3xl · 1.875rem
Lypik4xl · 2.25rem
Lypik5xl · 3rem
Lypik6xl · 3.75rem
Lypik7xl · 4.5rem
Lypik8xl · 6rem
Lypik9xl · 8rem

Color System

Light Mode Palette

Ocean-inspired palette. Primary colors for CTAs and emphasis; neutrals for backgrounds and text.

Core

Primary

#0B3C5D

Deep Ocean Blue — CTAs, links

Secondary

#145DA0

Bright Ocean Blue — secondary actions

Accent

#2E8BC0

Soft Aqua Blue — highlights, hover

Variants

Primary Light

#0F4A73

Primary Dark

#092D47

Secondary Light

#1A6FBD

Secondary Dark

#0F4A7A

Accent Light

#4BA3D4

Accent Dark

#2473A3

Neutrals & Backgrounds

Background

#F4F9FF

Light Mist Blue

Background Alt

#E8F2FC

Surface

#FFFFFF

Dark

#0A1F2F

Deep navy

Dark Muted

#1A3A52

White

#FFFFFF

Semantic

Success

#0D9488

Warning

#D97706

Error

#DC2626

Info

#0284C7

Text / Muted

Muted

#64748B

Muted Light

#94A3B8

Color System

Dark Mode Palette

Deep navy base with brighter accents for contrast and readability.

Background

#0A1F2F

Deep navy

Surface

#132F47

Primary

#2E8BC0

Accent

#4BA3D4

Muted

#1A3A52

Foreground

#F4F9FF

Visual Language

Gradients

Ocean fade gradients for hero sections, CTAs, and accent surfaces.

Primary

from-primary to-secondary

Accent

from-secondary to-accent

Primary Dark

dark mode backgrounds

Accent Dark

dark mode surfaces

Visual Language

Border Radius

Consistent rounded corners for cards, buttons, and inputs.

sm

0.375rem

md

0.5rem

lg

0.75rem

xl

1rem

2xl

1.5rem

full

9999px

Visual Language

Shadows

Soft shadows for depth. Ocean shadow for brand-specific elevation.

sm

DEFAULT

md

lg

ocean

oceanDark

Developer Reference

Usage

Tailwind semantic tokens via CSS variables. Use these classes for consistent theming across light and dark mode.

tailwind / css

/* Primary gradient */
className="bg-gradient-to-r from-primary to-secondary"

/* Text hierarchy */
className="text-foreground"         // primary text
className="text-muted-foreground"   // secondary text

/* Brand shadow */
className="shadow-[0_4px_14px_0_rgb(11_60_93_/_0.15)]"

/* Gradient text */
className="gradient-text-light dark:gradient-text"

/* Dot grid background */
className="dot-grid-light dark:dot-grid"