> ## Documentation Index
> Fetch the complete documentation index at: https://docs.lyzn.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Branding

> Official Lyzn AI brand assets, colors, typography, and usage guidelines

# Lyzn AI Brand System

Lyzn AI’s brand is designed to feel **calm, intelligent, and quietly confident**.\
The identity balances modern AI clarity with organic warmth, reflecting trust, growth, and long-term thinking.

This document defines **logos, colors, gradients, typography, and usage rules** for consistent application across all Lyzn AI surfaces.

***

## Logo System

Lyzn AI uses a **modular logo system** consisting of an icon-only mark and a full wordmark lockup.

***

## Icon Only (Vector Logo)

Use the icon-only mark where space is constrained or when the brand is already clearly identifiable.

<CardGroup cols={2}>
  <Card title="Icon · Green (Transparent)" img="https://mintcdn.com/lyznai/1Gn0-Yx02ediHvN1/images/logo-green-trans.png?fit=max&auto=format&n=1Gn0-Yx02ediHvN1&q=85&s=f3d88595fe31b3b7d95fafd8dc825a95" width="331" height="342" data-path="images/logo-green-trans.png">
    **File:** `logo-green-trans.png`\
    Primary icon. Best on light backgrounds.
  </Card>

  <Card title="Icon · White (Transparent)" img="https://mintcdn.com/lyznai/1Gn0-Yx02ediHvN1/images/logo-white-trans.png?fit=max&auto=format&n=1Gn0-Yx02ediHvN1&q=85&s=bd533b773ee0a20c9e438314d6775292" width="702" height="726" data-path="images/logo-white-trans.png">
    **File:** `logo-white-trans.png`\
    For dark or high-contrast backgrounds.
  </Card>

  <Card title="Icon · Dark Green Background" img="https://mintcdn.com/lyznai/1Gn0-Yx02ediHvN1/images/logo-bg-fill-dark-green.png?fit=max&auto=format&n=1Gn0-Yx02ediHvN1&q=85&s=c1cd52677f3d4d724a3708aa82cd183e" width="1000" height="964" data-path="images/logo-bg-fill-dark-green.png">
    **File:** `logo-bg-fill-dark-green.png`\
    Suitable for app icons and avatars.
  </Card>

  <Card title="Icon · Green Background" img="https://mintcdn.com/lyznai/1Gn0-Yx02ediHvN1/images/logo-bg-fill-green.png?fit=max&auto=format&n=1Gn0-Yx02ediHvN1&q=85&s=b3532776d310aabbc611c94b556f503d" width="512" height="512" data-path="images/logo-bg-fill-green.png">
    **File:** `logo-bg-fill-green.png`\
    Standard filled background variant.
  </Card>

  <Card title="Icon · Green Background (Alt)" img="https://mintcdn.com/lyznai/1Gn0-Yx02ediHvN1/images/logo-bg-fill-green2.png?fit=max&auto=format&n=1Gn0-Yx02ediHvN1&q=85&s=2e650a34018b1df2787492cd981f01b8" width="988" height="984" data-path="images/logo-bg-fill-green2.png">
    **File:** `logo-bg-fill-green2.png`\
    Alternative shade for visual variation.
  </Card>
</CardGroup>

***

## Full Logo (Icon + Wordmark)

Use the full logo for first impressions, marketing pages, documentation headers, and press material.

<CardGroup cols={2}>
  <Card title="Full Logo · Dark Text (Transparent)" img="https://mintcdn.com/lyznai/1Gn0-Yx02ediHvN1/images/text-dark-logo-transparent.png?fit=max&auto=format&n=1Gn0-Yx02ediHvN1&q=85&s=8e846c835c2151618e6e1a557f76664c" width="849" height="214" data-path="images/text-dark-logo-transparent.png">
    **File:** `text-dark-logo-transparent.png`\
    For light backgrounds.
  </Card>

  <Card title="Full Logo · White Text (Transparent)" img="https://mintcdn.com/lyznai/1Gn0-Yx02ediHvN1/images/text-white-logo-transparent.png?fit=max&auto=format&n=1Gn0-Yx02ediHvN1&q=85&s=d5b3c85ebe776dc9fa2906ab81373895" width="1697" height="427" data-path="images/text-white-logo-transparent.png">
    **File:** `text-white-logo-transparent.png`\
    For dark backgrounds.
  </Card>

  <Card title="Full Logo · Green Background" img="https://mintcdn.com/lyznai/1Gn0-Yx02ediHvN1/images/text-logo-bg-green.png?fit=max&auto=format&n=1Gn0-Yx02ediHvN1&q=85&s=f84f1a1371f7456c9e435a6b4436e073" width="2195" height="985" data-path="images/text-logo-bg-green.png">
    **File:** `text-logo-bg-green.png`\
    Emphasized brand surfaces.
  </Card>

  <Card title="Full Logo · White Background" img="https://mintcdn.com/lyznai/1Gn0-Yx02ediHvN1/images/text-logo-bg-white.png?fit=max&auto=format&n=1Gn0-Yx02ediHvN1&q=85&s=a4002af3323a425bfdf73aef93e98020" width="2195" height="985" data-path="images/text-logo-bg-white.png">
    **File:** `text-logo-bg-white.png`\
    Neutral and editorial usage.
  </Card>
</CardGroup>

***

## Color Palette

Lyzn AI colors are grounded in **natural greens** with soft neutrals to reduce cognitive load and enhance trust.

### Core Brand Colors

| Token                | Hex       | Usage                            |
| -------------------- | --------- | -------------------------------- |
| **Primary Green**    | `#226326` | Brand actions, highlights, links |
| **Secondary Green**  | `#2B7D30` | Gradients, accents, hover states |
| **Light Background** | `#FCF9F3` | Primary light-mode background    |

***

## Light Mode Palette

Designed to feel warm, readable, and paper-like.

| Token               | Hex       | Purpose               |
| ------------------- | --------- | --------------------- |
| Background / Canvas | `#FCF9F3` | App & docs background |
| Surface / Cards     | `#FFFFFF` | Elevated content      |
| Primary Text        | `#1A1A1A` | Headings & body       |
| Muted Text          | `#6B6B6B` | Secondary information |
| Primary Action      | `#226326` | Buttons, links        |
| Action Hover        | `#2B7D30` | Hover & focus         |
| Border / Divider    | `#E6E2D9` | Subtle separation     |

***

## Dark Mode Palette

Dark mode uses deep greens instead of pure black to retain warmth.

| Token               | Hex       | Purpose           |
| ------------------- | --------- | ----------------- |
| Background / Canvas | `#0D0D0D` | App background    |
| Surface / Cards     | `#151515` | Elevated layers   |
| Primary Text        | `#F5F5F5` | Main content      |
| Muted Text          | `#A0A0A0` | Secondary text    |
| Primary Action      | `#78C87D` | Buttons, links    |
| Action Hover        | `#339E3A` | Hover & focus     |
| Border / Divider    | `#262626` | Subtle separation |

***

## Gradients

### Primary Brand Gradient

Used sparingly for hero sections, highlights, and callouts.

```css theme={null}
background: linear-gradient(
  180deg,
  #226326 0%,
  #2B7D30 100%
);
```

Guidelines
•	Avoid gradients behind body text
•	Prefer solid surfaces for readability
•	Use gradients as emphasis, not decoration

***

## Typography

Lyzn AI typography pairs modern clarity with editorial warmth.

***

### Titles & Headings

font-family: "Reddit Sans";
font-weight: 600;
font-size: 24px;
line-height: 100%;
letter-spacing: 0px;

Usage
•	Page titles
•	Section headers
•	Card titles
•	Navigation labels

Tone: confident, direct, modern.

***

### Body Text

font-family: "EB Garamond";
font-weight: 400;
font-size: 14px;
line-height: 100%;
letter-spacing: 0px;

Usage
•	Paragraphs
•	Descriptions
•	Supporting copy
•	Documentation content

Tone: calm, readable, thoughtful.

***

### Logo Usage Guidelines

<AccordionGroup>
  <Accordion title="Do’s" icon="check">
    * Use official logo assets only
    * Maintain generous clear space
    * Choose correct color variants per background
    * Keep the logo legible at all sizes
  </Accordion>

  <Accordion title="Don’ts" icon="xmark">
    * Don’t stretch or distort
    * Don’t recolor or apply gradients
    * Don’t add shadows or effects
    * Don’t place on noisy backgrounds
  </Accordion>
</AccordionGroup>

***

Accessibility Notes
•	Maintain WCAG AA contrast for text
•	Avoid green-on-green text combinations
•	Use icons + text for critical actions
•	Never rely on color alone to convey meaning

***

Asset Downloads

For high-resolution files, SVGs, or additional formats, contact
[hello@mellob.in](mailto:hello@mellob.in)

***

Lyzn AI
Thoughtful technology. Calm intelligence. Built to last.