# Wisemotions Design System

> High-contrast monochrome foundation punctuated by vibrant digital gradients and geometric 3D depth.

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

## TL;DR
Wisemotions utilizes a "monochrome-plus" strategy where the core interface is strictly achromatic (#000000 and #ffffff), but brand voltage is delivered through complex gradients and 3D abstract imagery. Typography is anchored by **Poppins**, using heavy weights (700) for headers and light weights (300) for narrative copy to create a distinct editorial rhythm. The system avoids standard UI shadows in favor of 0px radius "sharp" containers and 8px "control" radii for interactive elements. Primary actions are black pills with white text, providing maximum contrast against the white canvas.

## Signature DNA
1. **Achromatic Anchor** (The interface relies on #000000 and #ffffff for all structural elements, ensuring the colorful 3D hero assets remain the focal point.)
2. **Weight Contrast** (Poppins is pushed to its extremes—700 weight for "WE ARE" headers and 300 weight for body descriptions—creating a sophisticated, modern tech aesthetic.)
3. **The Digital Power Gradient** (A signature blue-to-green gradient applied to display type and floating 3D spheres, signaling the "Telepass" partnership identity.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary text, button background, logo | 9 | 0.6 | Computed Style |
| `{color.white}` | `#ffffff` | Page background, button text | 6 | 1.0 | `--white` |
| `{color.dark-gray}` | `#212529` | Secondary body text | 4 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary-blue}` | `#007bff` | Link text, decorative accents | 7 | 1.0 | `--primary` |
| `{color.cyan}` | `#17a2b8` | Decorative only | <5 | 1.0 | `--cyan` |
| `{color.green}` | `#28a745` | Decorative only | <5 | 1.0 | `--green` |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Poppins | 300, 400, 700 | All headings and body | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display}` | 24px | 40px | 0.5px | 700 | Section titles | `div.titolo-card` |
| `{text.body-bold}` | 14px | 23px | normal | 700 | Inline emphasis | `b` |
| `{text.body-light}` | 14px | 23px | normal | 300 | Narrative copy | `p.aos-init` |
| `{text.nav}` | 14px | 24.5px | normal | 400 | Navigation links | `nav.navbar` |
| `{text.footer}` | 14px | 21px | normal | 400 | Footer metadata | `div.testo-footer` |

### Principles
1. **Extreme Weight Pairing:** Never pair 400 with 500; jump from 300 (body) to 700 (header) for maximum hierarchy.
2. **Generous Display Leading:** Display sizes use a line-height ratio of ~1.6x (40px height for 24px text) to allow for 3D graphic overlap.
3. **Achromatic Hierarchy:** Use #000000 for headers and #212529 for body to create a subtle depth of information.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.base}` | 16px | 5 |
| `{space.lg}` | 24px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Section containers, layout blocks | 22 occurrences |
| `{radius.control}` | 8px | Interactive cards, buttons | 3 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All captured components | `shadow: none` |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main CTA (e.g., "We are hiring now!")
**Pages observed:** 1
**Spec:** Background: `#000000` / Text: `#ffffff` / Radius: `9999px` (pill) / Typography: Poppins 400
**States observed:** Default captured.

### Tier 2: Patterns
#### Navigation Bar
**Role:** Global header
**Pages observed:** 1
**Spec:** Background: `#ffffff` / Text: `#000000` / Height: ~80px / Typography: Poppins 400 14px

### Tier 3: Surface-specific
#### Content Card
**Role:** Service or feature highlight
**Pages observed:** 1
**Spec:** Background: `transparent` / Text: `#007bff` / Border: `0px` / Radius: `8px` / Padding: `24px` / Typography: Poppins 700 24px

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px |
| Section Padding | 80px (vertical) |
| Grid | 12-column Bootstrap-based |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Hero text centers; 3D background elements scale to 100% width |
| Desktop | 1440px | Content max-width enforced; lateral white space increases |

## Imagery & decoration
- **3D Abstract Geometry:** Uses white/gray matte-finished spheres and cylinders to create physical depth.
- **Gradient Overlays:** Linear gradients from Blue (`#007bff`) to Green (`#28a745`) are used exclusively for partnership-related messaging.
- **Avoidance:** No flat icons or illustrative line art; the brand relies on photographic 3D renders.

## Do's
- Use Poppins 700 for all "WE ARE" style headers.
- Maintain a pure `#ffffff` background for the main content canvas.
- Use `#000000` for primary buttons to ensure 21:1 contrast.
- Apply 8px radius to interactive surfaces.
- Keep body copy at 14px Poppins 300 for an editorial feel.

## Don'ts
- **Wrong:** Using `#007bff` as a button background. **Right:** Use `#000000`. **Reason:** The parent brand is monochrome; blue is a sub-brand/accent signal.
- Do not use drop shadows on cards; use white space and 3D imagery for depth.
- Do not use Poppins 400 for display headings; it lacks the necessary brand authority.
- Do not mix sharp (0px) and soft (8px) radii within the same component.

## Similar brands
- Apple (achromatic precision)
- Stripe (gradient-driven tech)
- Huge Inc (bold Poppins-style typography)

## Quick start
### CSS Custom Properties
```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-primary: #007bff;
  --font-main: 'Poppins', sans-serif;
  --radius-control: 8px;
  --space-lg: 24px;
}
```

## Agent prompt examples
- "Generate a hero section with a Poppins 700 header in black, Poppins 300 body text, and a black pill-shaped CTA button on a white background."
- "Create a feature card using Poppins 24px/700 for the title, no border, and 24px internal padding."
- "Style a navigation bar with a white background and 14px Poppins 400 links in black."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Form input styles (text fields, checkboxes) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://wisemotions.com | Desktop 1440px | 2026-06-06 |