App-analytics-services — Reverse-Engineered Design System

1. Brand Overview

App-analytics-services is exactly what the name says: a service for analyzing app performance, usage, and metrics. The website (https://app-analytics-services.com/) projects a utilitarian, no-frills vibe. This is not a “design candy” brand—more like a functional dashboard built by engineers for engineers. No ornamental gradients. No elaborate motion. The color palette and typography choices scream “default web,” which signals either a conscious decision to go minimal or a lack of investment in visual polish.

What hits you first: the colors are old-school web blue (#0000ee) for links and a mid-gray (#777777) for secondary text. That’s the same link blue used in early HTML defaults. It’s underlined, no hover effect defined. This is about clarity over cleverness—links look like links. Designers might cringe at the lack of brand-specific primary, but it’s a safe choice: nobody will miss them.

Typography? Arial. Straight-up system font. No Google Fonts, no Adobe Fonts, no variable fonts. Heading and link styles share the same size (15px, 0.94rem), weight (400), and line height (1.47). That means headings aren’t visually differentiated from body text in size—hierarchy comes from placement, not scale. This is unusual. It suggests the site might be mostly data tables, charts, or functional text where size differences aren’t critical.

Spacing is custom but minimal: just five distinct values—11px, 15px, 22px, 30px, and one odd large 132.297px. No 4px/8px scale here. The big value looks like a hero section or oversized margin. Border radius? None. Shadows? None. Components are flat, rectangular, with no depth cues except spacing.

One breakpoint at 772px—so responsive behavior is binary: mobile <772px, desktop ≥772px. That’s narrow compared to modern breakpoints (usually 768px for tablets, 1024px for desktops).

This all points to a design philosophy: functional minimalism. Strip UI to essentials. Use defaults for recognizability. Prioritize speed and clarity over brand personality. The trade-off: less memorability, but extreme legibility.

2. Color System

2.1 Primary Colors

The star here is #0000ee — pure web link blue. It’s saturated and high-contrast against white, instantly recognizable as clickable. Psychologically, blue conveys trust and stability, but this shade is more “default browser” than “corporate brand.” Compared to modern SaaS competitors who use custom blues (e.g., #0071e3 for Apple, #0f62fe for IBM Design), this feels retro. But retro here equals clarity—no one mistakes it for non-interactive text.

Secondary? #777777 — a neutral mid-gray. This works for de-emphasizing text but still readable. It’s not dark enough for body text on white (fails WCAG AA for small text), but fine for captions or metadata.

2.2 Complete Palette

That’s it. No brand background, no accent, no success/error states defined in the extracted data.

2.3 Color Relationships

Contrast ratio:

• #0000ee on white: ~8.59:1 — passes WCAG AAA for all text sizes.
• #777777 on white: ~4.48:1 — passes AA for large text (≥18pt), fails for small text.

No dark mode. No alternate palette for theming. This is a strictly light-mode design.

2.4 Usage Guide

Works:

• Blue + underline for links — maximum affordance.
• Gray for secondary info — visually separates from primary content.

Avoid:

• Using #777777 for body text smaller than 18px — accessibility fail.
• Using #0000ee for non-interactive text — breaks affordance.

3. Typography

3.1 Font Families

Font: Arial (system sans-serif), no fallbacks defined. Arial is ubiquitous, safe, and renders consistently across OSes. No imported fonts — zero external dependency for typography.

Sources:

• No Google Fonts
• No Adobe Fonts
• No variable fonts

3.2 Type Scale

Both link and H1 styles are identical — no typographic hierarchy via scale, only context.

3.3 Hierarchy

This is unconventional. Normally H1 is 2–3× body size. Here, headings rely on position, boldness (though weight is 400 here), or surrounding whitespace for emphasis. It’s functional but risks scanning problems: users can’t instantly spot headings by size. For a data-heavy analytics tool, maybe that’s fine — headings are labels, not hero text.

4. Spacing & Layout

4.1 Spacing Scale

The spacing values:

Scale type: custom. No even 4px/8px increments — irregular, likely ad-hoc spacing set by devs.

4.2 Layout

One breakpoint: 772px. So:

• Mobile <772px — stacked layout.
• Desktop ≥772px — side-by-side or multi-column.

No container width specified in extracted data; likely fluid up to breakpoint.

5. Visual Elements

Border Radius

No values. Everything is sharp-cornered. This fits the utilitarian look.

Shadows

None. Flat design. Depth is indicated by layout spacing, not shadows.

Borders and Dividers

No extracted border styles — likely minimal or browser defaults.

6. Components

6.1 Buttons

No button styles extracted — possibly using browser defaults or not present.

6.2 Links

Default:

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

Hover: not defined — browser default (color stays blue, underline remains).

This is the most old-school web link style possible.

6.3 Forms

No input styles extracted — likely default browser styling.

6.4 Cards

No card styles, shadows, or borders defined.

7. Design Tokens

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

  /* Typography */
  --font-primary: Arial, sans-serif;
  --font-size-link: 15px;
  --font-size-h1: 15px;
  --font-weight-normal: 400;
  --line-height-default: 1.47;

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

  /* Border Radius */
  /* none defined */

  /* Shadows */
  /* none defined */

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

8. AI Coding Assistant Prompt

# App-analytics-services Design System Specification

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

Brand Context:
App-analytics-services values functional minimalism and clarity. The design uses default browser affordances, sharp corners, and no decorative elements. Typography and colors are chosen for maximum recognizability and speed.

Color Palette:
- Link Blue: #0000ee — Links, interactive text
- Neutral Gray: #777777 — Secondary text, metadata

Typography:
- Font Family: Arial, sans-serif
- Link: 15px, weight 400, line height 1.47 — interactive text
- Heading 1: 15px, weight 400, line height 1.47 — section titles

Spacing & Grid:
- Tokens: 11px, 15px, 22px, 30px, 132.297px
- Map:
  - 11px: tight gaps
  - 15px: base padding
  - 22px: section spacing
  - 30px: large gaps
  - 132.297px: hero spacing

Border Radius:
- none — all corners sharp

Shadows & Depth:
Flat design — avoid shadows. Use spacing for separation.

Component Specifications:

Primary Button:
```css
.btn-primary {
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.47;
  color: #0000ee;
  text-decoration: underline;
  background: none;
  border: none;
  padding: var(--space-15) var(--space-22);
}
.btn-primary:hover {
  /* No custom hover — browser default */
}
.btn-primary:focus {
  outline: 2px solid #0000ee;
  outline-offset: 2px;
}
```

Navigation Links:
```css
.nav-link {
  color: #0000ee;
  text-decoration: underline;
  font-size: 15px;
  font-weight: 400;
}
```

Layout & Responsive Rules:
- Breakpoint: 772px
- Mobile: <772px — stacked
- Desktop: ≥772px — multi-column

Interaction Rules:
- No motion or transitions defined
- Focus indicators: browser default outline

DO List:
- Use only #0000ee and #777777
- Maintain sharp corners — no radius
- Use underline for all links
- Keep spacing to defined tokens
- Use Arial for all text

DON'T List:
- Add shadows
- Introduce new colors
- Round corners
- Remove underline from links
- Change font family

Code Examples:

Button:
```css
.btn {
  font-family: Arial, sans-serif;
  font-size: 15px;
  color: #0000ee;
  text-decoration: underline;
  border: none;
  background: none;
  padding: 15px 22px;
}
```

Card:
```css
.card {
  background: #fff;
  padding: 22px;
  border: 1px solid #777777;
}
```

Form Input:
```css
.input {
  font-family: Arial, sans-serif;
  font-size: 15px;
  padding: 11px;
  border: 1px solid #777777;
}
.input:focus {
  outline: 2px solid #0000ee;
}
```

9. Summary

TL;DR — App-analytics-services is pure functional UI: Arial text, browser-default link styles, sharp corners, no shadows, minimal spacing tokens, and one breakpoint. It’s retro-minimal, prioritizing recognizability over brand personality.

Brand Keywords:

• retro-functional
• sharp-cornered
• default-affordance
• utilitarian-minimal
• clarity-first