ChatL6 Design System
Design components, brand assets, colors and typography for ChatL6 AI chat platform.
Logo variants
Main logo
Black logo
White logo
Emblem
The ChatL6 emblem features a distinctive circular design with pink and blue sections divided by white diagonal lines, creating a dynamic X pattern that represents connection and conversation.
Standard emblem
On light backgrounds
Usage guidelines
When to use each variant
- Main logo: Primary brand usage, headers, marketing materials
- Black logo: Light backgrounds, print materials, monochrome contexts
- White logo: Dark backgrounds, overlays, hero sections
- Emblem: Favicons, app icons, social media profiles, compact spaces
File format recommendations
- SVG: Web applications, scalable interfaces, icons
- PNG: Email signatures, presentations, social media
- Minimum size: 24px height for legibility
- Clear space: Minimum 1x logo height on all sides
Brand colors
Brand blue
Brand pink
Brand black
System colors
Button/link
System purple
System green
System red
System yellow
Greyscale
Heading 1 - Main title
Subtitle - Supporting text for main headings
Heading 2 - Section title
Heading 3 - Subsection
Heading 4 - Component title
Body text - This is the standard body text used throughout the application. It should be readable and accessible with proper contrast ratios. Notice the increased line height for better readability.
Font families
Headings & Body - Geist Sans
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Regular body text
Small body text
Code & Monospace - Geist Mono
Large monospace text
Regular monospace text
Small monospace text
Extra small monospace
const message = "Hello ChatL6!";$ npm install chatl6-sdkLists
Ordered list
- First item with proper spacing
- Second item in the sequence
- Third item with nested content:
- Nested first item
- Nested second item
Unordered list
- Bullet point item
- Another bullet point
- Item with nested content:
- Nested bullet point
- Another nested item
Callout example
This is a callout box used to highlight important information or provide additional context. Notice the increased padding and spacing.