Heytapmobi Design System: Minimalist Browser-First UI

Alright — let's take Heytapmobi apart and see what makes its design language tick.

1. Brand Overview

Opening the Heytapmobi site is like walking into a room lit by a single clean bulb. There's not much fuss, no gradients or photographic hero banners vying for attention. What you do get is a utilitarian presentation heavy on serif typography — Times, specifically — and almost austere use of color.

Blue (#0000ee) is the loudest voice here. It’s the native browser link blue from way back, which immediately tells me this isn’t trying to impress with bleeding-edge CSS artistry. It’s a “we care more about what’s written than how it’s dressed” kind of vibe. The secondary is a mid-gray (#666666), showing up in link states and text, and there’s a pale sky tone (#c2e6f6) that sneaks in via border accents. This isn’t a palette with ten complementary shades — it’s bare-bones functional color, which fits a brand that probably sees itself as a utility provider, not a lifestyle magazine.

Typography choices reinforce that sense: all headings, captions, and links share Times, with fixed pixel sizes — 20 px, 16 px, and 12 px — and no variable fonts or webfont imports. That says: no external dependencies, no branding through fancy type, just core system fonts.

The spacing language is equally spartan. A base 4 px scale, but actual values are idiosyncratic; you see lots of 5px, 10px, and one dramatic 100px hinting at a chunk of whitespace somewhere on the site. No border-radius tokens, no shadows — depth comes from flat 1 px borders and black solid bottom rules.

I’d describe Heytapmobi’s design philosophy as: “Default browser styles, lightly tamed.” Minimal overrides, no attempt to hide the web’s native look. That works if you’re going for plainspoken reliability — the sort of brand where the content is the product, not the visuals.

2. Color System

2.1 Primary Colors

The main action color is #0000ee — that legacy link blue. Psychologically it reads as pure function: clickable, informative, trustworthy. It’s also a safe contrast against white backgrounds. Compared to modern SaaS brands that tweak blue into teal or ultramarine, Heytapmobi makes no attempt to “own” a shade. This is a default, which is both a strength (instant recognizability) and a weakness (no visual IP).

The secondary tone, #666666, sits firmly in the neutral gray zone. It’s used for less important link states — possibly visited links or subdued text — reducing visual noise. The last player in the palette is #c2e6f6, a pale cyan used for borders. It offers a gentle differentiation without shouting.

2.2 Complete Palette

2.3 Color Relationships

Contrast issues:

• #0000ee on white — high contrast, WCAG AA+ compliant for normal and large text.
• #666666 on white — ~4.4:1 contrast ratio, passes AA for normal text, fine for UI text.
• #c2e6f6 on white — low contrast (~1.7:1), fails for text, but it’s used for borders, so it’s okay.

No dark mode patterns here; everything assumes a light background.

2.4 Usage Guide

• Pair #0000ee only with white or very light backgrounds — it needs the contrast.
• Avoid using #c2e6f6 for text — too faint. Restrict to non-critical background lines.
• #666666 works for captions, disclaimers, or secondary nav.
• Don’t mix link colors — keep consistent rules for visited/default states.

3. Typography

3.1 Font Families

Everything’s Times. No fallbacks declared in the data, but browser will default to Times New Roman or similar depending on system. No webfont preloads, no Google Fonts, no custom glyphs.

That’s a strong decision: the brand is leaning on system serif to carry all text.

3.2 Type Scale

3.3 Hierarchy

The h1 scale is minimal — 20px isn’t dramatic for a top-level heading, so hierarchy relies more on weight than size. The secondary “heading-1 (small)” at 16px is only slightly smaller, which compresses the visual difference between content levels. Captions and links are both 12px, same weight, same leading; the distinction is purely semantic. This flattens your type scales — which can be fine in small, text-heavy UIs.

4. Spacing & Layout

4.1 Spacing Scale

Base scale type: 4px. Interestingly, the common values skip strict multiples.

Seeing 5px so often suggests tighter-than-usual spacing — maybe table cells, small margins. The lone 100px is probably a large gap above/below a major element.

4.2 Layout

No breakpoint data — this feels like a fixed layout site. Without max widths specified in the extracted data, I suspect either fluid or a fixed container. If grid exists, it’s likely manual rather than a framework.

5. Visual Elements

• Border Radius: None. Absolutely no rounded corners in the tokens. This is sharp-corner design.
• Shadows: No shadow values. Again, flat presentation.
• Borders:
  • 1px solid #c2e6f6 — used on divs. Soft but visible.
  • Bottom border: 0px 0px 1px solid black rgb(0, 0, 0) — used on h2.

That’s the only depth language here. It’s all about crisp edges.

6. Components

6.1 Buttons

Data shows none — either not present or using default browser styles. That in itself is a choice.

6.2 Links

Two patterns:

1. Neutral gray links (#666666), no underline, weight 400. Default only — hover state not defined in data, possibly unchanged.
2. Blue links (#0000ee), underlined, weight 400. Also static hover styles in data — probably letting browsers handle visited/hover.

This is interesting — mixing underlined and non-underlined links in the same UI signals different roles.

6.3 Forms

No input styling in the data — default form elements.

6.4 Cards

No explicit card tokens — possible content blocks with just borders (#c2e6f6).

7. Design Tokens

:root {
  /* Colors */
  --color-primary-blue: #0000ee;
  --color-neutral-gray: #666666;
  --color-light-sky-border: #c2e6f6;

  /* Typography */
  --font-family-times: "Times";
  --heading1-lg-size: 20px;
  --heading1-lg-weight: 700;
  --heading1-sm-size: 16px;
  --heading1-sm-weight: 700;
  --caption-size: 12px;
  --caption-weight: 400;
  --caption-lineheight: 1.67;
  --link-size: 12px;
  --link-weight: 400;
  --link-lineheight: 1.67;

  /* Spacing */
  --space-5: 5px;
  --space-10: 10px;
  --space-12: 12px;
  --space-20: 20px;
  --space-100: 100px;

  /* Borders */
  --border-div-width: 1px;
  --border-div-style: solid;
  --border-div-color: #c2e6f6;
  --border-h2-width: 1px;
  --border-h2-bottom-color: #000000;

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

8. AI Coding Assistant Prompt

# Heytapmobi Design System Specification

System Prompt:
You are a Heytapmobi design expert. Build UIs matching their visual language exactly.

Brand Context:
Heytapmobi favors default browser ergonomics with minimal overrides. Typography is pure system serif (*Times*), colors are limited to core link blue, neutral gray, and pale cyan borders. Corners are sharp, depth is from thin borders, not shadows.

Color Palette:
- Primary Blue: #0000ee — Clickable links, primary interactive text
- Neutral Gray: #666666 — Secondary links, subdued text
- Light Sky Border: #c2e6f6 — Dividers and border accents

Typography:
- Font family: "Times", system serif
- Heading-1 (large): 20px, weight 700
- Heading-1 (small): 16px, weight 700
- Caption: 12px, weight 400, line-height 1.67
- Link: 12px, weight 400, line-height 1.67
Use headings for titles, captions for labels or footnotes, links for navigation and actions.

Spacing & Grid:
- Base unit: 4px
- Common values: 5px (tight gaps), 10px (small padding), 12px (form spacing), 20px (section padding), 100px (major whitespace)
Map small values to UI element margins, large to layout-level gaps.

Border Radius:
- none: 0 — All components have sharp corners.

Shadows & Depth:
Flat design—no shadows. Use borders for separation.

Component Specifications:

Primary Link:
```css
.link-primary {
  color: #0000ee;
  text-decoration: underline;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.67;
}
.link-primary:hover { /* browser default underline hover */ }
```

Secondary Link:
```css
.link-secondary {
  color: #666666;
  text-decoration: none;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.67;
}
```

Div Border:
```css
.div-bordered {
  border: 1px solid #c2e6f6;
}
```

H2 Bottom Rule:
```css
.heading2 {
  border-bottom: 1px solid #000;
}
```

Layout & Responsive Rules:
No breakpoints specified. Default to fluid layout. Ensure margins/padding use multiples of 4px.

Interaction Rules:
- Let browser handle link hover/visited.
- Avoid transitional animations — static styling.
- Focus indicators: Use browser defaults.

DO:
- Use exact hex values for brand colors.
- Apply sharp corners—radius 0 on all blocks.
- Keep typography in Times with exact sizes.
- Use borders for separation instead of shadows.
- Keep spacing within the defined set (5px, 10px, 12px, 20px, 100px).

DON'T:
- Introduce new colors.
- Add border-radius.
- Add box shadows.
- Change font family.
- Overcomplicate link hover effects.

Code Examples:

Primary Link:
```css
<a href="#" class="link-primary">Click me</a>
```

Secondary Link:
```css
<a href="#" class="link-secondary">Secondary</a>
```

Bordered Div:
```css
<div class="div-bordered">Content</div>
```

9. Summary

TL;DR — Heytapmobi’s design system is bare-minimum deliberate. System serif (Times), three functional colors, pixel-perfect sharpness, no flair. The kind of UI that stays out of the way.

Brand Keywords:

• default-functional
• serif-minimal
• border-separated
• color-sparse