# Magicbus Design System

> High-contrast black ink on a pure white canvas, anchored by a legacy-web Verdana stack and sharp geometric containers.

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

## TL;DR
Magicbus utilizes a utilitarian, monochrome foundation that prioritizes high-contrast legibility. The system is built on a pure white background `#ffffff` with primary text and borders rendered in absolute black `#000000`. Typography is strictly Verdana, favoring a 17px base size for primary navigation and body content, while scaling down to 10px for dense footer metadata. Layouts are characterized by sharp 0px corners on primary containers, with occasional 8px rounding on interactive surfaces. The brand relies on a custom spacing unit (5px/15px) rather than a standard 4px or 8px grid.

## Signature DNA
1. **Verdana Ubiquity** (The system uses Verdana for all roles—display, body, and UI—relying on weight shifts [400 to 700] rather than typeface variety to establish hierarchy.)
2. **Achromatic Contrast** (A strict `#000000` on `#ffffff` palette ensures a 21:1 contrast ratio, creating a "document-first" aesthetic.)
3. **Sharp Edge Priority** (Primary layout containers use a `{rounded.sharp}` 0px radius, creating a rigid, structured frame for content.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.ink}` | `#000000` | Primary text, borders, and icons | 58 | 0.8 | computed_style |
| `{color.canvas}` | `#ffffff` | Page background and primary surfaces | 5 | 0.6 | computed_style |

### Accent
(No saturated accent colors captured in source for the parent brand layer.)

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Verdana | 400, 700 | All roles (Body, Nav, Caption) | DejaVu Sans | System Default |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.body-lg-bold}` | 17px | 25.575px | normal | 700 | Primary links / Emphasis | `a` |
| `{text.body-lg}` | 17px | 25.575px | normal | 400 | Standard navigation | `a` |
| `{text.body-container}` | 17px | 24.75px | normal | 400 | Hero/Container text | `div#top-container` |
| `{text.body-sm}` | 13px | 20.46px | normal | 400 | Secondary links | `a` |
| `{text.caption-bold}` | 12px | 18.6px | normal | 700 | Table headers / Labels | `td:nth-of-type(2)` |
| `{text.caption}` | 12px | 17.325px | normal | 400 | Bottom container text | `div#bottom-container` |
| `{text.metadata}` | 10px | 15.5px | normal | 400 | Footer legal/copyright | `p:nth-of-type(1)` |

### Principles
1. **Weight-based Hierarchy**: Differentiation between interactive and static text is handled primarily through weight (700 vs 400) at a consistent 17px size.
2. **Generous Line Heights**: Body text maintains a line-height ratio of approximately 1.5x (e.g., 17px/25.5px) to ensure legibility on high-contrast backgrounds.
3. **No Tracking**: Letter spacing remains "normal" across all scales; the system does not use kerning adjustments for display text.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 7 |
| `{space.sm}` | 8px | 4 |
| `{space.md}` | 10px | 3 |
| `{space.lg}` | 15px | 7 |
| `{space.xl}` | 17px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Main layout containers, page sections | `occurrences: 56` |
| `{radius.control}` | 8px | Interactive surfaces and UI cards | `occurrences: 4` |

## Elevation
Table: | Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All surfaces | `shadow: none` |

## Components
### Tier 1: Foundational
#### Global Canvas
**Role:** The base page container.
**Pages observed:** https://magicbus.com
**Spec:** Background `#ffffff` / Text `#000000` / Radius `0px`
**States observed:** Default: captured

### Tier 2: Patterns
#### Navigation Link
**Role:** Main header and footer menu items.
**Pages observed:** https://magicbus.com
**Spec:** Typography `{text.body-lg}` (17px/400) / Text `#000000`
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific
#### Content Surface (Rounded)
**Role:** Specific UI groupings or cards.
**Pages observed:** https://magicbus.com
**Spec:** Background `rgba(0, 0, 0, 0)` / Border `#000000` / Radius `8px` / Padding `0px 8px`
**States observed:** Default: captured

#### Content Surface (Sharp)
**Role:** Standard layout blocks.
**Pages observed:** https://magicbus.com
**Spec:** Background `#ffffff` / Text `#000000` / Radius `0px` / Padding `0px`
**States observed:** Default: captured

#### Footer Metadata
**Role:** Legal and copyright information.
**Pages observed:** https://magicbus.com
**Spec:** Typography `{text.metadata}` (10px/400) / Text `#000000`
**States observed:** Default: captured

#### Top Container
**Role:** Primary hero area or header wrapper.
**Pages observed:** https://magicbus.com
**Spec:** Typography `{text.body-container}` (17px/400) / Radius `0px`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max-width | Not captured |
| Section Gap | 15px - 17px |
| Content Padding | 8px (on rounded surfaces) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Content stacks vertically; text remains 17px for legibility. |

## Imagery & decoration
The brand uses complex, multi-colored geometric background textures (low-poly style) in hero sections to provide visual interest behind the monochrome UI. Icons are enclosed in circular containers.

## Do's
- Use **Verdana** for all text elements to maintain system consistency.
- Maintain **17px** as the primary font size for all navigation and core body content.
- Use **0px border radius** for all primary layout containers.
- Ensure all text-on-background combinations meet the **21:1 contrast ratio** using `#000000` and `#ffffff`.
- Apply **8px border radius** only to specific UI cards or interactive surfaces.

## Don'ts
- **Wrong:** Using a sub-brand's accent color for parent-level text. **Right:** Use `#000000`. **Reason:** The parent brand is strictly monochrome.
- **Wrong:** Introducing serif fonts for headlines. **Right:** Use Verdana 700. **Reason:** The system is single-typeface.
- **Wrong:** Applying soft drop shadows to cards. **Right:** Use 1px borders or flat surfaces. **Reason:** No shadows are captured in the system evidence.

## Similar brands
- Craigslist (utilitarian, system-font driven)
- Berkshire Hathaway (minimalist, text-heavy, high contrast)
- Drudge Report (legacy-web typography, monochrome focus)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-ink: #000000;
  --color-canvas: #ffffff;
  --font-main: "Verdana", sans-serif;
  --size-base: 17px;
  --radius-sharp: 0px;
  --radius-control: 8px;
  --space-lg: 15px;
  --space-xl: 17px;
}
```

```javascript
// Tailwind v4 @theme
@theme {
  --color-ink: #000000;
  --color-canvas: #ffffff;
  --font-verdana: "Verdana";
  --radius-control: 8px;
  --spacing-magic: 17px;
}
```

## Agent prompt examples
- "Create a content section using a white background, 17px Verdana text in black, and a 1px black border with 0px corner radius."
- "Design a footer using 10px Verdana text with a 15.5px line height, ensuring all links are absolute black."
- "Generate a UI card with an 8px border radius, 8px of internal padding, and 17px bold Verdana headers."

## Known gaps
- Hover and Active states for navigation links were not captured in the initial crawl.
- Standard button components (filled) were not present on the analyzed homepage; only text-link navigation was observed.
- Global max-width constraints for desktop layouts were not explicitly defined in the token set.

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