# Texavor Design System

> A precision-engineered editorial canvas anchored by deep forest greens and sharp geometric typography.

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

## TL;DR
Texavor relies on a stark, high-contrast monochrome foundation with `#f9f8f6` as the base canvas and `#0f1916` for primary text. The brand voltage comes from its deep green primary (`#195742`) used sparingly for CTAs and key accents. Typography pairs the geometric weight of Poppins for display with Inter for highly legible UI and body copy. The system is structurally rigid, favoring 1px `#e3e2dd` borders and flat surfaces over deep elevation.

## Signature DNA
1. **Deep Green Monochrome** (The UI avoids vibrant SaaS blues or purples, anchoring entirely on `#195742` and `#1d533f` for interactive moments, creating a mature, research-focused aesthetic observed across all core pages.)
2. **Geometric Display Weight** (Poppins at 700 and 900 weight with tight tracking at -1.2px drives the editorial hierarchy, contrasting sharply with clean Inter body copy.)
3. **Flat Card Architecture** (Cards rely on 1px `#e3e2dd` borders and subtle background shifts from `#ffffff` to `#f9f8f6` rather than shadows to establish hierarchy.)

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--background` | `#f9f8f6` | surface_bg, text, border | 56 | 1.0 | css_variable |
| `--foreground` | `#0f1916` | text, surface_bg | 313 | 1.0 | css_variable |
| `--border` | `#e3e2dd` | border, surface_bg | 53 | 1.0 | css_variable |
| `--color-white` | `#ffffff` | surface_bg, button_text | 18 | 1.0 | css_variable |
| `--muted` | `#efeeeb` | surface_bg | 8 | 1.0 | css_variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--primary` | `#195742` | surface_bg, button_bg | 38 | 1.0 | css_variable |
| `--muted-foreground` | `#60766f` | text, button_text | 140 | 1.0 | css_variable |
| `--accent` | `#e8a530` | surface_bg, text | 19 | 1.0 | css_variable |
| `computed` | `#1d533f` | button_bg, surface_bg | 6 | 0.6 | computed_style |
| `computed` | `#104127` | surface_bg (<5 occurrences decorative_only) | 3 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--destructive` | `#dc2828` | text, surface_bg | 11 | 1.0 | css_variable |

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 400, 700, 900 | display, heading | Montserrat | OFL |
| Inter | 400, 500, 600, 700 | body, heading | Roboto | OFL |
| Geist Mono | 400, 700 | mono, heading | JetBrains Mono | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 48px | 60px | -1.2px | 700 | Primary hero | `h2.text-3xl.md:text-5xl` |
| `display-md` | 48px | 48px | -1.2px | 900 | Emphasized hero | `span.text-5xl.font-black` |
| `heading-xl` | 36px | 40px | -1.8px | 700 | Section headers | `div.text-4xl.font-bold` |
| `heading-lg` | 30px | 36px | normal | 700 | Sub-section headers | `h3.text-2xl.md:text-3xl` |
| `heading-md` | 24px | 32px | normal | 700 | Card titles | `h3.text-2xl.font-poppins` |
| `body-lg` | 18px | 29.25px | normal | 400 | Lead paragraphs | `p.text-base.md:text-lg` |
| `body-base` | 16px | 24px | normal | 400 | Default body | `section.w-full.pt-24` |
| `body-sm` | 14px | 20px | normal | 400 | Secondary text | `p.text-sm.font-inter` |
| `caption` | 12px | 16px | normal | 400 | Microcopy | `span.text-xs.font-inter` |
| `caption-strong` | 11px | 16.5px | 1.1px | 700 | Badges and labels | `span.text-[11px].font-inter` |

### Principles
1. **Strict Type Separation:** Poppins is reserved exclusively for display and headings. Inter handles all functional UI and body copy.
2. **Tight Display Tracking:** Poppins headings pull tight (-1.2px to -1.8px) to create solid, block-like text shapes.
3. **Monospace Accents:** Geist Mono is deployed for technical data points and specific metric callouts.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `space-1` | 4px | 48 |
| `space-2` | 8px | 44 |
| `space-3` | 12px | 28 |
| `space-4` | 16px | 83 |
| `space-6` | 24px | 51 |
| `space-8` | 32px | 74 |
| `space-10` | 40px | 23 |
| `space-32` | 128px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Full-bleed surfaces | 480 occurrences |
| `radius-sm` | 4px | Small inputs | 18 occurrences |
| `radius-md` | 6px | Buttons and standard inputs | 31 occurrences |
| `radius-lg` | 12px | Standard feature cards | 39 occurrences |
| `radius-xl` | 16px | Large layout cards | 16 occurrences |
| `radius-pill` | 9999px | Badges | 35 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | Default state for all cards and surfaces | `shadow: none` on 90% of components |
| Subtle | `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | Primary buttons | 7 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action.
**Pages observed:** https://texavor.com, https://texavor.com/pricing
**Spec:** Background `#1d533f` / Text `#ffffff` / Border `rgba(0, 0, 0, 0)` / Radius 6px / Padding 4px 8px / Typography 14px / Shadow subtle
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Ghost Button
**Role:** Secondary actions.
**Pages observed:** https://texavor.com, https://texavor.com/pricing
**Spec:** Background transparent / Text `#60766f` / Border `rgba(0, 0, 0, 0)` / Radius 6px / Padding 4px 8px / Typography 14px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns

#### Standard Card
**Role:** Feature and pricing containers.
**Pages observed:** https://texavor.com, https://texavor.com/pricing
**Spec:** Background `#ffffff` (rgb(253, 253, 252)) / Text `#0f1916` / Border `#e3e2dd` 1px / Radius 12px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Muted Card
**Role:** Secondary data containers.
**Pages observed:** https://texavor.com, https://texavor.com/pricing
**Spec:** Background `#f9f8f6` / Text `#60766f` / Border `#e3e2dd` 1px / Radius 8px / Padding 6px / Typography 16px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 3: Surface-specific

#### Accent Surface
**Role:** Highlight bands.
**Pages observed:** https://texavor.com, https://texavor.com/pricing
**Spec:** Background `#e8a530` / Text `#0f1916` / Border 0px / Radius 0px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Compact Data Card
**Role:** Small metric readouts.
**Pages observed:** https://texavor.com, https://texavor.com/pricing
**Spec:** Background `#1d533f` / Text `#ffffff` / Border 0px / Radius 4px / Padding 8px 16px / Typography 14px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured in source |
| Section padding | 128px |
| Grid | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| sm | Not captured | Triggers flex layouts (`sm:flex`) |
| md | Not captured | Scales typography (`md:text-5xl`, `md:text-lg`) |

## Imagery & decoration
The brand relies on flat, geometric UI illustrations and data visualizations. It avoids heavy drop shadows, gradients, and photographic backgrounds, preferring stark contrast between `#f9f8f6` and `#0f1916`.

## Do's
* Use `#195742` strictly for primary actions and key brand moments.
* Apply Poppins at 700 or 900 weight for all major headings.
* Use 1px `#e3e2dd` borders to define structure instead of shadows.
* Keep body text legible using Inter at 400 weight.
* Apply tight negative tracking (-1.2px) to large Poppins display text.

## Don'ts
* **Wrong:** Using `#e8a530` as the primary button color. **Right:** Using `#195742`. **Reason:** The orange is an accent color; using it as the parent primary misaligns the brand hierarchy.
* **Wrong:** Applying heavy drop shadows to cards. **Right:** Using a 1px `#e3e2dd` border. **Reason:** The system relies on flat architecture and hairline borders for depth.
* **Wrong:** Using Poppins for body copy. **Right:** Using Inter. **Reason:** Poppins is too geometric for long-form reading; Inter ensures legibility.

## Similar brands
* Vercel
* Linear
* Stripe

## Quick start

```css
:root {
  --background: #f9f8f6;
  --foreground: #0f1916;
  --border: #e3e2dd;
  --color-white: #ffffff;
  --muted: #efeeeb;
  --primary: #195742;
  --muted-foreground: #60766f;
  --accent: #e8a530;
  --destructive: #dc2828;
}
```

```json
{
  "theme": {
    "colors": {
      "background": "#f9f8f6",
      "foreground": "#0f1916",
      "border": "#e3e2dd",
      "primary": "#195742",
      "muted": "#efeeeb",
      "accent": "#e8a530"
    }
  }
}
```

## Agent prompt examples
1. "Create a pricing card using the standard card component. The background should be `#ffffff` with a 1px `#e3e2dd` border and 12px radius. Use Poppins 700 for the price and Inter 400 for the feature list."
2. "Build a hero section with a `#f9f8f6` background. The main headline should be 48px Poppins 900 with -1.2px letter spacing. Include a primary CTA button using `#1d533f`."
3. "Design a metric readout using the compact data card pattern. Set the background to `#1d533f` with `#ffffff` text, 4px radius, and 8px 16px padding."

## Known gaps
Hover, focus, and active states for interactive components were not captured in the source data. Specific responsive breakpoint pixel values are missing.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://texavor.com | Desktop | 2026-06-06T05:01:00.334Z |
| Pricing | https://texavor.com/pricing | Desktop | 2026-06-06T05:01:00.334Z |
| About | https://texavor.com/about | Desktop | 2026-06-06T05:01:00.334Z |