Licid
Brand Guide

A comprehensive design system showcasing our visual language, typography, colors, and UI components. Built for consistency and creativity.


Visual Identity

Colors

Our color palette balances bold energy with professional reliability. Each color carries meaning and purpose.

Primary Colors

Amaranth Purple

Innovation & Empowerment

#AD134C--color-amaranth-purple

Dark Slate Gray

Reliability & Professionalism

#2A3C32--color-dark-slate

Cambridge Blue

Vibrancy & Positivity

#6BAF93--color-cambridge-blue

Secondary Colors

Coral Pink

Energy & Warmth

#E88B83--color-coral-pink

Mint Green

Balance & Calm

#C3DED3--color-mint-green

White Smoke

Clean & Minimal

#F6F5F3--color-white-smoke

Gradients

Primary Gradient

Amaranth → Coral

Nature Gradient

Dark Slate → Cambridge

Soft Gradient

Mint → White Smoke

Brand Pattern

The official Licid pattern adds texture and visual interest to backgrounds. Use it as a subtle overlay on colored sections.

On Primary

pattern-overlay

5% opacity, cover

On Dark

pattern-overlay

5% opacity, cover

On Secondary

pattern-overlay

5% opacity, cover

Usage

  • • Use on hero sections and full-width backgrounds
  • • Apply with pattern-overlay class
  • • Works best on solid brand colors

Opacity Variants

  • pattern-overlay-light — 3% opacity
  • pattern-overlay — 5% opacity (default)
  • pattern-overlay-strong — 10% opacity

Type System

Typography

Our typography conveys clarity and professionalism with Plus Jakarta Sans, while Sink adds personality for emphasis and storytelling.

Primary Font

Plus Jakarta Sans

Used for headings, body text, and UI elements. Conveys clarity and professionalism.

ExtraLight - The quick brown fox

Light - The quick brown fox

Regular - The quick brown fox

Medium - The quick brown fox

SemiBold - The quick brown fox

Bold - The quick brown fox

ExtraBold - The quick brown fox

Secondary Font

Sink

Used for emphasis, storytelling, and marketing materials. Adds personality and impact.

Headlines

Subheadlines

Callouts

Emphasis Text

Type Scale

7xl / 72px

Display

6xl / 60px

Heading 1

5xl / 48px

Heading 2

4xl / 36px

Heading 3

3xl / 30px

Heading 4

2xl / 24px
Heading 5
xl / 20px

Large Body Text

lg / 18px

Body Text Large

base / 16px

Body Text Default

sm / 14px

Small Text

xs / 12px

Extra Small / Caption


Interactive

Buttons

Buttons trigger actions and guide users through the interface. They come in various styles and sizes.

Button Variants

Button Sizes

With Icons

Button States


Input

Forms

Form elements for collecting user input. Designed for clarity and ease of use.

Input Fields

Text Area

Select Dropdown

Selection Controls



Toggle switch

Complete Form Example

Create Account


Containers

Cards

Cards contain content and actions about a single subject. They can include images, text, and interactive elements.

Basic Card

A clean bordered card with subtle hover effect. Great for content grouping.

Learn more →

Flat Card

A minimal bordered card with clean, flat design aesthetic.

Learn more →

Feature Card

Highlight important features with a gradient background.

Featured

Image Card

Cards with images create visual interest and hierarchy.

“Licid transformed the way we approach creative projects. The platform is intuitive and powerful.”

Sarah Johnson

Creative Director

98%

Customer Satisfaction

Based on 2,500+ reviews from verified users.


UI Elements

Components

Additional UI components that make up the Licid design system.

Badges

PrimarySecondaryAccentDark

Chips / Tags

Avatars

Small

Default

Large

XL

+5

Stacked

Links

Dividers

Content above divider


Content below divider

Motion

Animations

Subtle animations add life to the interface. Use sparingly for maximum impact.

Pulse

Bounce

Float

Fade In

Licid Logo

Built with clarity, designed for creators.

© 2026 Licid. All rights reserved.