# Lacupulamusic Design System

> High-contrast digital distribution interface pairing ultra-lightweight display typography with a singular high-voltage orange accent.

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

## TL;DR
Lacupulamusic utilizes a high-contrast monochrome foundation of deep charcoal (#1d1d1b) and pure white (#ffffff), punctuated by a single primary brand color: a vibrant orange (#fa5326). The typographic system is built on Montserrat for structural elements and Open Sans for utility, characterized by an extreme weight range—from the signature weight 100 display headers to heavy weight 900 section titles. UI geometry is predominantly sharp (0px), though interactive elements like primary CTAs adopt a full pill radius (200px) to distinguish action from structure.

## Signature DNA
1. **The Weight 100 Display** (Montserrat at weight 100 is used for hero "La Cupula" text, creating a delicate, architectural contrast against the heavy weight 900 brand name, observed on the homepage and about pages).
2. **High-Voltage Orange Punctuation** (#fa5326 is the exclusive chromatic signal, used for primary buttons, active text states, and the "Cupula" wordmark to draw immediate focus on a grayscale canvas).
3. **Pill-to-Sharp Contrast** (Primary CTAs use a 200px "stadium" radius, while content cards and the global navigation remain strictly sharp at 0px, creating a clear hierarchy between "container" and "action").

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary page background and card surfaces | 43 | 0.8 | Computed Style |
| `{color.ink.primary}` | `#333333` | Primary body text and icons | 121 | 0.8 | Computed Style |
| `{color.ink.deep}` | `#1d1d1b` | Dark section backgrounds and high-emphasis text | 22 | 0.8 | Computed Style |
| `{color.ink.muted}` | `#777169` | Secondary text, footer links, and breadcrumbs | 12 | 0.8 | Computed Style |
| `{color.surface.neutral}` | `#272727` | Navigation bar background | 3 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.brand.primary}` | `#fa5326` | Primary CTAs, active links, and brand wordmark | 39 | 0.8 | Computed Style |

### Semantic
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.semantic.error}` | Not captured | Error states (404 page uses standard brand orange) | - | - | - |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 100, 600, 700, 900 | Headlines, Display, Buttons | Montserrat (Google Fonts) | OFL |
| Open Sans | 100, 300, 400, 700 | Body, Navigation, Inputs | Open Sans (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.display.mega}` | 70px | 77px | normal | 100 | Hero display text | `span:nth-of-type(1)` |
| `{text.display.lg}` | 63px | 69.3px | normal | 900 | Primary Hero H1 | `h1` |
| `{text.h2}` | 30px | 33px | normal | 900 | Section headers | `h2` |
| `{text.h3}` | 28px | 30.8px | normal | 900 | Secondary headers | `h1` (sub-page) |
| `{text.h4}` | 20px | 28.5px | normal | 600 | Feature descriptions | `p:nth-of-type(1)` |
| `{text.body.lg}` | 18px | 25.7px | normal | 300 | Lead paragraphs | `p` |
| `{text.body.md}` | 16px | 20px | normal | 700 | UI Labels / Cart | `a#cart-button` |
| `{text.body.sm}` | 14px | 20px | normal | 400 | Navigation / Footer | `header#navbar-main` |
| `{text.caption}` | 12px | 18px | normal | 400 | Small button labels | `a.btn.btn-primary` |

### Principles
1. **Extreme Weight Contrast:** Pair weight 100 with weight 900 in the same visual block to create brand tension.
2. **Montserrat for Impact:** Use Montserrat exclusively for text that functions as a graphic element (headers, buttons).
3. **Open Sans for Utility:** Use Open Sans for all functional text, including navigation, inputs, and long-form body copy.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 10px | 38 |
| `{space.sm}` | 16px | 19 |
| `{space.md}` | 20px | 31 |
| `{space.lg}` | 30px | 6 |
| `{space.xl}` | 50px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Global navigation, cards, footer | Navigation component |
| `{radius.sm}` | 4px | Secondary buttons, small inputs | Rounded Button (Tier 2) |
| `{radius.md}` | 6px | Pricing cards, text inputs | Card / Text Input |
| `{radius.pill}` | 200px | Primary "Distribute" CTAs | Rounded Button (Tier 1) |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.07) 0px 10px 50px 0px` | Feature cards on homepage | Card (observed_once) |
| `{shadow.input}` | `rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset` | Form fields | Text Input |

## Components

### Tier 1: Foundational

#### Primary Pill Button
**Role:** Main call-to-action (e.g., "Distribute your music")
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `#fa5326` | Text: `#ffffff` | Border: `1px solid #fa5326` | Radius: `200px` | Padding: `5px 15px` | Typography: `Montserrat 12px`
**States observed:** Default | Hover: Not captured | Active: Captured

#### Global Navigation
**Role:** Main site header
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `#272727` | Text: `#ffffff` | Radius: `0px` | Font Size: `14px` (Open Sans)
**States observed:** Default | Active: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Service category display
**Pages observed:** Pricing, About
**Spec:** Background: `#eeeeee` | Text: `#333333` | Radius: `6px` | Padding: `40px 60px`
**States observed:** Default | Hover: Not captured

#### Text Input
**Role:** Search and form fields
**Pages observed:** Pricing, About
**Spec:** Background: `#ffffff` | Text: `#555555` | Border: `1px solid #cccccc` | Radius: `6px` | Shadow: `{shadow.input}`
**States observed:** Default | Focus: Not captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site map and social links
**Pages observed:** Homepage, Pricing, About
**Spec:** Background: `#ffffff` | Text: `#333333` | Border-top: `1px solid #eeeeee` | Padding: `50px 0px 0px`
**States observed:** Default

#### Social Icon Link
**Role:** Social media connectivity
**Pages observed:** Homepage, About
**Spec:** Background: `transparent` | Text: `#1d1d1b` | Typography: `Open Sans 22px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1170px (standard bootstrap container) |
| Section Gutter | 50px |
| Card Grid | 3-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; Hero text stacks; Cards stack 1-up |
| Desktop | 1440px | 3-up card layout; Horizontal top-nav visible |

## Imagery & decoration
The brand uses high-contrast, desaturated photography (often black and white or low-exposure) as hero backgrounds to allow the orange `#fa5326` elements to pop. It avoids complex gradients, relying on flat color blocks and sharp lines.

## Do's
- Use Montserrat Weight 100 for large-scale display text.
- Apply `#fa5326` only to primary actions and active states.
- Maintain a 0px radius for all structural containers and navigation.
- Use `#ffffff` for card surfaces to ensure maximum contrast against `#333333` text.
- Ensure all primary buttons use the `{radius.pill}` (200px) token.

## Don'ts
- **Wrong:** Using `#fa5326` for large background sections. **Right:** Use `#1d1d1b` or `#ffffff`. **Reason:** Orange is a signal color, not a surface color.
- **Wrong:** Applying rounded corners to the main navigation bar. **Right:** Keep it at 0px. **Reason:** Preserves the architectural, sharp-edged brand feel.
- **Wrong:** Using Montserrat for long-form body copy. **Right:** Use Open Sans. **Reason:** Montserrat's geometric nature is less legible at small sizes than Open Sans.
- Do not use shadows on primary buttons; they should remain flat.
- Do not mix the weight 100 display style with weight 400; always jump to weight 700 or 900 for contrast.

## Similar brands
- DistroKid (High-contrast utility)
- SoundCloud (Orange-on-dark primary signal)
- Ableton (Geometric, sharp-edged musical tool aesthetic)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-brand-primary: #fa5326;
  --color-canvas: #ffffff;
  --color-ink-primary: #333333;
  --color-ink-deep: #1d1d1b;
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-pill: 200px;
  --radius-card: 6px;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-primary: #fa5326;
  --color-surface: #ffffff;
  --color-text-main: #333333;
  --font-montserrat: "Montserrat";
  --font-opensans: "Open Sans";
  --radius-pill: 200px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Montserrat 12px, a pill radius of 200px, and a background color of #fa5326."
- "Design a hero section with a background image, featuring the text 'La' in Montserrat weight 100 and 'Cupula' in Montserrat weight 900 using color #fa5326."
- "Generate a service card with a #eeeeee background, 6px border radius, and 40px padding."

## Known gaps
- Hover and focus states for buttons and inputs were not explicitly captured in the source evidence.
- Error and success messaging colors were not observed in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://lacupulamusic.com | 1440px | 2026-06-06 |
| Pricing | https://lacupulamusic.com/pricing | 1440px | 2026-06-06 |
| About | https://lacupulamusic.com/about | 1440px | 2026-06-06 |