Run Brand Design System Deep Dive

1. Brand Overview

Run’s site hits you like an unfiltered command line prompt: minimal, functional, unapologetically bare. This isn’t a brand obsessed with ornamental gradients or elaborate UI chrome—it’s stripped down to the essentials. The palette is microscopic, the type is utilitarian, and the components are almost default browser-rendered. That’s a choice, and it’s a strong one.

From the extracted data, there’s no logo asset embedded and no evidence of a custom typeface. They’re leaning on Arial. That’s telling. Arial is the “get it done” font. It’s everywhere, it doesn’t need loading, and it says: “We’re not here to impress you with typography. We’re here to deliver a tool.”

Colors? Two of them. A link blue (#0000ee) that’s straight out of early web defaults, and a flat neutral gray (#777777). That’s it. No accent greens, no warning reds, no “brand purple.” It’s almost aggressively sparse—this is a design language that says content over decoration.

Spacing is modest. Values like 11px, 15px, 22px, 30px—all custom, not multiples of 4 or 8. That’s unusual in modern design systems, which typically stick to a modular scale. Here, the spacing feels like it’s been set by eye and hand rather than by a rigid token library.

Breakpoints? Just one: 772px. That’s a mid-range tablet breakpoint, which suggests they’re not over-engineering for every device width—they’ve got a simple mobile/desktop split.

Overall vibe: pragmatic, fast-loading, no-nonsense. This feels built for people who value clarity over aesthetics, speed over polish. Developers, command-line enthusiasts, people who love fast tools. No fluff.

2. Color System

2.1 Primary Colors

Run’s primary interactive color is #0000ee (RGB 0,0,238). This is the canonical HTML link blue—slightly darker than pure blue, with a strong association to default hyperlinks. It’s instantly recognizable. It carries nostalgia for the early internet and screams “click me” without needing a hover animation.

Psychologically, blue conveys trust, stability, and clarity. But this particular hue isn’t the modern “brand blue” you see in SaaS—it’s not softened or muted. It’s sharp and saturated, which makes it stand out against neutral backgrounds.

Competitor comparison: Most modern tools lean on custom blues in the #0055cc range to avoid looking “default.” Run embraces the default. That’s bold—it says they’re confident their product stands out without fancy paint.

2.2 Complete Palette

That’s it. No background tokens extracted, no brand gradients.

2.3 Color Relationships

Contrast ratios:

• Link Blue #0000ee on white (#ffffff): Contrast ratio ~8.59:1 — passes WCAG AAA for normal text.
• Neutral Gray #777777 on white: Contrast ratio ~4.48:1 — passes WCAG AA for normal text, fails AAA for small text.

Accessibility: Blue links are fine even for small text. Gray is borderline—shouldn’t be used for long paragraphs at small sizes if AAA compliance is needed.

Dark mode: No evidence in extracted data. Given the sparse palette, dark mode would require inversions (blue on dark backgrounds may shift perception significantly).

2.4 Usage Guide

Works well:

• Blue for interactive states only. Never use it for headings or static text.
• Gray for secondary, non-critical information—timestamps, metadata.

Avoid:

• Using gray for primary content—it reduces readability.
• Introducing unapproved colors—will break the stark, minimal brand feel.

3. Typography

3.1 Font Families

Arial. No Google Fonts, no Adobe Fonts, no variable fonts. Arial is the primary family with no custom fallbacks recorded. This is default system sans-serif.

Pros: zero load time, universally available, legible. Cons: lacks personality; can feel generic.

3.2 Type Scale

This is highly unusual—headings and links share exactly the same size and weight. There is no typographic hierarchy in size; any hierarchy would need to come from semantic markup or color.

3.3 Hierarchy

With identical font size and weight for H1 and links, hierarchy is flattened. The only visual differentiation is color (blue for links, presumably darker or black for headings). Readability isn’t compromised for short content, but longer pages could feel monotonous.

4. Spacing & Layout

4.1 Spacing Scale

Custom scale—not the common 4px/8px grid.

Count indicates frequency in extracted CSS—suggests 15px is the workhorse.

4.2 Layout

Breakpoint: 772px. Likely a switch between single-column mobile layout and multi-column desktop layout at this width.

No container max-widths extracted, but given the single breakpoint, layout is probably fluid until 772px, then fixed grid.

5. Visual Elements

• Border Radius: No values extracted. This suggests either all elements have square corners or rounded corners are handled by default browser styles (e.g., inputs).
• Shadows: None. Flat design—depth is conveyed through layout and spacing, not through elevation.
• Borders: No specific combinations extracted—possibly minimal use.

This is about as flat as it gets.

6. Components

6.1 Buttons

No button styles extracted—either not present or default browser styles are used. That fits the stripped-down philosophy.

6.2 Links

Default:

• Color: #0000ee
• Text-decoration: underline
• Font-weight: 400
• Hover: Not specified (likely unchanged or handled by browser defaults)

This is pure, unstyled HTML link behavior—again, intentional.

6.3 Forms

No input styles extracted—likely using browser defaults.

6.4 Cards

No evidence of card components—content might be in plain text or simple containers.

7. Design Tokens

:root {
  /* Colors */
  --color-link-blue: #0000ee;
  --color-neutral-gray: #777777;

  /* Typography */
  --font-family-base: Arial, sans-serif;
  --font-size-base: 15px;
  --font-weight-normal: 400;
  --line-height-base: 1.47;

  /* Spacing */
  --space-11: 11px;
  --space-15: 15px;
  --space-22: 22px;
  --space-30: 30px;
  --space-132_297: 132.297px;

  /* Breakpoints */
  --breakpoint-tablet: 772px;
}

8. AI Coding Assistant Prompt

# Run Design System Specification

You are a Run design expert. Build UIs matching their visual language exactly.

## Brand Context
Run’s design is minimal, functional, and flat. It uses default system typography and browser link styles. The focus is on clarity and speed—no decorative elements, no custom fonts, no gradients.

## Color Palette
- Link Blue: #0000ee — Interactive text links, primary actions
- Neutral Gray: #777777 — Secondary text, metadata

## Typography
Font families:
- Base: Arial, sans-serif

Type sizes:
| Element | Size | Weight | Line Height | Use For |
|---------|------|--------|-------------|---------|
| Link | 15px | 400 | 1.47 | Interactive text |
| Heading-1 | 15px | 400 | 1.47 | Page titles |

## Spacing & Grid
Base scale: Custom
- 11px — Tight gaps between small elements
- 15px — Default text padding/margins
- 22px — Section spacing
- 30px — Larger section gaps
- 132.297px — Hero/large section spacing

## Border Radius
None — square corners throughout.

## Shadows & Depth
Flat design—no shadows. Use spacing for separation.

## Component Specifications

### Primary Link
```css
a {
  color: #0000ee;
  text-decoration: underline;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.47;
}
a:hover {
  color: #0000ee; /* unchanged */
}
```

### Text Block
```css
p {
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.47;
  color: #777777;
}
```

## Layout & Responsive Rules
- Breakpoint: 772px — switch between mobile (single column) and desktop (multi-column)
- Padding: Use 15px on mobile, scale up to 22px+ on desktop

## Interaction Rules
- Links are underline by default
- No hover animations—instant color feedback if any
- No focus outlines overridden—use browser defaults

## DO List
- Use only #0000ee for interactive elements
- Use #777777 for secondary text
- Keep font size at 15px for body and headings
- Maintain custom spacing values—don’t force 4px/8px grids
- Respect square corners—no border radius unless default from browser

## DON'T List
- Don’t add shadows
- Don’t introduce new colors
- Don’t change default link underline behavior
- Don’t use custom fonts

## Code Examples

### Link
```css
a {
  color: #0000ee;
  text-decoration: underline;
}
```

### Secondary Text
```css
span.meta {
  color: #777777;
  font-size: 15px;
}
```

### Responsive Container
```css
.container {
  padding: 15px;
}
@media (min-width: 772px) {
  .container {
    padding: 22px;
  }
}
```

9. Summary

TL;DR: Run’s design system is almost entirely default HTML/CSS—Arial, default link blue, flat gray for secondary text, square corners, no shadows. It’s minimal to the point of being raw, and that’s the brand’s strength.

Brand Keywords:

• web-classic
• developer-minimal
• functional-flat
• zero-frills
• speed-first