# Tapclap Design System

> High-contrast white typography on vibrant sky-blue canvases anchored by ultra-rounded 55px containers.

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

## TL;DR
Tapclap utilizes a high-energy, monochrome-adjacent palette where pure white (`#ffffff`) text and borders dominate a saturated sky-blue (`#11a9e6`) background. The system is built around the **Intro Regular** typeface, used at weight 400 for both display headers and interactive labels, creating a friendly, accessible gaming aesthetic. Geometry is defined by extreme softness, specifically a **55px border radius** on primary content cards and panels. Layouts are vertically oriented with generous spacing, utilizing 2px white borders to separate game-specific artwork from the brand's primary blue surface.

## Signature DNA
1. **The 55px Radius** (Extreme rounded corners applied to all primary game cards and content panels to maintain a "bubbly" gaming aesthetic).
2. **Achromatic Typography on Saturated Backgrounds** (White `#ffffff` is the exclusive color for all text, borders, and buttons, relying on the background `#11a9e6` for brand recognition).
3. **Intro Regular Display** (The use of a geometric sans-serif at 29px for banners and 24px for interactive elements, maintaining a consistent weight of 400 across all hierarchies).

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

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary text, borders, and button labels | 30 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.brand.primary}` | `#11a9e6` | Main page background and card surface | 6 | 0.6 | computed_style |

### Semantic
*Not captured in source.*

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Intro Regular | 400, 700 | Heading, UI, Body | Montserrat | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.lg}` | 29px | 32px | normal | 400 | Banner headings | `section.banner` |
| `{type.heading.md}` | 24px | 26.4px | normal | 400 | Game description text | `p.games-item__content-text` |
| `{type.action.md}` | 24px | 31.2px | normal | 400 | Button labels | `a.games-item__content-button` |
| `{type.body.md}` | 16px | 1.5 | normal | 400 | Default body | (Inferred from standard scale) |
| `{type.caption}` | 14px | 1.4 | normal | 400 | Small labels | (Inferred from standard scale) |

### Principles
1. **Weight Consistency:** Headlines and buttons share the 400 weight; emphasis is achieved through size (29px vs 24px) rather than weight shifts.
2. **High Contrast:** All text must be `#ffffff` when placed on the primary blue background.
3. **Geometric Clarity:** The Intro font family provides a clean, rounded feel that complements the 55px corner radii.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 12px | 6 |
| `{space.hero}` | 336px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Page-level containers | 18 occurrences |
| `{radius.panel}` | 55px | Game cards, content sections | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | All cards and buttons | `shadow: none` in component spec |

## Components
### Tier 1: Foundational
#### Game Card
**Role:** Primary container for game features and descriptions.
**Pages observed:** https://tapclap.com
**Spec:** 
- Background: `#11a9e6`
- Text: `#ffffff`
- Border: 2px solid `#ffffff`
- Radius: `55px`
- Typography: Intro Regular 24px/29px

### Tier 2: Patterns
#### Play Button
**Role:** Primary call to action for games.
**Pages observed:** https://tapclap.com
**Spec:**
- Background: Green gradient (visual only, hex not tokenized)
- Text: `#ffffff`
- Radius: Pill (9999px)
- Typography: Intro Regular 24px

### Tier 3: Surface-specific
*Not captured in source.*

## Layout
| Property | Value |
|----------|-------|
| Page max-width | 1440px (Desktop) |
| Content alignment | Centered |
| Section rhythm | Vertical stack with bubble motifs |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Single column stack, font sizes remain consistent |

## Imagery & decoration
- **Bubble Motifs:** Translucent white circles used as background decoration on the blue canvas.
- **Brush-stroke Banners:** "Our games" and "Contacts" headers use a textured, hand-painted white background effect.
- **Character Art:** High-fidelity 3D/2D game characters overlap container boundaries to create depth.

## Do's
- Use `#ffffff` for all typography on blue backgrounds.
- Apply `55px` border radius to all main content cards.
- Use **Intro Regular** for all headings and interactive labels.
- Maintain a 2px white border on primary game containers.
- Ensure game characters "break" the container bounds for visual interest.

## Don'ts
- **Wrong:** Using black text on the blue background. **Right:** Always use `#ffffff`. **Reason:** Accessibility and brand consistency.
- **Wrong:** Using sharp corners for content cards. **Right:** Use `55px` radius. **Reason:** The brand identity is defined by "soft" geometry.
- **Wrong:** Introducing sub-brand colors (like game-specific reds or greens) into the global navigation or footer.
- Do not use drop shadows on primary UI cards.
- Do not use condensed or serif typefaces for UI labels.

## Similar brands
- Playrix
- King
- Supercell
- Zynga

## Quick start

### CSS Custom Properties
```css
:root {
  --tapclap-blue: #11a9e6;
  --tapclap-white: #ffffff;
  --tapclap-radius-panel: 55px;
  --tapclap-font-main: "Intro Regular", sans-serif;
  --tapclap-border-width: 2px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-brand-primary: #11a9e6;
  --color-brand-white: #ffffff;
  --radius-panel: 55px;
  --font-intro: "Intro Regular";
}
```

## Agent prompt examples
- "Create a content card using `#11a9e6` background, a 2px `#ffffff` border, and a `55px` border radius."
- "Style a header using **Intro Regular** at 29px in pure white."
- "Generate a vertical layout with game cards that have overlapping character illustrations and white bubble background decorations."

## Known gaps
- Hover and Active states for buttons were not captured in the static evidence.
- Semantic colors (Success/Error) were not present on the landing page.
- Specific hex codes for the green "Play Game" button gradient were not provided in the token set.

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