Markmonitor Design System Deep Dive

1. Brand Overview

Markmonitor’s visual language is cut straight from the enterprise security cloth — clean, sharp, and precise. This isn’t a warm, lifestyle brand. It’s built to project authority and trust in a market where intellectual property and online brand protection are the product. Everything about the site’s design feels engineered to say: “We’re serious. We’re watching. We know what we’re doing.”

The vibe is corporate, but with a modern veneer. There’s no heavy skeuomorphism or ornamental fluff — the layouts are flat, the color accents are minimal but high contrast, and typography is tight and geometric. You can tell they’ve chosen a palette that’s both functional and brand-defining: deep navy (#202b5e) for authority, high-energy cyan (#53fbfe) for action, and white (#ffffff) for clarity. Black (#000000) plays a structural role, anchoring sections and text. There’s a hint of bright blue (#005fcc) in hover states, but it’s restrained.

The audience is B2B. This is for legal teams, brand managers, and executives. That shows up in the typography choices—Nohemi and Inter—both modern sans-serifs with a tech-forward feel. Nohemi’s ultra-thin weights at large sizes scream corporate sophistication, while Inter covers the utilitarian UI text and body copy.

Design philosophy here: reduce noise, keep elements clean, use color sparingly to draw focus, and make sure interactive elements stand out. The buttons are highly legible, with strong color contrast and minimal decoration. Borders are used sparingly—mostly for separation rather than ornament. Shadows appear only in subtle doses (rgba(0,0,0,0.15) 3px 0px 15px 0px) to lift certain elements without breaking the overall flat aesthetic.

Responsiveness is clearly thought through—breakpoints span from small mobile (320px) to large desktop (1366px). Layout spacing follows an 8px scale, but with some fractional values (like 7.04px and 10.08px) that suggest either a design tool export or fine-tuned adjustments for balance.

If you’re building for Markmonitor, you’re building for precision and clarity. This is a brand where consistency is a trust signal. Miss the exact cyan or navy tone, and the whole thing starts to feel “off.”

2. Color System

2.1 Primary Colors

The primary action color is a bright cyan #53fbfe. It’s impossible to miss—used for buttons, accents, and interactive highlights. Psychologically, cyan is high-energy, modern, and tech-savvy. It communicates alertness without aggression. In a security context, it says “we move fast” more than “we’re dangerous.”

Secondary brand hues are deep navy #202b5e and pure white #ffffff. Navy anchors the design in seriousness and trustworthiness; white keeps the interface open and breathable. Black #000000 is used for text and structural contrast.

Compared to competitors in the brand protection space (often heavy on reds, golds, and darker blues), Markmonitor’s cyan is a more optimistic, tech-centric choice. It’s closer to fintech or SaaS aesthetics than to law firm branding.

2.2 Complete Palette

2.3 Color Relationships

Cyan #53fbfe on navy #202b5e is high contrast—passes WCAG AA easily for large and normal text. White #ffffff on navy is near-perfect contrast (> 12:1). Black text on white is the default and obviously compliant.

Hover states swap cyan for bright blue #005fcc—still accessible against white backgrounds. Focus states sometimes flip to white backgrounds with dark text (#121217), which maintains readability.

Dark mode? There’s no explicit dark mode, but the palette could adapt well—swap navy for black backgrounds, keep cyan as accent.

2.4 Usage Guide

• Works well: Cyan + navy (primary buttons), white + navy (headings), black + white (body)
• Avoid: Cyan on white for small text — it’s legible but risks low perceived contrast in bright environments.
• Keep cyan for actions: Don’t use it for passive UI elements; it’s designed to draw clicks.
• Navy backgrounds: Pair only with white or cyan text — black fades too much.

3. Typography

3.1 Font Families

Two main families:

• Nohemi — Used for headings and some large links. Geometric sans, minimal stroke contrast. Multiple weights (200, 400, 500, 600, 700).
• Inter — UI workhorse. Covers body text, captions, and smaller headings. Weights from 400 to 600.
• Fallbacks: Arial, Verdana, Tahoma in some contexts.

No Google Fonts or Adobe Fonts listed—likely self-hosted or locally served.

3.2 Type Scale

3.3 Hierarchy

Nohemi’s huge sizes (96px, 64px) create dramatic headers — great for hero statements. Thin weights (200) keep them elegant, while 700 adds bold impact when needed. Inter handles functional text — smaller sizes and higher weights for navigation, labels, and buttons.

Line heights vary wildly — some are tight (0.33 on 96px bold headers), others open (2.05 on 22px medium-weight text). This is intentional: tight for display, open for readability in smaller sizes.

4. Spacing & Layout

4.1 Spacing Scale

Base: 8px scale with fractional adjustments.

4.2 Layout

Breakpoints:
320px, 425px, 600px, 640px, 680px, 767px, 768px, 781px, 782px, 820px, 952px, 1024px, 1180px, 1254px, 1255px, 1366px.

Clearly optimized for a range from small mobile to large desktop. The close breakpoints around 767px–782px suggest careful tablet optimization.

5. Visual Elements

Border Radius:

• 0px 0px 10px 10px — bottom-rounded panels
• 3px — small buttons
• 10px — cards, containers
• 10px 10px 0px 0px — top-rounded elements
• 20px — larger containers
• 25px — pill-like anchors
• 50% — circular badges/avatars

Shadows:

• rgba(0,0,0,0.15) 3px 0px 15px 0px — subtle side shadow. Used sparingly.

Borders:

• 3px solid cyan (#53fbfe) — accent borders
• 0px 0px 1px solid white — dividers
• 0px 1px 0px 0px solid white — vertical separators
• 1px solid rgba(255,255,255,0.6) — light dividers

6. Components

6.1 Buttons

Primary Button
Default:

• Background: #53fbfe
• Text: #202b5e
• Padding: 10.08px 30px
• Border radius: 3px
• Border: none
• Font weight: 500
• Font size: 18px

Hover:

• Background: rgb(6,105,252)
• Text: var(--wp--preset--color--base)

Active:

• Background: var(--wp--preset--color--primary)
• Text: var(--wp--preset--color--base)

Focus:

• Outline: 2px solid -webkit-focus-ring-color
• Background: #fafafa
• Text: #122124

Secondary Button
Default:

• Background: #202b5e
• Text: #53fbfe
• Padding: 10.08px 16px
• Border radius: 3px
• Font weight: 500
• Font size: 18px

Hover: same as primary hover.

6.2 Links

Variants:

• Navy #202b5e — standard text links
• Cyan #53fbfe — accent links
• White #ffffff — links on dark backgrounds
• Deep navy #1f2a5c — bold links

No underline, even on hover.

6.3 Forms

Inputs: none explicitly styled in data — likely flat, with subtle borders (#e5e5e9).

6.4 Cards

Likely 10px radius, subtle shadow (rgba(0,0,0,0.15)), or bordered with #e5e5e9.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-cyan: #53fbfe;
  --color-navy: #202b5e;
  --color-hover-blue: #005fcc;
  --color-borders-light: #ebebef;
  --color-borders: #e5e5e9;
  --color-text-contrast: #121217;
  --color-text-faded: #55556d;
  --color-subtle: #d1d1db;
  --color-link-secondary: #00f;
  --color-admin-blue: #007cba;
  --color-admin-darker-10: #006ba1;
  --color-admin-darker-20: #005a87;
  --color-bound-purple: #7a00df;

  /* Typography */
  --font-nohemi: "Nohemi", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-arial: Arial, sans-serif;

  /* Spacing */
  --space-1-2px: 1.2px;
  --space-5px: 5px;
  --space-7-04px: 7.04px;
  --space-8px: 8px;
  --space-10px: 10px;
  --space-10-08px: 10.08px;
  --space-10-72px: 10.72px;
  --space-16px: 16px;
  --space-20px: 20px;
  --space-24px: 24px;
  --space-25px: 25px;
  --space-30px: 30px;
  --space-35px: 35px;
  --space-40px: 40px;
  --space-80-96px: 80.96px;
  --space-82px: 82px;
  --space-90px: 90px;
  --space-100px: 100px;
  --space-130px: 130px;
  --space-140px: 140px;

  /* Radius */
  --radius-sm: 3px;
  --radius-md: 10px;
  --radius-lg: 20px;
  --radius-pill: 25px;
  --radius-full: 50%;

  /* Shadows */
  --shadow-subtle: rgba(0,0,0,0.15) 3px 0px 15px 0px;
}

8. AI Coding Assistant Prompt

# Markmonitor Design System Specification

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

## Brand Context
Markmonitor’s design is corporate, precise, and security-focused. It uses high-contrast colors sparingly, relies on clean typography, and keeps interactive elements obvious but minimal. The goal is trust and clarity, not decoration.

## Color Palette
- White: #ffffff — page backgrounds, text on dark sections
- Black: #000000 — body text, structural backgrounds
- Bright Cyan: #53fbfe — primary buttons, key links, accent borders
- Deep Navy: #202b5e — headings, secondary buttons, hero backgrounds
- Hover Blue: #005fcc — hover background for buttons
- Borders Light: #ebebef — light dividers
- Borders: #e5e5e9 — standard dividers and input borders
- Text Contrast: #121217 — strong text on light backgrounds
- Text Faded: #55556d — captions, secondary text
- Subtle Gray: #d1d1db — neutral backgrounds
- Link Secondary: #00f — fallback link color
- Admin Blue: #007cba — CMS/admin UI
- Admin Darker-10: #006ba1 — CMS hover
- Admin Darker-20: #005a87 — CMS focus
- Bound Purple: #7a00df — internal editor accents

## Typography
- Headings: "Nohemi", sans-serif
- Body/UI: "Inter", sans-serif
- Fallback: Arial, Verdana, Tahoma

| Level | Font | Size | Weight | Line Height | Use For |
|-------|------|------|--------|-------------|---------|
| H1 | Nohemi | 96px | 200 | 0.99 | Hero titles |
| H1 Bold | Nohemi | 96px | 700 | 0.33 | Impact titles |
| H2 | Nohemi | 64px | 200 | 1.25 | Section titles |
| ... (include all extracted sizes) | | | | | |

## Spacing & Grid
Base: 8px grid  
Tokens: 1.2px, 5px, 7.04px, 8px, 10px, 10.08px, 10.72px, 16px, 20px, 24px, 25px, 30px, 35px, 40px, 80.96px, 82px, 90px, 100px, 130px, 140px  
Use multiples for padding, margins, and gaps.

## Border Radius
- sm: 3px — buttons
- md: 10px — cards, containers
- lg: 20px — large elements
- pill: 25px — pill links
- full: 50% — circular elements

## Shadows & Depth
- Subtle: rgba(0,0,0,0.15) 3px 0px 15px 0px — use for lifted cards only.

## Component Specifications

### Primary Button
Default: background #53fbfe, text #202b5e, padding 10.08px 30px, radius 3px, font 18px/500, no border.  
Hover: background #0669fc, text var(--wp--preset--color--base).  
Active: background var(--wp--preset--color--primary), text var(--wp--preset--color--base).  
Focus: outline 2px solid -webkit-focus-ring-color, background #fafafa, text #122124.

### Secondary Button
Default: background #202b5e, text #53fbfe, padding 10.08px 16px, radius 3px, font 18px/500.  
Hover: same as primary hover.

### Navigation Links
No underline; color per context (navy, cyan, white, deep navy bold). Hover: no underline.

### Input Fields
Border: 1px solid #e5e5e9, radius 3px or 10px, background white. Focus: border-color cyan or hover blue.

### Cards
Background white, radius 10px, subtle shadow or border #e5e5e9, padding 20px.

## Layout & Responsive Rules
Breakpoints: 320px, 425px, 600px, 640px, 680px, 767px, 768px, 781px, 782px, 820px, 952px, 1024px, 1180px, 1254px, 1255px, 1366px.  
Max content width: 1180px (approx).  
Page padding: 20px mobile, 40px desktop.  
Grid gap: 20px.

## Interaction Rules
- Transition: 150ms ease for hover and focus states.
- Focus indicators: clear outline with accessible color.
- Loading states: keep consistent background, add spinner.

## DO List
- Use only colors from palette.
- Maintain 8px grid and listed spacing tokens.
- Use Nohemi for headings, Inter for body/UI.
- Keep buttons high contrast.
- Keep links without underline.

## DON'T List
- Don't introduce new colors.
- Don't mix sharp and rounded corners inconsistently.
- Don't apply heavy shadows — keep depth subtle.
- Don't reduce contrast below WCAG AA.

## Code Examples

### Primary Button
```css
.btn-primary {
  background: #53fbfe;
  color: #202b5e;
  padding: 10.08px 30px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 18px;
  border: none;
  transition: background 150ms ease;
}
.btn-primary:hover { background: #0669fc; }
.btn-primary:focus {
  outline: 2px solid -webkit-focus-ring-color;
  background: #fafafa;
  color: #122124;
}
```

### Card
```css
.card {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: rgba(0,0,0,0.15) 3px 0px 15px 0px;
}
```

### Input
```css
.input {
  border: 1px solid #e5e5e9;
  border-radius: 3px;
  padding: 8px;
  font-size: 16px;
}
.input:focus {
  border-color: #53fbfe;
  outline: none;
}
```

9. Summary

TL;DR — Markmonitor’s design system is precision-focused: deep navy for authority, cyan for action, white for clarity. Nohemi and Inter fonts keep text clean and modern. Spacing is strict, buttons are high-contrast, and shadows are rare.

Brand Keywords:

• security-minimalist
• corporate-precision
• tech-serious
• trust-forward
• action-contrast