# Fexco Design System

> High-contrast monochrome precision punctuated by sharp geometric red accents and deep purple interactive moments.

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

## TL;DR
Fexco utilizes a stark, professional aesthetic defined by a white canvas and heavy black typography. The system is anchored by **Plus Jakarta Sans** for display and **Inter** for functional body text. Brand "voltage" is delivered through a high-energy red (`#ff0023`) used for structural accents and a distinct vivid purple (`#8013d3`) reserved for primary call-to-action buttons. Layouts are characterized by sharp corners (`0px` radius) for content containers, contrasted against ultra-rounded pill shapes (`80px`) for interactive elements.

## Signature DNA
1. **The Red Underline** (A 2px-4px horizontal bar in `#ff0023` sits at the base of feature cards and section headers, providing a consistent structural anchor across all pages.)
2. **Vivid Purple CTAs** (Primary actions break the monochrome/red palette with `#8013d3`, a specific choice that separates global navigation and primary conversion points from brand decoration.)
3. **Sharp vs. Pill Contrast** (Content surfaces maintain a strict `0px` radius, while all buttons use a soft `80px` pill shape, creating a clear "touchable" vs. "readable" hierarchy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, footer background, dark section surfaces | 213 | 1.0 | Computed Style |
| `{color.white}` | `#ffffff` | Page background, button text, card surfaces | 107 | 1.0 | Computed Style |
| `{color.border.light}` | `#e5e6e7` | Subtle section dividers and card outlines | 8 | 0.6 | Computed Style |
| `{color.border.medium}` | `#c4c6c8` | Form borders and secondary UI outlines | 20 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.brand.red}` | `#ff0023` | Structural accents, underlines, decorative icons | 32 | 0.8 | Computed Style |
| `{color.brand.purple}` | `#8013d3` | Primary button backgrounds, active states | 6 | 0.6 | Computed Style |
| `{color.brand.orange}` | `#ff7c33` | Secondary text accents (decorative only) | 31 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Plus Jakarta Sans | 400, 700 | Display, Headings | Plus Jakarta Sans (Google) | OFL |
| Inter | 300, 400, 500, 700 | Body, UI, Buttons | Inter (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 64px | 76.8px | normal | 400 | Hero H1 | `h1` |
| `{type.display.lg}` | 45px | 53.76px | normal | 400 | Section Headers | `h2.header` |
| `{type.heading.md}` | 33px | 42.9px | normal | 400 | Card Titles | `div.swiper-slide` |
| `{type.heading.sm}` | 22px | 26.4px | normal | 400 | Sub-sections | `h3` |
| `{type.body.lg}` | 19px | 24.96px | normal | 400 | Article Body | `article` |
| `{type.label.caps}` | 16px | 20.8px | 6.6px | 400 | Section Labels | `p.section-title` |
| `{type.button}` | 13px | 12.8px | normal | 700 | CTA Text | `a.button` |
| `{type.caption}` | 12px | 15.6px | 2px | 400 | Metadata | `div.cat-name` |

### Principles
1. **Wide-track Labels:** Small section labels (16px) use extreme letter-spacing (6.6px) for an architectural feel.
2. **Weight Restraint:** Headings favor 400 weight even at large sizes (64px), relying on scale rather than thickness for hierarchy.
3. **Functional Boldness:** Weight 700 is reserved for buttons and specific data containers (e.g., `span.number-container`).

## Spacing
**Base unit:** 5px (derived from 10, 20, 40, 50px clusters)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 10px | 67 |
| `{space.sm}` | 20px | 61 |
| `{space.md}` | 40px | 5 |
| `{space.lg}` | 50px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Cards, Sections, Images | 258 occurrences |
| `{radius.pill}` | 80px | Buttons, Interactive Tags | 20 occurrences |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main conversion action (e.g., "Contact Us", "More News")
**Pages observed:** https://fexco.com, https://fexco.com/about
**Spec:** Background: `#8013d3` | Text: `#ffffff` | Radius: `80px` | Padding: `16px 40px` | Type: `{type.button}`
**States observed:** Default: Captured | Hover/Active: Not captured

#### Ghost Pill Button
**Role:** Secondary navigation or context-specific actions
**Pages observed:** https://fexco.com, https://fexco.com/about
**Spec:** Background: `transparent` | Text: `#000000` | Border: `1px solid #000000` | Radius: `80px` | Padding: `16px 0px`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying business services or news items
**Pages observed:** https://fexco.com, https://fexco.com/about
**Spec:** Background: `#ffffff` | Radius: `0px` | Border-bottom: `4px solid #ff0023` | Padding: `0px`
**States observed:** Default: Captured

#### Section Header Group
**Role:** Introducing new content blocks
**Pages observed:** https://fexco.com, https://fexco.com/about
**Spec:** Label: `{type.label.caps}` in `#ff7c33` | Title: `{type.display.lg}` in `#000000`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Dark Footer
**Role:** Global site navigation and legal
**Pages observed:** https://fexco.com, https://fexco.com/about
**Spec:** Background: `#000000` | Text: `#ffffff` | Typography: Inter 400
**States observed:** Default: Captured

#### Red Impact Section
**Role:** High-visibility brand messaging
**Pages observed:** https://fexco.com
**Spec:** Background: `#ff0023` | Text: `#ffffff` | Border: `0px`
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | ~1280px |
| Section Gaps | 50px - 64px |
| Column Grid | 3-column (Desktop) |

## Do's
- Use `#8013d3` for primary "Contact" and "Submit" actions only.
- Apply a `0px` radius to all image containers and content cards.
- Ensure all section headers are preceded by a wide-tracked uppercase label.
- Use the `#ff0023` accent bar at the bottom of feature cards.
- Maintain a white background for the majority of content-heavy sections.

## Don'ts
- **Wrong:** Using `#ff0023` for button backgrounds. **Right:** Use `#8013d3`. **Reason:** Red is a structural accent, purple is the interactive trigger.
- **Wrong:** Rounding the corners of cards or images. **Right:** Keep them at `0px`. **Reason:** Fexco uses sharp geometry for its primary containers.
- **Wrong:** Using bold weights for H1 or H2 display text. **Right:** Use weight 400. **Reason:** The brand relies on scale (64px/45px) for hierarchy.

## Quick start

### CSS Custom Properties
```css
:root {
  --fexco-black: #000000;
  --fexco-white: #ffffff;
  --fexco-red: #ff0023;
  --fexco-purple: #8013d3;
  --fexco-orange: #ff7c33;
  --fexco-font-display: 'Plus Jakarta Sans', sans-serif;
  --fexco-font-body: 'Inter', sans-serif;
  --fexco-radius-pill: 80px;
  --fexco-radius-sharp: 0px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #8013d3;
  --color-accent: #ff0023;
  --font-display: "Plus Jakarta Sans";
  --font-body: "Inter";
  --radius-pill: 80px;
}
```

## Agent prompt examples
- "Generate a feature card with a 4px red bottom border, sharp corners, and a Plus Jakarta Sans title."
- "Create a primary CTA button using a pill shape, purple background, and white Inter bold text."
- "Design a section header with a small orange uppercase label (tracked at 6px) above a large black 400-weight heading."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the rendered evidence.
- Mobile-specific navigation menu transitions were not captured.
- Form validation states (Success/Error) are missing from the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://fexco.com | 1440px | 2026-06-06 |
| About | https://fexco.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://fexco.com | 390px | 2026-06-06 |