---
title: "Superlocal design system"
variant: extended
source: https://www.superlocaldesign.com/
captured_at: 2026-10-12
theme: light
industry: design
generator: Design DNA (https://four.wiralomi.com/style/superlocaldesign-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Superlocal · Design System

> A playful festival identity built from dots, motion, and vivid bands.

**Theme:** light · **Industry:** design · **Source:** https://www.superlocaldesign.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Superlocal pairs a restrained gray canvas and near-black typography with vivid gradient bands and playful floating imagery. Its long, spacious homepage shifts from an animated festival hero to a lineup and a highly structured multi-day program.

## North star

Keep the gray canvas and dark type quiet, then use oversized dot-matrix lettering and vivid, localized color bands as the event’s expressive focal points.

## Overview

The page is anchored by a cool mid-gray canvas (#bcbcbc) and very dark brown-black text (#1a1302), creating a muted stage for the festival’s brighter moments. The hero introduces a warm orange-to-gray gradient, dotted display lettering, small circular photographs, and floating colored discs; these vivid elements belong to the artwork rather than replacing the neutral site canvas. Below the extensive quiet stretches, colorful horizontal date bands punctuate the schedule, with cyan, orange, and yellow gradients carrying oversized dates and dot-matrix day names. The sans face handles most interface and program text in bold, compact blocks, while a monospace display face gives the hero its distinctive pixel-like voice. Rounded pill navigation and registration buttons contrast with square-cornered, hairline-outlined schedule cards. The composition favors broad open space, strong typographic scale changes, and tightly organized multi-column event listings over conventional decorative cards.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Festival Gray | `#bcbcbc` | `--color-festival-gray` | surface | Dominant page canvas and schedule backdrop; the stable neutral field behind the hero and content. |
| Roasted Ink | `#1a1302` | `--color-roasted-ink` | brand | Primary text, navigation labels, dotted artwork, hairline card borders, and dark registration button backgrounds. |
| Electric Mist | `#97ebff` | `--color-electric-mist` | accent | Cyan accent for registration button text and colorful program/date treatments. |
| Mango Glow | `#ffb948` | `--color-mango-glow` | accent | Warm yellow accent used in registration buttons and gradient date bands. |
| Lilac Pop | `#dd8dff` | `--color-lilac-pop` | accent | Violet accent in gradient treatments and floating circular hero artwork. |
| Ochre Detail | `#846108` | `--color-ochre-detail` | accent | Secondary ochre gradient stop; a supporting color treatment rather than a dominant interface color. |
| Festival Tangerine | `#ff661a` | `--color-festival-tangerine` | accent | Vivid orange in hero and schedule color treatments; chiefly a graphic and gradient accent. |

### Semantic aliases

`--color-canvas` → `#bcbcbc` (Festival Gray) · `--color-text` → `#1a1302` (Roasted Ink) · `--color-border` → `#1a1302` (Roasted Ink) · `--color-accent` → `#97ebff` (Electric Mist) · `--color-accent-2` → `#ffb948` (Mango Glow) · `--color-accent-3` → `#dd8dff` (Lilac Pop)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1302` | `#bcbcbc` | 9.72:1 | AAA |
| `#97ebff` | `#bcbcbc` | 1.41:1 | fail |

### Gradients

- `radial-gradient(circle, rgb(26, 19, 2) 1.5px, rgba(0, 0, 0, 0) 2px)`
- `linear-gradient(rgb(255, 185, 72) 0px, rgb(188, 188, 188) 518px)`
- `linear-gradient(rgb(221, 141, 255) 0px, rgb(188, 188, 188) 518px)`
- `linear-gradient(rgb(132, 97, 8) 0px, rgb(188, 188, 188) 518px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| fontSans | `--font-body` | webfont | 600, 700 | Main interface, navigation, program listings, links, buttons, and supporting text. | Inter |
| fontDisplay | `--font-display` | webfont | 700 | Oversized hero lettering and dot-matrix festival/date display. | Space Mono |

- **fontSans:** Webfont sans used mostly at weight 600 or 700; compact tracking, dense bold event titles, and sentence case.
- **fontDisplay:** Bold monospace display face; use sparingly for large, pixel-like identity lettering.

### Type scale — Perfect Fifth (ratio ≈ 1.537, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 120px | 700 | 0.9 | 0 | — | fontDisplay | Oversized dotted festival identity lettering in the hero. |
| h1 | 72px | 700 | 0.95 | 0 | — | fontDisplay | Primary hero headline and prominent festival/date display. |
| h2 | 42px | 700 | 0.82 | -0.06em | — | fontSans | Major program section headings and large date labels. |
| h3 | 32px | 600 | 1.15 | -0.03em | — | fontSans | Event titles and prominent content headings. |
| h4 | 24px | 700 | 1.1 | -0.025em | — | fontSans | Secondary event names and compact card headings. |
| body | 14px | 600 | 1.2 | -0.025em | — | fontSans | Supporting event details, times, venues, and descriptions. |
| button | 16px | 600 | 1.3 | -0.06em | — | fontSans | Registration and pill navigation button labels. |
| link | 42px | 700 | 0.82 | -0.06em | — | fontSans | Large featured speaker and lineup links. |

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 5, 8, 10, 12, 16, 23, 24, 34, 48 px.
- Section rhythm 34px · element gap 8px · card padding 14px · max content width 1394px.

The measured content max width is 1394px, with the hero using a broad, open stage and the schedule switching to two- and three-column event groupings. Content aligns mostly to the start edge; the lineup is presented as a centered two-column name list. The measured spacing system uses a 4px base, compact element gaps, and generous section separation. Preserve the striking long quiet intervals visible between major content blocks instead of filling them with extra modules.

## Shape & elevation

- Radius: button `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.34s cubic-bezier(0.34, 1.3, 0.48, 1)` on interactive elements.

The interface is mostly flat: no measured shadows, with the gray canvas carrying the page. Use thin dark outlines for square-cornered schedule cards and rounded pills for navigation and registration controls. Hero circles and overlapping photographs supply the visible depth through composition rather than UI shadow.

## Imagery

The hero combines small circular photographs with floating colored discs and a field of dotted lettering. Photographs are cropped into circular windows and scattered at varied scales around the central graphic; they read as collage accents, not conventional product photography. The remaining visible page is predominantly typographic and schedule-led, with no measured inline image counts in its program sections.

## Components

### Pill navigation

Compact rounded navigation pills sit near the top of the hero; the active brand pill is dark with light text, while neighboring controls are white with dark labels.

### Registration CTA

Fully rounded dark button with accent-colored text; measured variants use cyan #97ebff or mango #ffb948.

### Dot-matrix hero lettering

Large festival wordmark and date are drawn with dotted, monospace-style marks over the hero’s gradient field.

### Floating image collage

Small circular photo crops and colored discs float at different positions and scales around the hero lettering.

### Lineup name list

Dense, bold speaker and contributor names arranged as a centered two-column list on the gray canvas.

### Program date band

Full-width horizontal day bands use vivid gradients, oversized dates, and dot-matrix day names.

### Schedule event card

Square-cornered event modules use a 1px #1a1302 border, 16px 12px padding, bold titles, and compact event details.

### Measured component styles

- **Primary button** (“Inscribirme (abre en una pestaña nueva)”): background #1a1302 · text #97ebff · radius 999px · padding 8px 10px · 600 16px fontSans
- **Secondary button** (“Lineup”): background #ffffff · text #1a1302 · radius 999px · padding 8px · 600 16px fontSans
- **Link** (“Superside”): transparent background · text #1a1302 · radius 0px · padding 0px · 700 42px fontSans
- **Card** (“Taller: Luz sobre lo expuesto Tríos x TA”): transparent background · text #1a1302 · border 1px solid #1a1302 · radius 0px · padding 16px 12px · 700 16px fontSans
- **Navigation item** (“Lineup Cronograma Packs”): transparent background · text #1a1302 · radius 0px · padding 0px 8px · 700 16px fontSans

## Do

- Keep the primary canvas close to #bcbcbc.
- Use #1a1302 for most text and thin card outlines.
- Reserve display monospace for oversized festival graphics.
- Use vivid accents in localized bands, discs, or CTA labels.
- Keep hero photography circular and collage-like.
- Structure the schedule into clearly aligned columns.

## Don't

- Do not turn the full page into a bright orange background.
- Do not use shadows to create depth on flat schedule cards.
- Do not replace the dot-matrix display voice with generic oversized sans text.
- Do not round the schedule cards; reserve pills for controls.
- Do not fill the measured quiet stretches with invented sections.
- Do not treat incidental illustration colors as the site’s main canvas.

## Agent prompt

Build a new page in Superlocal’s festival identity. Use Festival Gray (#bcbcbc) as the dominant canvas and Roasted Ink (#1a1302) for headings, links, outlines, and most interface text. Let fontSans-style bold sans handle navigation and content; reserve a bold monospace display face for oversized dot-matrix lettering. Introduce Electric Mist (#97ebff), Mango Glow (#ffb948), Lilac Pop (#dd8dff), Ochre Detail (#846108), and Festival Tangerine (#ff661a) in restrained graphic accents or horizontal gradient bands, not as a replacement canvas. Use compact rounded pills for navigation and CTAs, but square-cornered thin-outline content cards. Preserve broad open space, strong scale contrast, and tidy multi-column listings. Treat circular photos and floating discs as playful collage accents, not product imagery.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Open full-screen hero with centered floating collage and oversized dotted lettering near the lower edge. | floating image collage, festival identity | pill navigation, dot-matrix display, warm gradient |
| 2 | other | Very tall, sparse gray content stretch between the hero and later page material. | spacious scroll | plain gray canvas |
| 3 | timeline | Two-column program section with event details aligned to the start edge. | date-led browsing, event links | outlined event cards, accent CTA |
| 4 | timeline | Two-column continuation of the schedule with compact event entries. | time-based scanning, linked registration | bold event titles, thin dark borders |
| 5 | timeline | Three-column grid of event entries with start-aligned text. | parallel event comparison, time labels | square-cornered cards, bold headings |
| 6 | timeline | Three-column grid of dated workshop cards. | day-based browsing, event detail links | outlined cards, compact metadata |
| 7 | timeline | Three-column grid of workshop cards on the shared gray canvas. | scan by time, registration links | bold event titles, thin outlines |
| 8 | timeline | Three-column program grid with multiple talk entries. | time-based discovery, speaker and venue details | repeated event cards, dark text hierarchy |

## Source CSS custom properties (selected)

```css
--background: #bcbcbc;
--foreground: #1a1302;
--space-seam: 10rem;
--space-head: 6rem;
--space-block: 3rem;
--spacing-global: 1.4265rem;
--spacing-bar: 6.25rem;
--text-pill: 1rem;
--text-pill-hover: 1.72975rem;
--text-credit: .8125rem;
--text-hero-kicker: min(4.5rem, calc(6.1vw - .207rem));
--text-bar: 2rem;
--text-statement: 3.5rem;
--text-hero-body: 2rem;
--text-day: 7.5rem;
--text-day-min: 1.5rem;
--spacing-peek: 11.3125rem;
--spacing-collapse: 2.75rem;
--spacing-cab: 2.125rem;
--spacing-pad-y: 3rem;
--spacing-stack-pad: .5rem;
--spacing-medal: 17.5rem;
--spacing-card: 17.1875rem;
--spacing-coin: min(32.7678rem, 58vh);
--spacing-step: 3.5rem;
--text-name: 2.625rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/superlocaldesign-com