# 10web Design System

> High-contrast monochrome utility meets electric blue accents on a clean, structured canvas.

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

## TL;DR
10web utilizes a "monochrome-plus" system where a strict foundation of deep ink (#14151f) and pure white (#ffffff) is punctuated by a high-voltage primary blue (#0000ee / #3339f1). The interface relies on generous whitespace and a robust typography scale using Evergrow Sans, ranging from 10px captions to 40px display heads. Component geometry is defined by soft-radius controls (8px) and large-radius containers (16px to 24px), often elevated by subtle multi-layered shadows. The brand avoids complex gradients, favoring solid fills and thin hairlines to maintain a technical, "builder" aesthetic.

## Signature DNA
1. **The Electric Primary** (#0000ee / #3339f1) used as a high-contrast signal for primary actions and text links against a neutral canvas.
2. **Evergrow Sans Hierarchy** (spanning weights 300 to 700) which provides a clean, geometric sans-serif voice across all functional and marketing layers.
3. **Soft-Box Elevation** (16px-24px radii with `rgba(20, 21, 31, 0.1)` shadows) that creates distinct content modules without heavy borders.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Surface background, button text, page floor | 504 | 1.0 | Computed Style |
| `{color.ink}` | #14151f | Primary text, dark surfaces, footer background | 404 | 1.0 | Computed Style |
| `{color.black}` | #000000 | Button backgrounds, high-contrast text | 114 | 1.0 | Computed Style |
| `{color.gray.light}` | #f1f1f2 | Secondary surfaces, subtle borders | 5 | 0.6 | Computed Style |
| `{color.gray.muted}` | #767680 | Default borders, disabled states | 15 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | #0000ee | Text links, primary brand signal | 18 | 0.8 | Computed Style |
| `{color.primary.alt}` | #3339f1 | Primary button backgrounds, active states | 10 | 0.6 | Computed Style |
| `{color.green.decorative}` | #22b339 | Decorative badges (Free trial) | 0 | 0.9 | Decorative Only |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Evergrow Sans | 300, 400, 500, 700 | All display, heading, and body roles | Inter or Public Sans | Custom/Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.lg}` | 40px | 52px | normal | 700 | Main section heads | `h2` |
| `{text.heading.md}` | 32px | 44px | normal | 700 | Pricing/Trustpilot titles | `span.plan_price_el` |
| `{text.heading.sm}` | 28px | 40px | normal | 500 | Sub-section titles | `h3.opened-cards__item-title` |
| `{text.body.lg}` | 20px | 30px | normal | 500 | Card titles | `h3.trustpilot_title` |
| `{text.body.md}` | 18px | 28px | normal | 400 | Standard paragraph | `p` |
| `{text.body.sm}` | 14px | 20px | normal | 500 | Button labels, input desc | `a.tw_button.black_bg` |
| `{text.caption.caps}` | 12px | 18px | 2.4px | 500 | Footer menu titles | `p.footer-menu_title` |
| `{text.caption.sm}` | 10px | 16px | normal | 400 | Micro-labels | `span.percent` |

### Principles
1. **Tight Display Tracking:** Larger headings maintain "normal" spacing but rely on heavy 700 weights for impact.
2. **Functional Caps:** 12px captions use aggressive 2.4px letter spacing for organizational labels (footer).
3. **Weight as Hierarchy:** Switching between 400 and 500 weight is the primary method for distinguishing body text from UI labels.

## Spacing
**Base unit:** Custom (4px-based)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 25 |
| `{space.sm}` | 16px | 45 |
| `{space.md}` | 24px | 31 |
| `{space.lg}` | 40px | 14 |
| `{space.xl}` | 80px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Footers, full-width sections | 747 occurrences |
| `{radius.sm}` | 8px | Buttons, text inputs | 48 occurrences |
| `{radius.md}` | 16px | Content cards, pricing tiers | 26 occurrences |
| `{radius.lg}` | 24px | Feature panels | 13 occurrences |
| `{radius.full}` | 50% | Avatars, icon circles | 31 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | rgba(20, 21, 31, 0.1) 0px 4px 8px, rgba(20, 21, 31, 0.06) 0px 2px 4px | Standard content cards | Card component |
| `{shadow.soft}` | rgba(0, 0, 0, 0.08) 0px 4.8px 9.6px, rgba(0, 0, 0, 0.04) 0px -3.6px 4.8px | Floating icons/badges | Observed once |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: `{color.primary.alt}` (#3339f1) or `{color.black}` (#000000) | Text: `{color.white}` (#ffffff) | Radius: 8px | Padding: 11px | Typography: 12px/500
**States observed:** Default | Hover: captured | Focus: not captured

#### Text Input
**Role:** Form entry
**Pages observed:** All
**Spec:** Background: #ffffff | Text: #000000 | Border: 1px `{color.gray.muted}` (0.16 alpha) | Radius: 8px | Padding: 8px 14px
**States observed:** Default | Active: captured

### Tier 2: Patterns

#### Card
**Role:** Feature display and pricing
**Pages observed:** https://10web.io, https://10web.io/pricing
**Spec:** Background: #ffffff | Border: 1px `{color.gray.muted}` (0.12 alpha) | Radius: 16px | Shadow: `{shadow.card}`
**States observed:** Default | Hover: captured

#### Surface (Section)
**Role:** Layout containment
**Pages observed:** All
**Spec:** Background: #ffffff | Padding: 80px 0px | Radius: 0px
**States observed:** Default

### Tier 3: Surface-specific

#### Footer
**Role:** Global site navigation
**Pages observed:** All
**Spec:** Background: `{color.ink}` (#14151f) | Text: #ffffff | Border-top: 1px rgba(255, 255, 255, 0.14) | Padding: 40px 0px
**States observed:** Default

#### Pricing Card (Elevated)
**Role:** Featured plan selection
**Pages observed:** https://10web.io/pricing
**Spec:** Background: #ffffff | Border: 1px #3339f1 | Radius: 16px | Padding: 42px 32px 16px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Padding (Vertical) | 80px |
| Card Padding | 32px |
| Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked cards, 40px section padding, hidden desktop nav |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), 80px section padding |

## Imagery & decoration
10web uses abstract, soft-focus background "blooms" in light blue and purple to add depth to the hero section. UI decoration is limited to 1px hairlines and the "Trustpilot" green badge. It avoids heavy textures or skeuomorphism.

## Do's
- Use `#3339f1` for primary CTA backgrounds.
- Apply `16px` border-radius to all feature-containing cards.
- Maintain `80px` vertical spacing between major sections.
- Use `Evergrow Sans` weight 700 for all H1 and H2 tags.
- Ensure text links use `#0000ee` for high visibility.

## Don'ts
- **Wrong:** Using a generic blue like #0000ff. **Right:** Use the specific brand electric blue #0000ee. **Reason:** Brand consistency.
- **Wrong:** Applying shadows to every element. **Right:** Only apply `{shadow.card}` to interactive or elevated containers. **Reason:** Maintain clean monochrome aesthetic.
- **Wrong:** Using sharp 0px corners for buttons. **Right:** Use the 8px control radius. **Reason:** System-wide geometry rule.

## Similar brands
- Vercel (monochrome foundation)
- Framer (high-contrast utility)
- Linear (technical sans-serif hierarchy)

## Quick start

```css
/* CSS Variables */
:root {
  --color-primary: #0000ee;
  --color-primary-alt: #3339f1;
  --color-ink: #14151f;
  --color-white: #ffffff;
  --radius-control: 8px;
  --radius-card: 16px;
  --shadow-card: 0px 4px 8px 0px rgba(20, 21, 31, 0.1), 0px 2px 4px 0px rgba(20, 21, 31, 0.06);
}
```

## Agent prompt examples
- "Generate a feature card using a 16px border radius, a white background, and the 10web card shadow, with a 20px Evergrow Sans title."
- "Create a primary button with an 8px radius, #3339f1 background, and 12px white bold text."
- "Design a section header using 40px Evergrow Sans at 700 weight with 80px top padding."

## Known gaps
- Hover states for secondary buttons were not fully captured in the automated run.
- Mobile-specific typography scaling for display sizes was partially inferred from viewport rendering.
- The specific font-face file for "Evergrow Sans" was identified but the license type was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://10web.io | 1440px | 2026-06-06 |
| Pricing | https://10web.io/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://10web.io | 390px | 2026-06-06 |