# Buzz Usborne — Style Reference
> Clean slate, playful voice
**Theme:** light
Buzz Usborne's design system presents as a clean, spacious canvas with a playful, yet strong typographic voice. The visual identity relies on a dominant dark gray for text and primary interactive elements, accented by a single vivid violet for subtle button detailing, creating a sense of understated vibrancy. Component surfaces and backgrounds are kept pristine white, emphasizing content and a lightweight feel. Overall, the system projects an approachable, content-focused atmosphere, leaning on personality in typography rather than complex color schemes or heavy ornamentation.
## Tokens — Colors
| Name | Value | Token | Role |
|------|-------|-------|------|
| Canvas White | `#ffffff` | `--color-canvas-white` | Page backgrounds, card surfaces, ghost button backgrounds |
| Graphite Ink | `#2a394e` | `--color-graphite-ink` | Primary text across headings and body, accent for selected interactive elements, primary button fills |
| Muted Midnight | `#14243c` | `--color-muted-midnight` | Secondary text for body content, text on filled primary buttons |
| Vivid Violet | `#4700d8` | `--color-vivid-violet` | Outlined button borders, subtle interactive accents |
## Tokens — Typography
### Poetsen One — Display headlines and primary section titles — gives a distinctive, friendly, and bold presence to key statements, ensuring immediate personality. · `--font-poetsen-one`
- **Substitute:** Bebas Neue
- **Weights:** 400
- **Sizes:** 52px
- **Line height:** 1.15
- **Role:** Display headlines and primary section titles — gives a distinctive, friendly, and bold presence to key statements, ensuring immediate personality.
### Roboto — Body copy, navigation, buttons, and supplemental text — a highly legible sans-serif for all functional and supportive text, providing a reliable baseline. · `--font-roboto`
- **Substitute:** Open Sans
- **Weights:** 400, 500
- **Sizes:** 13px, 14px, 15px, 16px, 22px
- **Line height:** 1.00, 1.71, 1.87, 2.09
- **Role:** Body copy, navigation, buttons, and supplemental text — a highly legible sans-serif for all functional and supportive text, providing a reliable baseline.
### Type Scale
| Role | Size | Line Height | Letter Spacing | Token |
|------|------|-------------|----------------|-------|
| body-lg | 16px | 1.87 | — | `--text-body-lg` |
| subheading | 22px | 1 | — | `--text-subheading` |
| display | 52px | 1.15 | — | `--text-display` |
## Tokens — Spacing & Shapes
**Density:** spacious
### Spacing Scale
| Name | Value | Token |
|------|-------|-------|
| 10 | 10px | `--spacing-10` |
| 15 | 15px | `--spacing-15` |
| 20 | 20px | `--spacing-20` |
| 25 | 25px | `--spacing-25` |
| 30 | 30px | `--spacing-30` |
| 50 | 50px | `--spacing-50` |
| 100 | 100px | `--spacing-100` |
| 150 | 150px | `--spacing-150` |
### Border Radius
| Element | Value |
|---------|-------|
| other | 20px |
| images | 20px |
| buttons | 30px |
### Layout
- **Section gap:** 50px
- **Card padding:** 25px
- **Element gap:** 10px
## Components
### Primary Filled Button
**Role:** Call to action button
Filled with Graphite Ink background (#2a394e), Muted Midnight text (#14243c), and a generous 30px border radius. Padding of 15px vertical and 25px horizontal creates ample touch targets and a soft, approachable pill shape.
### Ghost Header Button
**Role:** Navigation menu button
Appears as a simple 'Menu' icon with a transparent background, implicitly using Canvas White (#ffffff) as its background. No visible border, text color defaults to browser standard for links before hovering/interaction.
## Do's and Don'ts
### Do
- Prioritize Canvas White (#ffffff) for all large background areas and card surfaces, creating a clean base.
- Use Graphite Ink (#2a394e) for all primary headline and body text, establishing a strong, readable dark neutral.
- Apply Poetsen One at 52px, weight 400, for section headlines or hero text to introduce branding personality.
- For interactive elements, use the 30px border-radius, creating a consistent pill shape for buttons.
- Maintain a spacious environment, utilizing 50px as the primary vertical separation between major sections.
- For primary call-to-action buttons, use a Graphite Ink (#2a394e) fill with Muted Midnight (#14243c) text, with 15px vertical and 25px horizontal padding, and 30px radius.
### Don't
- Avoid using multiple vibrant chromatic colors; restrict accent colors primarily to Vivid Violet (#4700d8) for subtle highlights.
- Do not deviate from Roboto for body text and functional UI elements where immediate readability is key.
- Avoid tight element groupings; ensure a minimum of 10px spacing between elements to preserve visual breathability.
- Do not introduce complex shadows or excessive borders; surfaces should feel lightweight and minimally elevated.
- Refrain from using strong background patterns or textures; surfaces are intended to be clean and understated.
## Imagery
This system primarily uses product screenshots and illustrative emojis rather than traditional photography. Product screenshots are contained within soft-rectangular cards with 20px radius. Emojis are used directly within heading text, adding a playful, approachable, and personalized tone to the communication. Icons are minimal, likely linear or mono-color, serving purely functional roles like the 'Menu' button.
## Layout
The page maintains a centered max-width layout, approximately 950-1000px wide, creating clear content boundaries on a Canvas White background. The hero section is a centered stack of a playful headline over a contained product image. Vertical rhythm is established through consistent 50px section gaps and ample side padding of 150px or more on text blocks. Content often appears in single-column stacks, emphasizing direct communication rather than complex multi-column grids or visual fragmentation. Navigation is minimal, consisting of a sticky top header with a brand logo and a simple 'Menu' button.
## Agent Prompt Guide
### Quick Color Reference
- text: #2a394e
- background: #ffffff
- border: no distinct border color
- accent: #4700d8
- primary action: #2a394e (outlined action border)
### 3-5 Example Component Prompts
- Create a hero section with a centered headline: 'I’m Buzz 🫶 a Principal Designer' using Poetsen One at 52px, weight 400, color #2a394e. Below it, add a section description in Roboto at 16px, weight 400, color #2a394e. Ensure generous vertical spacing (50px).
- Create an Outlined Primary Action: Transparent background, #2a394e border and text, 9999px radius, compact pill padding. Use it for the main CTA instead of a filled button.
- Construct a header navigation bar: Use Canvas White (#ffffff) background. On the left, place a brand logo (text 'Buzz Usborne' in a custom font, color #2a394e). On the right, include a 'Menu' ghost button (no background fill or border, text in #14243c; apply 20px padding).
- Lay out a product feature card: Use Canvas White (#ffffff) background, 20px border-radius, 25px padding. Include a product screenshot with 20px corner radius.
## Similar Brands
- **Figma** — Clean, predominantly white canvas with a focus on clear typography and functional, rather than decorative, color accents.
- **Linear** — Emphasis on well-defined typography and generous white space to present complex information clearly, with minimal chromatic distraction.
- **Miro** — Utilizes a crisp, light background and distinct typefaces to convey information, with a constrained color palette for interactivity.
- **Notion** — Content-first approach, with typography and white space forming the primary visual hierarchy, supported by a minimal color palette.
## Quick Start
### CSS Custom Properties
```css
:root {
/* Colors */
--color-canvas-white: #ffffff;
--color-graphite-ink: #2a394e;
--color-muted-midnight: #14243c;
--color-vivid-violet: #4700d8;
/* Typography — Font Families */
--font-poetsen-one: 'Poetsen One', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body-lg: 16px;
--leading-body-lg: 1.87;
--text-subheading: 22px;
--leading-subheading: 1;
--text-display: 52px;
--leading-display: 1.15;
/* Typography — Weights */
--font-weight-regular: 400;
--font-weight-medium: 500;
/* Spacing */
--spacing-10: 10px;
--spacing-15: 15px;
--spacing-20: 20px;
--spacing-25: 25px;
--spacing-30: 30px;
--spacing-50: 50px;
--spacing-100: 100px;
--spacing-150: 150px;
/* Layout */
--section-gap: 50px;
--card-padding: 25px;
--element-gap: 10px;
/* Border Radius */
--radius-2xl: 20px;
--radius-3xl: 30px;
/* Named Radii */
--radius-other: 20px;
--radius-images: 20px;
--radius-buttons: 30px;
}
```
### Tailwind v4
```css
@theme {
/* Colors */
--color-canvas-white: #ffffff;
--color-graphite-ink: #2a394e;
--color-muted-midnight: #14243c;
--color-vivid-violet: #4700d8;
/* Typography */
--font-poetsen-one: 'Poetsen One', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
--font-roboto: 'Roboto', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
/* Typography — Scale */
--text-body-lg: 16px;
--leading-body-lg: 1.87;
--text-subheading: 22px;
--leading-subheading: 1;
--text-display: 52px;
--leading-display: 1.15;
/* Spacing */
--spacing-10: 10px;
--spacing-15: 15px;
--spacing-20: 20px;
--spacing-25: 25px;
--spacing-30: 30px;
--spacing-50: 50px;
--spacing-100: 100px;
--spacing-150: 150px;
/* Border Radius */
--radius-2xl: 20px;
--radius-3xl: 30px;
}
```
Architectural blueprint on white…
High-contrast precision blueprint.
Gallery Wall Precision

Architectural Digital Canvas. A…
Expansive sky, clean canvas.

Crisp paper on a clean desk. A…

Grape Soda & Lemon Zest. A bold…
Architectural blueprint on white…

organized desktop, clean and bright
Artisanal precision on a calm…

Frosted glass on crisp canvas

Crisp canvas, gradient fireworks.…
Clean blueprint with friendly…
Yellow-green spotlight on warm…
Vibrant whiteboard sketch. Bright…
Digital Sandbox with Soft…
Warm, Crisp Canvas
White canvas, crisp black ink

High-contrast research tool; like…
etched digital blueprint