# Cantierecreativo Design System

> High-contrast monochrome foundation punctuated by a high-voltage electric violet and fluid, organic geometry.

**Source:** https://cantierecreativo.net | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Cantierecreativo utilizes a stark white canvas (`#ffffff`) as its primary floor, establishing a clean, professional environment for its bold typographic system. The brand identity is anchored by a singular, high-saturation accent color, Electric Violet (`#5251f5`), which is applied to primary CTAs, active states, and large-scale organic background shapes. Typography is a sophisticated pairing of **BasicSans** for high-impact, semi-bold display headings and **Geist** for functional, legible body copy and UI labels. The system favors generous vertical spacing (up to 158px) and soft, large-scale radii (up to 24px) for cards and panels, contrasting with sharp 0px edges on foundational surface elements.

## Signature DNA
1. **Electric Violet Floods** (The use of `#5251f5` as a full-bleed surface background and organic "blob" shapes creates a high-energy digital atmosphere. Observed on Homepage and About pages.)
2. **BasicSans Display Hierarchy** (Heavy-weight display type at 76px and 60px with semi-bold 600 weight defines the brand's editorial authority. Observed across all analyzed pages.)
3. **Organic vs. Geometric Contrast** (The juxtaposition of 9999px pill buttons and 24px rounded cards against sharp 0px surface borders. Observed on Homepage.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.canvas}` | `#ffffff` | Primary background, text on dark surfaces, and ring offsets | 90 | 1.0 | computed_style |
| `{colors.ink}` | `#222121` | Primary body text and headings on light surfaces | 106 | 0.8 | computed_style |
| `{colors.border-muted}` | `#b7b7b7` | Subtle 1px borders for surface separation | 16 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#5251f5` | Primary CTA background, active borders, and brand shapes | 15 | 0.8 | resolved_primary |
| `{colors.surface-dark}` | `#1f2937` | Dark mode section backgrounds (footer/hero) | 8 | 0.6 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| BasicSans | 600 | Display and Headings | Montserrat (Semi-Bold) | Proprietary |
| Geist | 400 | Body, UI, and Subheadings | Inter | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display-mega}` | 76px | 82px | normal | 600 | Hero display | `span.font-bold.italic` |
| `{text.display-xl}` | 60px | 64px | normal | 600 | Section headers | `h2.xl:text-5xl` |
| `{text.heading-lg}` | 39px | 47px | normal | 600 | Subsection titles | `h2.mb-4.text-2xl` |
| `{text.heading-md}` | 30px | 36px | normal | 600 | Card titles | `h2.text-xl.font-bold` |
| `{text.heading-sm}` | 25px | 35px | normal | 600 | Small headings | `h2.text-2xl.lg:text-xl` |
| `{text.body-lg}` | 20px | 30px | normal | 400 | Lead paragraphs | `p` |
| `{text.body-md}` | 16px | 24px | normal | 400 | Default body | `header.relative` |
| `{text.label-caps}` | 16px | 24px | normal | 600 | Uppercase badges | `span.uppercase.font-bold` |

### Principles
1. **Display weight is fixed at 600.** BasicSans is never used in light or regular weights for headings.
2. **Geist for utility.** All functional UI, including navigation and body text, uses Geist at 400 weight.
3. **Generous Leading.** Line heights consistently maintain a 1.2x to 1.5x ratio relative to font size for readability.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 7 |
| `{space.sm}` | 16px | 13 |
| `{space.md}` | 24px | 15 |
| `{space.lg}` | 32px | 3 |
| `{space.section}` | 128px | 9 |
| `{space.hero}` | 158px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Foundational surfaces and sections | 150 occurrences |
| `{radius.md}` | 12px | Form controls and small surfaces | 7 occurrences |
| `{radius.lg}` | 16px | Content cards | 8 occurrences |
| `{radius.xl}` | 24px | Feature panels and large cards | 12 occurrences |
| `{radius.pill}` | 9999px | CTA buttons and badges | 8 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | none | All observed cards and surfaces | 100% of components |

## Components
### Tier 1: Foundational
#### Pill / Badge
**Role:** Primary CTA and status indicators.
**Pages observed:** Homepage, About.
**Spec:** Background: transparent / Text: `#ffffff` / Border: 1px `#5251f5` / Radius: 9999px / Padding: 8px 20px / Typography: 16px Geist.
**States observed:** Default | Hover: captured.

### Tier 2: Patterns
#### Feature Card
**Role:** Highlighting services or case studies.
**Pages observed:** Homepage.
**Spec:** Background: `rgba(82, 81, 245, 0.2)` / Text: `#ffffff` / Border: 1px `rgba(255, 255, 255, 0.3)` / Radius: 24px / Padding: 24px.
**States observed:** Default: captured.

#### Content Surface (Muted)
**Role:** Secondary content grouping.
**Pages observed:** Homepage.
**Spec:** Background: `rgba(31, 41, 55, 0.5)` / Text: `#222121` / Border: 0px / Radius: 0px / Padding: 0px.
**States observed:** Default: captured.

### Tier 3: Surface-specific
#### Navigation Header
**Role:** Global site navigation.
**Pages observed:** Homepage, About, Pricing.
**Spec:** Background: `#ffffff` / Text: `#222121` / Border: 0px / Radius: 0px / Padding: 32px 24px.
**States observed:** Default: captured.

#### Bordered Section
**Role:** Structural layout dividers.
**Pages observed:** Homepage.
**Spec:** Background: transparent / Text: `#222121` / Border: 1px `#b7b7b7` / Radius: 0px.
**States observed:** Default: captured.

#### Rounded Panel
**Role:** Container for grouped information.
**Pages observed:** About.
**Spec:** Background: transparent / Text: `#222121` / Border: 0px / Radius: 24px.
**States observed:** Default: captured.

## Layout
| Property | Value |
|---|---|
| Max content width | 1280px (approx) |
| Section Padding (Vertical) | 128px - 158px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; padding reduces to 16px. |
| Desktop | 1440px | Multi-column grids (2-up or 3-up) for cards. |

## Imagery & decoration
- **Organic Blobs:** Large, fluid vector shapes in `#5251f5` used as background depth.
- **Sunburst Icons:** Geometric line-art sunbursts used as section accents.
- **Avoids:** Drop shadows, heavy gradients, and complex textures.

## Do's
- Use `#5251f5` for all primary interactive elements.
- Maintain a 128px minimum vertical gap between major content sections.
- Apply `9999px` radius to all buttons.
- Use BasicSans 600 for all headlines above 24px.
- Keep backgrounds strictly `#ffffff` or Electric Violet floods.

## Don'ts
- **Wrong:** Using `#3b82f6` (Tailwind Blue) as a primary brand color. **Right:** Use `#5251f5`. **Reason:** `#3b82f6` is a system default token, not the brand primary.
- Do not apply border-radius to the main site header or footer.
- Do not use Geist for display headings.
- Do not use drop shadows on cards; use 1px borders for definition.
- Do not use BasicSans for body copy.

## Similar brands
- Vercel (monochrome foundation, Geist typography)
- Linear (high-contrast UI, precise geometry)
- Framer (fluid organic shapes, bold typography)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #5251f5;
  --color-canvas: #ffffff;
  --color-ink: #222121;
  --color-border-muted: #b7b7b7;
  --font-display: "BasicSans", sans-serif;
  --font-body: "Geist", sans-serif;
  --radius-pill: 9999px;
  --radius-card: 16px;
  --radius-panel: 24px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #5251f5;
  --color-ink: #222121;
  --font-display: "BasicSans";
  --font-body: "Geist";
  --radius-xl: 24px;
  --spacing-section: 128px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Cantierecreativo style: Electric Violet background, white text, pill-shaped with 9999px radius, and 16px Geist font."
- "Design a feature card with a 24px corner radius, a 1px white border at 30% opacity, and a semi-transparent Electric Violet background."
- "Generate a section header using BasicSans at 60px size, 600 weight, with a 64px line height."

## Known gaps
- Hover and active states for secondary buttons were not captured in the analyzed pages.
- Semantic colors (Success/Error) were not present in the marketing site flow.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Page | https://cantierecreativo.net | 1440px | 2026-06-06 |
| About Page | https://cantierecreativo.net/about | 1440px | 2026-06-06 |
| Mobile View | https://cantierecreativo.net | 390px | 2026-06-06 |