# Fintua Design System

> High-contrast geometric precision where deep purple ink meets electric blue actions on a structured light-gray grid.

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

## TL;DR
Fintua utilizes a sophisticated monochrome-plus-accent palette, where the foundational canvas is pure white (#ffffff) or light gray (#f0f0f0), punctuated by a signature deep purple (#3d0f63) for primary typography and brand identity. The system’s "voltage" is carried by Electric Blue (#0064ff) for high-priority CTAs and a softer muted lavender (#8f99cf) for secondary actions. Typography is strictly sans-serif, pairing the technical geometric qualities of BW Gradual DEMO for display with the high-legibility utility of Inter for body and UI. Layouts are defined by generous 70px vertical spacing and consistent 15px corner radii on content cards.

## Signature DNA
1. **The Purple-to-Blue Pivot** (Deep purple #3d0f63 is used for the wordmark and headings, but never for primary buttons, which pivot to Electric Blue #0064ff or Lavender #8f99cf to signal interactivity.)
2. **Geometric Display** (BW Gradual DEMO at weight 700 with a 1.2 line-height creates a distinct, tech-forward architectural feel for all primary value propositions.)
3. **Soft-Shell Containers** (Large content blocks use a 15px radius with subtle #f0f0f0 backgrounds, creating soft but clearly defined zones of information without heavy borders.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Page background, button text | 8 | 1 | `--wp--preset--color--white` |
| `{color.body-text}` | #333333 | Default running text | 40 | 1 | `--wp--preset--color--body-text` |
| `{color.light-gray}` | #f0f0f0 | Section backgrounds, card surfaces | 4 | 1 | `--wp--preset--color--light-gray` |
| `{color.black}` | #000000 | High-contrast text, deep shadows | 2 | 1 | `--wp--preset--color--black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.purple}` | #3d0f63 | Headings, brand wordmark, footer bg | 10 | 1 | `--wp--preset--color--purple` |
| `{color.comply}` | #8f99cf | Secondary button backgrounds | 9 | 1 | `--wp--preset--color--comply` |
| `{color.electric-blue}` | #0064ff | Primary CTA, text links | 4 | 1 | `--wp--preset--color--electric-blue` |
| `{color.dark-purple}` | #2e0854 | Decorative text emphasis | 1 | 1 | `decorative_only` |
| `{color.einvoice}` | #85b0a8 | Product-specific surface (teal) | 1 | 1 | `decorative_only` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | #1dbf73 | Confirmation states |
| `{color.error}` | #ff4f40 | Validation errors |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| BW Gradual DEMO | 600, 700 | Display, Headings | Syne | Proprietary |
| Inter | 400, 500, 600 | Body, UI, Buttons | Inter (Google) | SIL OFL |
| Arial | 400 | Fallback, small UI | Sans-serif | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 48px | 57.6px | normal | 700 | Hero H1 | `h1.wp-block-heading` |
| `{type.h3}` | 30px | 34.98px | normal | 600 | Section heads | `h3.has-h-4-font-size` |
| `{type.h4}` | 24px | 34.56px | normal | 600 | Sub-headers | `p.has-h-5-font-size` |
| `{type.body-lg}` | 18px | 25.99px | normal | 400 | Hero subtext | `section.hero-global` |
| `{type.link}` | 18px | 25.99px | normal | 500 | Nav links | `a` |
| `{type.body-md}` | 16px | 19.2px | normal | 500 | Feature text | `p:nth-of-type(1)` |
| `{type.button}` | 16px | 23px | normal | 600 | CTA labels | `a.wp-block-button__link` |
| `{type.caption}` | 13px | normal | normal | 400 | Small UI | `button.video-link-block__toggle` |

### Principles
1. **Display weight is heavy.** BW Gradual is never used below weight 600; it is the "loud" voice of the system.
2. **Body copy is spacious.** Inter at 18px uses a ~1.44 line-height (25.99px) to ensure readability on light-gray backgrounds.
3. **Button text is semi-bold.** All interactive labels use Inter 600 for clear visual hierarchy.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 12px | 9 |
| `{space.sm}` | 16px | 4 |
| `{space.md}` | 20px | 4 |
| `{space.lg}` | 32px | 4 |
| `{space.xl}` | 48px | 6 |
| `{space.section}` | 70px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sharp containers | 28 occurrences |
| `{radius.sm}` | 6px | Inputs, small cards | Card component |
| `{radius.md}` | 15px | Standard cards | Card component |
| `{radius.pill}` | 30px | Buttons | Rounded Button component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | rgba(21, 65, 133, 0.27) 0px 10px 20px 0px | Floating content cards | Card component |
| `{shadow.inner}` | rgba(0, 0, 0, 0.1) 0px -15px 15px -15px | Section depth | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** https://fintua.com
**Spec:** Background `{color.comply}` (#8f99cf) / Text `{color.purple}` (#3d0f63) / Radius 30px / Padding 12px 25px / Typography Inter 600 (16px)
**States observed:** Default | Hover: captured

#### Surface
**Role:** Structural grouping
**Pages observed:** https://fintua.com
**Spec:** Background transparent / Radius 15px / Border 0px
**States observed:** Default: captured

### Tier 2: Patterns

#### Card (Elevated)
**Role:** Feature highlight
**Pages observed:** https://fintua.com
**Spec:** Background transparent / Border #ffffff (4px) / Radius 6px / Shadow `{shadow.card}` / Padding 20px
**States observed:** Default: captured

#### Card (Sectional)
**Role:** Content grouping on light-gray
**Pages observed:** https://fintua.com
**Spec:** Background `{color.light-gray}` (#f0f0f0) / Radius 15px / Padding 70px 48px / Shadow `{shadow.inner}`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Section Gap | 70px |
| Card Padding | 48px (horizontal) |
| Max Width | Not captured in source |

## Imagery & decoration
Fintua uses product-specific color blocks (Teal #85b0a8, Lavender #bfb0cf, Light Blue #9ed1d9) as background fills for feature illustrations. It avoids photography in favor of high-contrast logos and abstract geometric shapes.

## Do's
- Use BW Gradual DEMO 700 for all H1 headlines.
- Set primary CTA backgrounds to Electric Blue #0064ff.
- Apply a 15px border radius to all content-heavy cards.
- Use #f0f0f0 for alternating section backgrounds to maintain structure.
- Ensure all body text is #333333 for optimal contrast on white.

## Don'ts
- **Wrong:** Using #3d0f63 (Purple) for primary action buttons. **Right:** Use #0064ff (Electric Blue). **Reason:** Purple is reserved for brand identity and headings; Blue is the functional action color.
- **Wrong:** Mixing serif fonts into the system. **Right:** Stick to Inter or BW Gradual. **Reason:** Fintua is a strictly geometric sans-serif brand.
- **Wrong:** Using sharp 0px corners for interactive elements. **Right:** Use 30px pill or 15px rounded. **Reason:** The brand language relies on "soft-tech" geometry.

## Similar brands
- Stripe (layout structure)
- Mercury (typography weight)
- Ramp (monochrome + accent logic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --fintua-purple: #3d0f63;
  --fintua-electric-blue: #0064ff;
  --fintua-lavender: #8f99cf;
  --fintua-bg-gray: #f0f0f0;
  --fintua-radius-card: 15px;
  --fintua-shadow-elevated: 0px 10px 20px 0px rgba(21, 65, 133, 0.27);
}
```

## Agent prompt examples
- "Create a feature section with a #f0f0f0 background, 70px vertical padding, and a 15px rounded card containing Inter 18px text."
- "Generate a primary CTA button using #0064ff background, white text, and a 30px border radius."
- "Design a heading block using BW Gradual DEMO at 48px weight 700 in #3d0f63."

## Known gaps
- Mobile-specific breakpoints were not explicitly declared in the CSS variable tokens.
- Hover state hex values for the Electric Blue buttons were not captured in the computed style evidence.
- Hover state for the purple footer links was not captured.