Miwifi Design System Deep-Dive

1. Brand Overview

Miwifi, at least from the snapshot of its site at https://miwifi.com, wears minimalism like a badge. No complex gradients, no flashy animation. The design language feels stripped back to bare essentials — a monochrome approach anchored in a single neutral tone: mid-gray (#808080). That’s rare for a consumer-facing tech brand, especially in the connectivity space where blues and greens dominate.

This gives the site an almost utilitarian vibe. It’s not pushing emotion through color; it’s delivering information with deliberate restraint. The typography choice — Times — is another curveball. Times is a serif family with deep print heritage. In web UI, it’s often swapped out for sans-serif if the brand wants a modern feel. Miwifi sticks to it, which lends a formal, almost archival tone. It’s opinionated design — not trying to look like every other SaaS.

The absence of a visible logo in the extracted data suggests the brand either uses a text-based wordmark or relies on product recognition. There’s a single favicon (favicon.ico), which likely carries the core brand mark in monochrome. No complex icon system. No multi-color identity.

Audience? This feels like it’s aimed at users who value straightforward functionality. The design says: “We won’t distract you. Here’s the information. Here’s the product.” It doesn’t have the polished marketing gloss of a B2C lifestyle brand. Instead, it leans into clarity over charm.

Philosophy? Minimal color, serif typography, no frills. The hierarchy is built on size and weight rather than color or ornamentation. Spacing is modular (8px base grid), which keeps structure consistent even when the visual language is stripped to basics. It’s almost brutalist in its honesty — but softer thanks to the serif type.

2. Color System

2.1 Primary Colors

The only color extracted from the site is rgb(128, 128, 128) — normalized as #808080. That’s a neutral mid-gray. In branding psychology, gray is stable, balanced, and impartial. It’s the Switzerland of colors — doesn’t lean warm or cool, doesn’t shout for attention.

In most UI design, a single neutral wouldn’t be enough to drive the whole palette. But Miwifi seems to use this mid-gray for borders, text, and possibly dividers. It’s an odd choice in a tech product space where high-contrast CTAs are common. They’re either relying on black/white defaults for text/backgrounds, or the gray is doing heavy lifting as the only brand-specific tone.

Competitor comparison: look at TP-Link (green), Netgear (purple), Asus routers (red accents). Miwifi is the outlier — it’s not using color to differentiate, which makes it blend into generic UI territory visually, but also makes it extremely flexible.

2.2 Complete Palette

That’s literally it from the data. No primary accent, no secondary tone, no semantic colors for success/error. This is minimalism taken to an extreme.

2.3 Color Relationships

With one color, “relationships” are basically nonexistent — unless we assume black (#000000) and white (#FFFFFF) are in the system by default. Contrast-wise:

• Against white background: #808080 has a contrast ratio of ~4.48:1 — just under WCAG AAA for normal text, but passes AA for sizes above 18px.
• Against black background: #808080 has ~5.32:1 — better, but still borderline for small text.

If the site uses this gray for body text at 16px, it’s technically accessible for normal vision but might be low contrast for some users.

Dark mode: This neutral could invert easily. On a dark background, you’d lighten the gray to maintain contrast.

2.4 Usage Guide

Works well with:

• White backgrounds for clean separation
• Black text for strong emphasis
• Monochrome photography — keeps the vibe consistent

Avoid:

• Using #808080 as background for text-heavy sections — contrast drops quickly
• Pairing with saturated colors — it can make the gray look muddy
• Using as the only visual separator in dense content — may feel flat

3. Typography

3.1 Font Families

The site uses Times — the classic serif typeface — for headings. No fallbacks are listed in the data, but browsers will default to Times New Roman if Times isn’t available. The extracted data shows:

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

This means they’re relying on system fonts — fast loading, no external dependencies.

3.2 Type Scale

Odd detail: two H1 contexts — one at 32px bold, one at 16px regular. This suggests either inconsistent markup or multiple uses of <h1> for different roles (maybe a page title vs. inline heading). It’s not standard practice, and it can hurt hierarchy.

3.3 Hierarchy

With only two sizes and weights, hierarchy is minimal:

• 32px bold — strong, primary headings
• 16px regular — body text or subheading

No explicit H2/H3 sizes. This makes the site feel flat in typographic depth. Readability is fine — Times is legible — but it doesn’t have the visual rhythm that a full type scale would bring.

4. Spacing & Layout

4.1 Spacing Scale

The site uses an 8px base grid — the most common modular spacing in UI design. Extracted values:

The 21.44px is interesting — not a clean multiple of 8px. Could be from browser default line height calculations for Times.

4.2 Layout

No explicit breakpoints in the data. This suggests either fixed-width design or reliance on default responsive behavior without custom breakpoints. Without container widths in the data, we can’t state exact max widths.

5. Visual Elements

• Border Radius: None in extracted values. This is sharp-corner design — consistent with minimalist/brutalist tendencies.

• Shadow System: None. Flat design — depth comes from borders.

• Borders and Dividers: Only one combination extracted:

  • Width: 1px
  • Style: inset
  • Color: #808080
  • Elements: hr

“Inset” is unusual for borders — it creates a recessed look. Likely used for horizontal rules.

6. Components

The extracted data shows no styled buttons, inputs, links — empty arrays. This either means the site is static content without interactive UI, or these elements are default browser styles.

6.1 Buttons

No custom buttons in the dataset. If they exist, they may be unstyled HTML defaults — relying on user-agent styles.

6.2 Links

No extracted link styles — likely default blue underlined links or inherited from browser.

6.3 Forms

No styled inputs, checkboxes, radios, selects. Again, likely default styles.

6.4 Cards

No card-specific data. Flat design with no shadows or radius suggests cards would be bordered rectangles, if they exist.

7. Design Tokens

:root {
  /* Colors */
  --color-neutral-gray: #808080;

  /* Typography */
  --font-family-times: "Times";
  --heading1-font-size-lg: 2.00rem; /* 32px */
  --heading1-font-weight-lg: 700;
  --heading1-font-size-sm: 1.00rem; /* 16px */
  --heading1-font-weight-sm: 400;

  /* Spacing */
  --space-1px: 0.06rem;
  --space-8px: 0.50rem;
  --space-16px: 1.00rem;
  --space-21_44px: 1.34rem;

  /* Borders */
  --border-width-hr: 1px;
  --border-style-hr: inset;
  --border-color-hr: #808080;
}

8. AI Coding Assistant Prompt

# Miwifi Design System Specification

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

## Brand Context
Miwifi’s design is stripped back, neutral, and functional. It uses a single gray tone for borders and text accents, serif typography for headings, and an 8px spacing grid. No rounded corners, no shadows — depth comes from borders.

## Color Palette
- Neutral Gray: #808080 — Borders, dividers (`hr`), secondary text

## Typography
Font family: "Times", serif fallback
- H1 Large: 32px (2.00rem), weight 700 — Page titles
- H1 Small: 16px (1.00rem), weight 400 — Inline headings or body text

## Spacing & Grid
Base: 8px grid
- 1px — hairline borders
- 8px — small gaps, button padding
- 16px — section gaps
- 21.44px — line height/padding specific to Times

## Border Radius
- none: 0 — all components

## Shadows & Depth
Flat design — no shadows. Use borders (1px inset #808080) for separation.

## Component Specifications

### Primary Button
Default: Browser default styles
Hover: Browser default hover
Focus: Browser default focus ring
Active: Browser default
Disabled: Browser default

### Navigation Links
Use browser default anchor styles unless overridden

### Input Fields
Browser default styling

### Cards
Flat rectangles, sharp corners, 1px inset borders in #808080

## Layout & Responsive Rules
No custom breakpoints — rely on default browser responsiveness
Spacing between elements must be multiples of 8px

## Interaction Rules
Use default browser interaction states
No custom transitions or animations

## DO List
- Use ONLY #808080 for borders and neutral accents
- Maintain 8px spacing grid
- Keep corners sharp — no border radius
- Use Times for headings
- Keep design flat — no shadows

## DON'T List
- Don't introduce new colors
- Don't round corners
- Don't add shadows
- Don't override default form controls unless necessary
- Don't mix serif and sans-serif in headings

## Code Examples

### Horizontal Rule
```css
hr {
  border: 1px inset #808080;
}
```

### Card
```css
.card {
  border: 1px inset #808080;
  padding: 0.50rem; /* 8px */
  background: #fff;
}
```

### Heading
```css
h1 {
  font-family: "Times", serif;
  font-size: 2.00rem;
  font-weight: 700;
}
```

9. Summary

TL;DR — Miwifi’s design is brutally simple: one neutral gray, serif headings, 8px grid, sharp corners, flat UI. It’s functional, fast-loading, and intentionally bare-bones.

Brand Keywords:

• monochrome-functional
• serif-minimalist
• flat-brutalist
• utilitarian-neutral