# Wipadika Design System

> Deep charcoal canvases holding high-contrast white cards connected by vertical dotted logic.

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

## TL;DR
Wipadika utilizes a "monochrome-plus" approach where a deep, desaturated navy-charcoal floor (`#2f3340`) serves as the primary environment. Content is elevated via stark white (`#ffffff`) or slightly lighter charcoal (`#3e4352`) cards, all featuring a consistent 17px corner radius. Typography is a deliberate mix of the classical **Times New Roman** for primary headings and the functional **Inter** for technical labels and wide-tracked subheads. The visual signature is a vertical timeline-style dotted path that anchors the scroll, connecting disparate content blocks into a single narrative thread.

## Signature DNA
1. **The Dotted Conduit** (A vertical, centered dotted line that physically connects every major surface block, creating a rigid structural spine across the homepage).
2. **Classical-Modern Hybrid Type** (The use of Times New Roman at large scales (33px) for primary headings paired with Inter at 13px with extreme 4.33px letter-spacing for labels).
3. **Soft-Square Elevation** (A consistent 17px border radius applied to all content containers, regardless of whether they are dark-on-dark or light-on-dark).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#2f3340` | Primary page background | 3 | 0.6 | Computed Style |
| `{color.ink}` | `#000000` | Primary text | 22 | 0.8 | Computed Style |
| `{color.surface}` | `#ffffff` | High-contrast card background | 5 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.surface.muted}` | `#3e4352` | Low-contrast card background | 6 | 0.6 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Times New Roman | 400 | Headings, Body | N/A (System) | System |
| Inter | 400, 700 | Labels, Technical body | Inter (Google Fonts) | OFL |
| Poppins | 700 | Brand headings | Poppins (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.h1}` | 33px | 32.5px | normal | 400 | Main headings | `li` |
| `{type.h2}` | 26px | 26px | normal | 400 | Section links | `a.n01` |
| `{type.body}` | 17px | 17.3px | normal | 400 | Wrapper text | `div.wrapper` |
| `{type.body.inter}` | 17px | 32.5px | normal | 400 | Paragraph text | `p#text16` |
| `{type.label.caps}` | 13px | 69.3px | 4.33px | 700 | Navigation/Labels | `a.n01` |
| `{type.frame}` | 17px | 0px | normal | 400 | Frame annotations | `span.frame` |

### Principles
1. **Serif for Authority:** Times New Roman is used for the largest display text, rejecting the standard SaaS sans-serif trend.
2. **Extreme Tracking:** Small labels (13px) use high letter-spacing (4.33px) to create a "stamp" or "architectural" feel.
3. **Tight Leading:** Large headings often have line-heights equal to or slightly less than the font size (e.g., 33px size / 32.5px height).

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.md}` | 52px | 5 |
| `{space.lg}` | 69px | 3 |
| `{space.xl}` | 277px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Sharp edges | 6 occurrences |
| `{radius.card}` | 17px | Content containers | 13 occurrences |
| `{radius.pill}` | 100px | UI Panels / Buttons | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All cards use flat background fills without shadows | Component evidence |

## Components

### Tier 1: Foundational

#### Surface Container
**Role:** Base layout block for content sections.
**Pages observed:** https://wipadika.com
**Spec:** Background: `transparent` | Radius: `17px` | Padding: `52px` | Typography: `Times New Roman`
**States observed:** Default: captured | Others: not captured

### Tier 2: Patterns

#### Dotted Spine
**Role:** Vertical connector between sections.
**Pages observed:** https://wipadika.com
**Spec:** Border: `dotted` | Color: `#ffffff` (low opacity observed in screenshots) | Width: `2px`

### Tier 3: Surface-specific

#### Content Card (High Contrast)
**Role:** Primary information display.
**Pages observed:** https://wipadika.com
**Spec:** Background: `#ffffff` | Text: `#000000` | Radius: `17px` | Typography: `17.3px Times New Roman`
**States observed:** Default: captured

#### Content Card (Muted)
**Role:** Secondary or background-integrated display.
**Pages observed:** https://wipadika.com
**Spec:** Background: `#3e4352` | Text: `#000000` | Radius: `100%` (Circular variant) or `17px`
**States observed:** Default: captured

#### Dark Feature Block
**Role:** Hero or emphasized section background.
**Pages observed:** https://wipadika.com
**Spec:** Background: `#2f3340` | Radius: `17px` | Padding: `69px 52px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Width | Not captured (centered vertical flow) |
| Section Gap | 277px (vertical spacing between blocks) |

## Responsive
Table: | Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Padding reduces to 52px; vertical spine remains centered. |

## Imagery & decoration
Wipadika uses high-contrast, black-and-white line art (e.g., lightbulb illustrations) within white cards. It avoids photography and complex gradients, relying on geometric shapes and the vertical dotted line for visual interest.

## Do's
- Use **Times New Roman** for all primary narrative headings.
- Maintain a **17px border radius** on all content containers.
- Connect vertical sections with a **centered dotted line**.
- Use **#2f3340** as the primary background for the page canvas.
- Apply **4.33px letter-spacing** to Inter 700 labels.

## Don'ts
- **Don't** use shadows; the system relies on flat color fills for hierarchy.
- **Don't** use saturated primary colors; the brand is strictly monochrome/achromatic.
- **Don't** use sans-serif for display headings.
- **Wrong:** Using a bright blue for a CTA. **Right:** Using a white card with black text. **Reason:** Wipadika is a monochrome system; color is reserved for the logo mark only.

## Similar brands
- **The New York Times** (Typography-first, serif-heavy)
- **Linear** (Dark mode, high-contrast surfaces, subtle line work)
- **Standard Projects** (Minimalist, grid-focused, system-font usage)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-canvas: #2f3340;
  --color-surface-muted: #3e4352;
  --color-surface-white: #ffffff;
  --color-ink: #000000;
  
  --font-display: "Times New Roman", serif;
  --font-ui: "Inter", sans-serif;
  
  --radius-card: 17px;
  --spacing-section: 277px;
}
```

## Agent prompt examples
- "Create a content card using a white background, 17px border radius, and Times New Roman text at 17px."
- "Design a section header with 'Since 2012' in Times New Roman 33px, centered over a vertical dotted line."
- "Generate a label using Inter Bold at 13px with 4.3px letter spacing in all caps."

## Known gaps
- Hover states for links were not explicitly captured in the token evidence.
- Mobile-specific font scaling was not provided in the typography scale.
- Button components (filled/outline) were not present in the analyzed component list.

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