App-measurement Design System Deep Dive

1. Brand Overview

App-measurement.com feels like it’s built for people who care about data more than they care about eye candy. The stripped-down, almost utilitarian approach screams “function first.” There’s no logo in the extracted data — just a favicon — which tells you they’re not chasing visual identity through heavy branding. They’re leaning on default system styles, specifically Arial, and a hyper-basic web blue for links (#0000ee).

This is a design that trusts the browser’s defaults. Minimal overrides, no fuss. That’s a choice — and it’s consistent with a brand that likely serves developers, analysts, or technically-savvy users who value clarity over visual flourish. It’s the equivalent of a terminal window: you don’t make it pretty, you make it readable and reliable.

Typography? Pure Arial, 15px body text even for headings. No differentiation between H1 and link font sizes. Spacing? A few irregular values — 11px, 15px, 22px, 30px — nothing that screams “modular scale.” Breakpoint at 772px, probably a simple responsive collapse.

Colors? Two. A link blue (#0000ee) and a gray (#777777). No background color tokens, no accent colors beyond those. This is lean to the point of austerity.

If you’re a designer looking for inspiration in flourishes, you won’t find it here. If you’re looking for an example of a stripped-down, data-focused interface that leans on defaults, this is a perfect study. It’s not trying to win beauty contests — it’s trying to work everywhere, instantly, without needing to load fancy assets or frameworks.

2. Color System

2.1 Primary Colors

The main brand color is classic “web blue” — #0000ee. This is the default blue many browsers use for links. It’s high-contrast, instantly recognizable as interactive. Psychologically, it’s functional. It says “click me” without ambiguity. Many modern brands tone this down (for example, #0055cc or #1a73e8), but App-measurement sticks with the raw original.

For contrast, the secondary color is a mid-gray: #777777. This is likely used for secondary text, muted elements, or footers. It’s neutral enough to recede while still being legible against white.

Compared to competitors in analytics or measurement tools, which often use blues but with softer saturation, App-measurement’s primary is more aggressive — almost retro. It’s reminiscent of early web UIs. That fits the utilitarian vibe.

2.2 Complete Palette

That’s it — no brand accent, no background token, no semantic red/green.

2.3 Color Relationships

#0000ee on white has excellent contrast — WCAG AA and AAA compliant for normal text. #777777 on white is borderline for small text: contrast ratio ~4.48:1, which passes AA for large text but fails AAA for body copy. Designers should be cautious using it for small fonts.

There’s no dark mode palette defined. Inverting these colors for dark mode would require adjusting both — default blue is too saturated on black, and gray would need lightening.

2.4 Usage Guide

• Use #0000ee only for interactive elements — links, buttons (if any).
• Use #777777 for secondary or de-emphasized content.
• Avoid pairing #777777 with small type sizes due to accessibility concerns.
• Keep backgrounds white or light — palette is optimized for light mode.

3. Typography

3.1 Font Families

Everything is Arial. No Google Fonts, no Adobe Fonts, no custom variable fonts. Arial is a sans-serif workhorse — readable, widely available, and fast to load.

Fallbacks aren’t defined in the extracted data, but browsers will default to system sans-serif if Arial is missing.

3.2 Type Scale

Yes — H1 is the same as link text. This flattens hierarchy. Everything is body-sized.

3.3 Hierarchy

There’s virtually no typographic hierarchy. With the same size and weight applied to both headings and links, the design relies on color (blue for links) and potentially semantic HTML structure for hierarchy.

Readability is fine — Arial at 15px is legible — but scannability suffers without size variation. This is consistent with the minimalist philosophy: fewer styles, fewer variables.

4. Spacing & Layout

4.1 Spacing Scale

Values extracted:

No consistent 4px/8px grid — spacing values feel ad hoc.

4.2 Layout

One breakpoint: 772px. This is likely the switch point between mobile and desktop layouts. There’s no evidence of complex grid systems — probably single-column collapse.

5. Visual Elements

Border radius: None. Every extracted value is empty. This means square corners everywhere — pure flat design.

Shadows: None. Again, flat design. Depth is conveyed through layout and content separation, not through shadows.

Borders: No defined combinations — likely relying on native element borders.

6. Components

6.1 Buttons

None defined in the extracted data. This reinforces the idea that interaction is mostly through links.

6.2 Links

Default:

• Color: #0000ee
• Text-decoration: underline
• Font-weight: 400

Hover: Not explicitly defined — likely browser default (darken or no change).

This is the most “styled” component. It’s pure HTML link styling.

6.3 Forms

No custom text inputs, checkboxes, radios, selects defined. Likely browser defaults.

6.4 Cards

No card styles extracted. Flat design, no borders or shadows.

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-size-base-rem: 0.94rem;
  --font-weight-normal: 400;
  --line-height-base: 1.47;

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

  /* Border Radius */
  --radius-none: 0;

  /* Shadows */
  --shadow-none: none;

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

8. AI Coding Assistant Prompt

# App-measurement Design System Specification

System Prompt: You are an App-measurement design expert. Build UIs matching their visual language exactly.

## Brand Context
App-measurement’s design is utilitarian and minimal. It uses browser defaults, prioritizing clarity and speed over visual flourish. Typography is flat, spacing is irregular but functional, and interactive elements are clearly marked by color.

## Color Palette
- Link Blue: #0000ee — Interactive elements like links
- Neutral Gray: #777777 — Secondary text, muted content

## Typography
Font Family: Arial, sans-serif

| Element   | Size (px/rem) | Weight | Line Height | Use For          |
|-----------|---------------|--------|-------------|------------------|
| Link      | 15px / 0.94rem| 400    | 1.47        | Interactive text |
| Heading 1 | 15px / 0.94rem| 400    | 1.47        | Titles           |

## Spacing & Grid
Base spacing: No fixed base — use extracted values:
- 11px — Tight gaps
- 15px — Default padding
- 22px — Section gaps
- 30px — Larger gaps
- 132.297px — Major layout separation

## Border Radius
- none: 0 — All components

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

## Component Specifications

### Navigation Links
Default:
```css
a {
  color: #0000ee;
  text-decoration: underline;
  font-weight: 400;
}

Hover: Use browser default behavior.

Input Fields

No custom styling — browser defaults.

Layout & Responsive Rules

• Breakpoint: 772px — switch to single-column layout below this
• Page padding: Use 15px for container padding

Interaction Rules

• Transitions: None specified — instant state changes
• Focus indicators: Browser default outline

DO List

• Use only #0000ee for interactive text
• Use only #777777 for secondary text
• Keep corners square — radius 0
• Maintain light backgrounds
• Respect breakpoint at 772px

DON'T List

• Add shadows
• Use colors outside the palette
• Round corners
• Reduce link underline — keep it visible

Code Examples

Link Example

a {
  color: #0000ee;
  text-decoration: underline;
  font-size: 15px;
  line-height: 1.47;
  font-family: Arial, sans-serif;
}

Container Example

.container {
  padding: 15px;
  max-width: 772px;
  margin: 0 auto;
}

Section Gap

.section {
  margin-bottom: 22px;
}

---

## 9. Summary

**TL;DR**: App-measurement’s design is bare-bones, relying on browser defaults and two colors. It’s functional, fast, and unpretentious — a perfect match for a technical audience who wants clarity.

**Brand Keywords**:
- utilitarian-minimalist
- retro-web
- function-over-form
- default-driven
- contrast-clear