# Collexo Design System

> Deep royal purple accents on a clinical white canvas, utilizing tight Inter typography and sharp geometric containers to signal financial stability for the education sector.

**Source:** https://collexo.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Collexo employs a high-contrast "FinTech for Education" aesthetic. The system is anchored by a primary Royal Purple (`#663795`) used for critical CTAs and brand identifiers, set against a pure white (`#ffffff`) foundation. Typography is exclusively sans-serif, primarily Inter, with heavy weights (700) for headers and tight line heights. UI elements favor small border radii (5px to 8px) and subtle elevation, creating a structured, trustworthy environment. Sectioning is defined by generous vertical spacing (100px) and occasional soft-tinted backgrounds.

## Signature DNA
1. **Royal Purple Anchoring** (The use of `#663795` as the singular chromatic driver for buttons, icons, and 404 display text, establishing brand authority across `collexo.com` and `collexo.com/pricing`).
2. **Inter Bold Hierarchy** (Heavyweight Inter at 700 for all display and section headings, paired with tight 1.2x line-heights to create a dense, professional information density).
3. **Geometric Card Grid** (White surface cards with subtle `#0000001a` shadows and 8px radii, used to compartmentalize complex financial product features).

## Family Map
Not captured in source (No sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text, card surface | 40 | 1.0 | `css_variable:--white` |
| `{color.dark-text}` | `#212529` | Primary body and heading text | 105 | 0.8 | `computed_style` |
| `{color.gray}` | `#6c757d` | Secondary text, footer links | 10 | 1.0 | `css_variable:--gray` |
| `{color.black}` | `#000000` | Primary CTA background, deep text | 7 | 0.6 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#663795` | Brand primary, buttons, active states | 35 | 1.0 | `css_variable:--primary` |
| `{color.navy}` | `#0a2540` | High-contrast heading text | 33 | 0.8 | `computed_style` |
| `{color.link-blue}` | `#1471bf` | Inline text links (decorative_only) | 4 | 0.6 | `computed_style` |
| `{color.border-soft}` | `#d2e3ff` | Card borders on About page | 3 | 0.6 | `computed_style` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--green` | `#28a745` | Success indicators (declared) |
| `--red` | `#dc3545` | Error/Alert states (declared) |
| `--yellow` | `#ffc107` | Warning states (declared) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Inter | 400, 500, 600, 700 | Primary UI, Headings, Body | Inter (Google Fonts) | SIL Open Font |
| unifront | 400 | Iconography, arrows | N/A | Proprietary |
| Roboto | 400, 700 | Secondary heading role | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 40px | 48px | normal | 700 | Hero H1 | `h1.heading-h1.m-0` |
| `{type.h2}` | 28px | 33.6px | normal | 700 | Section Headings | `h2.heading-h2.my-3` |
| `{type.h3}` | 24px | 28.8px | normal | 700 | Sub-section titles | `h3.heading-h3.m-0` |
| `{type.h3-alt}` | 18px | 21.6px | normal | 600 | Feature titles | `h3` |
| `{type.body-lg}` | 16px | 25.6px | normal | 400 | Subtext/Intro | `div.top-section-text.subtext` |
| `{type.body}` | 16px | 24px | normal | 400 | Default running text | `article#post-543` |
| `{type.body-sm}` | 14px | 21px | normal | 500 | Button labels | `a.btn-md.btn-black` |
| `{type.caption}` | 12px | 16px | normal | 600 | Small labels/Lists | `li:nth-of-type(1)` |

### Principles
1. **Bold Weight for Authority:** All headings H1 through H3 utilize weight 700 to project financial stability.
2. **Tight Leading on Display:** Display type uses a 1.2x line-height ratio, keeping large headlines compact.
3. **Standardized Body Tracking:** No custom letter-spacing is applied to Inter body text, relying on the font's native legibility.

## Spacing
**Base unit:** 5px (derived from recurring 5, 10, 15, 20px patterns)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 38 |
| `{space.sm}` | 10px | 35 |
| `{space.md}` | 20px | 6 |
| `{space.lg}` | 40px | 4 |
| `{space.section}` | 100px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Layout containers | 187 occurrences |
| `{radius.sm}` | 5px | Primary Buttons, Cards | `Rounded Button` component |
| `{radius.md}` | 8px | Feature Cards (shadowed) | `Card` observed once |
| `{radius.lg}` | 20px | About page accent cards | `Card` observed once |
| `{radius.full}` | 50px | Pill badges/Avatars | `Surface` observed once |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | 0px | Default page sections | Standard containers |
| Raised | `rgba(0, 0, 0, 0.1) 0px 0px 5px 0px` | Interactive feature cards | `Card` component |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** `collexo.com`, `collexo.com/about`
**Spec:** Background: `#000000` / Text: `#ffffff` / Radius: `5px` / Padding: `12px 20px` / Typography: `Inter 14px (500)`
**States observed:** Default: Captured | Hover/Active: Not captured

#### Brand Button (Purple)
**Role:** High-priority CTA (e.g., "Go Home", "Schedule Demo")
**Pages observed:** `collexo.com`, `404 page`
**Spec:** Background: `#663795` / Text: `#ffffff` / Radius: `5px` / Padding: `12px 20px`
**States observed:** Default: Captured

### Tier 2: Patterns
#### Feature Card (Shadowed)
**Role:** Highlighting specific product benefits
**Pages observed:** `collexo.com`
**Spec:** Background: `#ffffff` / Border: `none` / Shadow: `rgba(0, 0, 0, 0.1) 0px 0px 5px 0px` / Radius: `8px` / Padding: `10px`
**States observed:** Default: Captured

#### Accordion Item
**Role:** FAQ and detailed disclosure
**Pages observed:** `collexo.com`
**Spec:** Background: `#ffffff` / Text: `#212529` / Typography: `Inter 16px (500)` / Border-bottom: `1px solid #e9ecef` (implied)
**States observed:** Default: Captured | Expanded: Captured

### Tier 3: Surface-specific
#### About Accent Card
**Role:** Narrative content blocks
**Pages observed:** `collexo.com/about`
**Spec:** Background: `#ffffff` / Border: `2px solid #d2e3ff` / Radius: `20px` / Padding: `10px`
**States observed:** Default: Captured

#### Stat Block
**Role:** Numerical social proof
**Pages observed:** `collexo.com`
**Spec:** Typography (Value): `Inter 28px (700)` / Typography (Label): `Inter 14px (400)` / Text: `#663795`
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max content width | 1140px (standard container) |
| Section Padding (Vertical) | 100px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked columns, 100% width buttons, Hamburger menu active |
| Desktop | 1440px | Multi-column grids (4-up for features), horizontal navigation |

## Imagery & decoration
- **Iconography:** Uses thin-stroke illustrative icons with brand purple (`#663795`) accents.
- **Backgrounds:** Occasional use of very soft purple/pink tints behind sections to break white space.
- **Avoids:** Heavy drop shadows, rounded corners exceeding 20px (except for pills), and photographic backgrounds that obscure text.

## Do's
- Use `#663795` for the primary "Schedule Demo" or "Go Home" actions.
- Set all section headers in Inter 700 with `normal` letter-spacing.
- Maintain 100px vertical spacing between major content bands.
- Use 5px border-radius for standard interactive elements like buttons.
- Ensure all body text uses `#212529` for maximum readability on white.

## Don'ts
- **Wrong:** Using `#007bff` (declared blue) for primary CTAs. **Right:** Use `#663795`. **Reason:** Blue is a secondary token; purple is the brand identifier.
- **Wrong:** Applying heavy shadows to cards. **Right:** Use `rgba(0,0,0,0.1) 0px 0px 5px`. **Reason:** The brand relies on a clean, flat aesthetic.
- **Wrong:** Using Roboto for primary H1 headers. **Right:** Use Inter 700. **Reason:** Inter is the primary display face for the parent brand.
- Do not use border radii larger than 8px for standard product cards.
- Do not use pure black `#000000` for long-form body copy.

## Similar brands
- Stripe (layout structure and typography density)
- Razorpay (color blocking and FinTech clarity)
- Bill.com (professional, education-adjacent financial UI)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --primary: #663795;
  --dark-text: #212529;
  --white: #ffffff;
  --gray: #6c757d;
  --radius-sm: 5px;
  --radius-md: 8px;
  --shadow-subtle: 0px 0px 5px 0px rgba(0, 0, 0, 0.1);
  --font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using Collexo brand purple #663795, Inter 14px Medium text, and a 5px border radius."
- "Design a feature card with a white background, a subtle 5px blur shadow at 10% opacity, and 8px rounded corners."
- "Generate a section header using Inter 700 at 28px with a line height of 33.6px in color #0a2540."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific typography scale (fluid type) was not provided in the evidence.
- Specific transition timings for accordions were not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://collexo.com | 1440px | 2026-06-06 |
| Pricing | https://collexo.com/pricing | 1440px | 2026-06-06 |
| About | https://collexo.com/about | 1440px | 2026-06-06 |