🎨 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:
• Use a white background canvas.
• Headline: Cabin Bold, Deep Teal (#043E3B)
• Body text: Roboto Regular, Charcoal (#333333)
• Place the Lixus logo on white.
• Maintain clear space equal to at least 1× x-height.
• Never add effects or custom treatments.
• Primary CTA:
- Background: #058880
- Radius: 6px
- Typeface: Roboto Bold