# Wenodo Design System

> High-contrast hospitality fintech anchored by deep navy ink, vibrant sky-blue actions, and a geometric sans-serif hierarchy.

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

## TL;DR
Wenodo utilizes a "monochrome-plus" system where a deep navy foundation `{colors.neutral-100}` (#1e2432) provides high-contrast authority against a pure white canvas. The primary brand voltage is delivered via a bright sky-blue `{colors.primary-main}` (#05a6f0), used exclusively for interactive triggers and primary buttons. Typography is led by **General Sans** for headings, providing a modern, geometric structure, while **Montserrat** handles high-legibility body content. The system relies on generous vertical spacing and large, soft-radius containers (up to 54px) to soften the professional fintech aesthetic.

## Signature DNA
1. **The Navy Anchor** (Deep navy #1e2432 is used for both primary text and dark-mode section backgrounds, creating a consistent "ink" feel across the site.)
2. **Sky-Blue Interactivity** (The specific #05a6f0 blue is reserved for CTAs and links, ensuring clear affordance against both white and navy backgrounds.)
3. **Soft Geometric Panels** (Large functional blocks use radii between 32px and 54px, moving away from sharp "data-heavy" fintech tropes toward a more approachable hospitality feel.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.neutral-100}` | `#1e2432` | Primary text, dark section backgrounds | 88 | 1 | `--neutral-100` |
| `{colors.neutral-10}` | `#ffffff` | Page canvas, button text on dark | 87 | 1 | `--neutral-10` |
| `{colors.neutral-20}` | `#f7f9fb` | Subtle section backgrounds, secondary cards | 15 | 1 | `--neutral-20` |
| `{colors.neutral-30}` | `#e2e8f0` | Default borders and dividers | 10 | 1 | `--neutral-30` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary-main}` | `#05a6f0` | Primary CTA background, text links | 36 | 1 | `--primary-main` |
| `{colors.success-400}` | `#1dca5d` | Success indicators, "New Ways" markers | 35 | 1 | `--success-400` |
| `{colors.neutral-60}` | `#6b7c94` | Secondary body text, muted labels | 47 | 1 | `--neutral-60` |
| `{colors.primary-border}` | `#ace1fa` | Soft borders for blue-themed cards | 10 | 1 | `--primary-border` |
| `{colors.warning-400}` | `#f3a515` | Decorative only (Status markers) | 1 | 1 | `--warning-400` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success-500}` | `#039855` | Validated text, positive growth markers |
| `{colors.primary-pressed}` | `#025378` | Active state for primary buttons |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| **General Sans** | 600 | Headings, Display | Space Grotesk | Proprietary (Fontshare) |
| **Montserrat** | 400, 500, 600, 700 | Body, UI Labels, Buttons | Montserrat (Google) | SIL Open Font |
| **Arial** | 400, 700 | Fallback body, small UI | System Sans | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{text.display}` | 56px | 84px | normal | 600 | Hero H1 | `h1.animate__animated` |
| `{text.heading-lg}` | 32px | 48px | normal | 600 | Section Titles | `h2.headingTrustedBy` |
| `{text.heading-md}` | 24px | 36px | normal | 600 | Testimonials | `p.testimonial__text` |
| `{text.body-lg}` | 18px | 27px | normal | 500 | Intro paragraphs | `p.animate__animated` |
| `{text.body-base}` | 16px | 24px | normal | 500 | Feature descriptions | `p.descFinancialFeature` |
| `{text.button}` | 14px | 21px | normal | 600 | CTA Labels | `button.btn-cta` |
| `{text.caption}` | 12px | 18px | normal | 700 | Metadata, Names | `p.customer-story__name` |

### Principles
1. **Heading Weight is Static.** General Sans is almost exclusively used at weight 600 for all hierarchy levels.
2. **Generous Leading.** Line heights for display text are set to 1.5x (56/84), ensuring readability in large-scale hero sections.
3. **Sans-Serif Exclusivity.** While Times New Roman appears in raw computed styles, it is a fallback; the brand identity is strictly geometric sans-serif.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 13 |
| `{space.sm}` | 16px | 25 |
| `{space.md}` | 24px | 43 |
| `{space.lg}` | 32px | 14 |
| `{space.xl}` | 40px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 8px | Small cards, input fields | `radius: 8px` |
| `{radius.md}` | 12px | Feature containers | `radius: 12px` |
| `{radius.lg}` | 32px | Large section cards | `radius: 32px` |
| `{radius.xl}` | 54px | Primary buttons, pill containers | `radius: 54px` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgba(16, 24, 40, 0.05) 0px 1px 2px 0px` | Buttons and small cards | `Rounded Button` component |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** wenodo.com, wenodo.com/about
**Spec:** Background: `{colors.primary-main}` (#05a6f0) / Text: `{colors.neutral-10}` (#ffffff) / Radius: `{radius.xl}` (54px) / Padding: 0px 16px
**States observed:** Default | Hover: `{colors.primary-hover}` (#048ac8) | Active: `{colors.primary-pressed}` (#025378)

#### Secondary Button
**Role:** Ghost/Outline actions
**Pages observed:** wenodo.com
**Spec:** Background: transparent / Text: `{colors.primary-main}` (#05a6f0) / Border: 1px `{colors.neutral-30}` (#e2e8f0) / Radius: 46px

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting specific product capabilities
**Pages observed:** wenodo.com, wenodo.com/about
**Spec:** Background: `{colors.neutral-20}` (#f7f9fb) / Text: `{colors.neutral-100}` (#1e2432) / Radius: `{radius.lg}` (32px) / Padding: 24px

#### Success Badge
**Role:** Status and "New" markers
**Pages observed:** wenodo.com, wenodo.com/about
**Spec:** Background: `#e6ffee` / Text: `{colors.success-500}` (#039855) / Radius: 36px / Padding: 8px 12px

### Tier 3: Surface-specific
#### Dark Section Surface
**Role:** High-contrast content bands
**Pages observed:** wenodo.com
**Spec:** Background: `{colors.neutral-100}` (#1e2432) / Text: `{colors.neutral-10}` (#ffffff) / Radius: 0px

#### Navigation Surface
**Role:** Sticky top header
**Pages observed:** wenodo.com, wenodo.com/about
**Spec:** Background: `{colors.neutral-10}` (#ffffff) / Text: `{colors.neutral-100}` (#1e2432) / Border-bottom: 1px `{colors.neutral-30}` (#e2e8f0)

## Layout
| Property | Value |
|---|---|
| Max-width | 1280px |
| Section Padding | 80px - 120px (vertical) |
| Grid | 12-column desktop |

## Do's
- Use `{colors.primary-main}` (#05a6f0) for all primary interactive elements.
- Set all headings in **General Sans** at weight 600.
- Apply `{radius.xl}` (54px) to buttons to maintain the brand's soft geometric feel.
- Maintain high contrast by placing `{colors.neutral-100}` text on white backgrounds.
- Use `{colors.success-400}` (#1dca5d) for positive data visualization and "New" labels.

## Don'ts
- **Wrong:** Using a generic blue (#0000ee) for links. **Right:** Use `{colors.primary-main}` (#05a6f0). **Reason:** Brand consistency and specific sky-blue identity.
- **Wrong:** Using sharp 0px corners for buttons. **Right:** Use 54px pill radius. **Reason:** Softness is a core brand DNA move.
- **Wrong:** Mixing serif fonts into the body text. **Right:** Stick to Montserrat for all running copy.

## Quick start
```css
:root {
  --primary-main: #05a6f0;
  --neutral-100: #1e2432;
  --neutral-10: #ffffff;
  --success-400: #1dca5d;
  --radius-pill: 54px;
  --font-heading: 'General Sans', sans-serif;
  --font-body: 'Montserrat', sans-serif;
}
```

## Known gaps
- Hover states for secondary buttons were not explicitly captured in the CSS variable list, though primary hover/pressed states were.
- Mobile-specific typography scaling for H1 was not fully documented in the evidence.