# 🎨 Lixus Design System

**Version:** 2026  
**Scope:** Web, Internal Systems, Product Interfaces  
**Brand Core:** Expanding · Practical · Technology‑Driven

***

## 1. Brand Philosophy & Visual Atmosphere

Lixus products are designed to **connect technology with real human needs**, across multiple digital touchpoints.

Our visual language reflects three core values:

*   **Expanding** — forward‑looking, scalable, and adaptive
*   **Practical** — minimal friction, fast comprehension, no excess
*   **Technology‑driven** — precise, structured, and confidently modern

The interface prioritizes **clarity over decoration**. Every layout should guide users toward the **most relevant answer in the shortest possible time**.

### Visual Principles

*   Clean, structured layouts with generous whitespace
*   Clear hierarchy, never visual noise
*   Depth created through subtle elevation, not borders
*   Color used intentionally, never decoratively

***

## 2. Color System & Semantic Roles

The Lixus palette is anchored in **teal and green tones**, supported by vibrant but controlled secondary accents.

### Primary Brand Colors

Used for identity, CTAs, and dominant interface elements.

| Name              | Hex       | Primary Usage                                   |
| ----------------- | --------- | ----------------------------------------------- |
| **Deep Teal**     | `#043E3B` | Headings, dark surfaces, high-contrast text     |
| **Brand Teal**    | `#058880` | Primary buttons, active states, brand accents   |
| **Light Seafoam** | `#72C8B7` | Hover states, subtle backgrounds, soft emphasis |

### Secondary & Accent Colors

Used sparingly for status, indicators, and clarification.

| Name             | Hex       | Usage                               |
| ---------------- | --------- | ----------------------------------- |
| **Charcoal**     | `#333333` | Body text, neutral surfaces         |
| **Tech Blue**    | `#2B3087` | Links, secondary actions            |
| **Sky Blue**     | `#5AB4E5` | Informational states                |
| **Alert Yellow** | `#E1B025` | Warning, pending, attention markers |
| **Pale Olive**   | `#D6E2A8` | Success, positive reinforcement     |

> **Rule:**  
> If color does not communicate meaning, it should not be used.

***

## 3. Typography System

Typography establishes both **brand personality** and **functional clarity**.

### Font Families

| Role                   | Typeface | Purpose                                   |
| ---------------------- | -------- | ----------------------------------------- |
| **Primary (Headings)** | Cabin    | Structure, product explanation, hierarchy |
| **Secondary (Body)**   | Roboto   | Copy text, UI labels, long reading        |

### Typographic Hierarchy

| Role               | Typeface | Weight      | Color     | Usage                    |
| ------------------ | -------- | ----------- | --------- | ------------------------ |
| **Hero Title**     | Cabin    | Bold        | `#043E3B` | Page headlines           |
| **Section Header** | Cabin    | Bold        | `#043E3B` | Major sections           |
| **Feature Title**  | Cabin    | Bold        | `#333333` | Cards, components        |
| **Body Text**      | Roboto   | Regular     | `#333333` | Paragraphs, descriptions |
| **UI Label**       | Roboto   | Medium/Bold | `#058880` | Buttons, navigation      |

> **Rule:**  
> Cabin explains **structure and intent**.  
> Roboto handles **function and readability**.

***

## 4. Logo Usage & Constraints

The Lixus logo is a **fixed visual asset** and must never be stylized.

### Clear Space

*   **Ideal safe area:** Measure using the “x” unit from the logo, stacked in a right‑angle around the mark
*   **Minimum safe area:** At least **1× x‑height** on all sides

### Background Rules

*   ✅ Prefer **pure white** background
*   ✅ On black background → **white logo only**
*   ❌ Never place logo on images
*   ❌ Never apply shadows, outlines, or filters
*   ❌ Never distort proportions or recolor arbitrarily

***

## 5. UI Components & Elevation

Lixus interfaces follow a **Soft‑Tech** aesthetic: confident, friendly, and premium.

### Buttons

**Primary Action**

*   Background: `#058880`
*   Text: White
*   Radius: `6–8px`
*   Purpose: Main conversions, confirmations

**Secondary Action**

*   Background: White
*   Text: `#043E3B`
*   Border: Subtle ring or soft shadow
*   Purpose: Alternative or supporting actions

***

### Elevation & Depth

Depth communicates hierarchy without visual heaviness.

| Level       | Description                                    |
| ----------- | ---------------------------------------------- |
| **Level 1** | Flat base, no shadow                           |
| **Level 2** | Card containers, subtle ring + diffused shadow |
| **Level 3** | Hovered or active elements, deeper soft shadow |

> Avoid harsh borders. Let shadow and spacing do the work.

***

## 6. Layout & Composition Rules

*   Prefer **grid‑based layouts**
*   Align content visually, not just logically
*   Balance dense information with breathing space
*   Keep interaction zones obvious and forgiving

***

## 7. Execution Directives (Agent & Dev Guide)

Use the following patterns when generating designs or instructing teams:

```text
• Use a white background canvas.
• Headline: Cabin Bold, Deep Teal (#043E3B)
• Body text: Roboto Regular, Charcoal (#333333)
```

```text
• Place the Lixus logo on white.
• Maintain clear space equal to at least 1× x-height.
• Never add effects or custom treatments.
```

```text
• Primary CTA:
  - Background: #058880
  - Radius: 6px
  - Typeface: Roboto Bold
```

***