Mikrotik Design System: Technical Precision & Utility UI

Alright — let's break down Mikrotik's design system exactly as it appears in the extracted data, no guessing, no filler.

1. Brand Overview

Mikrotik’s site screams “engineer-first” but in a deliberate, highly structured way. This isn’t a lifestyle brand trying to seduce you with soft gradients and playful illustrations. It’s a networking hardware/software company, and their design language reflects that: functional, technical, no unnecessary decoration.

The typography choice — JetBrains Mono — is an immediate tell. Monospaced fonts are rare in mainstream brand systems. They’re usually reserved for developer tools, terminal UIs, or brands that want to visually signal precision, code, and infrastructure. Mikrotik doubles down on this, using uppercase transformations and tight line heights for headings. It feels like a CLI that learned some CSS.

Color-wise, it’s austere but purposeful. High-contrast black (#0e0e10) and white (#ffffff) dominate. There’s a functional orange (#fa9300), a deep blue (#1961bc), and a strong red (#e00000). These aren’t “brand primary” in the playful sense — they’re utility colors. They’re the colors you’d assign to status states: error, warning, active link. The lack of gradients or complex color transitions reinforces the precision-first mindset.

The spacing system is an 8px grid with a few oddball values (10px being unusually frequent). This is a developer-friendly scale — easy to multiply, divide, and keep consistent.

Buttons and links are stripped-down. Borders are rare. Shadows are minimal and functional — a single subtle shadow set, used only where depth is needed. The rest is flat, relying on color and type weight for hierarchy.

This whole thing feels like it was designed by people who configure routers for fun. And I mean that as a compliment. It’s unapologetically technical, and it’s consistent.

2. Color System

2.1 Primary Colors

The “primary” here is arguably not a single hue but the black/white pairing. The site’s background and text swap between #ffffff and #0e0e10 depending on context. This creates maximum contrast — easy to read, easy to parse. Functional colors like orange (#fa9300) and blue (#1961bc) are secondary accents, used sparingly.

This works because Mikrotik’s brand is about reliability and clarity. Competing networking brands (Cisco, Ubiquiti) often rely on blue as a primary brand color. Mikrotik instead keeps blue in the utility bucket, not as the face of the brand.

2.2 Complete Palette

2.3 Color Relationships

The contrast between #ffffff and #0e0e10 is extreme (WCAG AA and AAA safe for all sizes). This makes text legible in all conditions. Accent colors like #fa9300 (orange) and #1961bc (blue) also have strong contrast against both black and white. Red (#e00000) is vivid, ensuring error states are obvious.

There’s no evidence of a “dark mode toggle” — but the palette is ready for it. The near-black background with white text is already in play in parts of the site.

2.4 Usage Guide

• White + Near Black: Use as core background/text pairing.
• Orange (#fa9300): Use for calls to action or warnings. Avoid overuse; it’s strong.
• Blue (#1961bc): Links and informational highlights only. Don’t use as a background.
• Red (#e00000): Only for errors, destructive actions.
• Green (#009245): Success states, progress indicators.
• Grays: Use to build hierarchy — lighter grays for backgrounds, darker grays for text.

Avoid mixing orange and red in the same element — they compete visually. Same for blue and green.

3. Typography

3.1 Font Families

• Primary: JetBrains Mono, fallback to ui-monospace.
• Icons: tabler-icons-300-outline.

No Google Fonts or Adobe Fonts — this is a self-hosted or locally sourced stack. The choice of JetBrains Mono is a brand-defining move. It’s precise, developer-centric, and consistent across headings, links, buttons, and captions.

3.2 Type Scale

3.3 Hierarchy

The hierarchy is built on font weight and uppercase transformation, not just size. Headings are often uppercase, making them stand out even at smaller sizes. Body text sticks to normal case, keeping readability high. The monospaced nature makes alignment predictable, but it also means text feels denser.

4. Spacing & Layout

4.1 Spacing Scale

Base unit: 8px.

4.2 Layout

No explicit breakpoints in data — but Tailwind CSS is detected, so responsive modifiers are in play. Expect a mobile-first approach with container widths defined in Tailwind’s defaults.

5. Visual Elements

Border Radius

One extreme value appears: 33554400px — essentially “fully pill-shaped” (full border radius). Used on buttons, divs, anchors, spans. This is a “full” token — anything with this radius becomes a capsule.

Shadows

Only one shadow set, used 6 times:

rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

Subtle, functional. No heavy drop shadows.

Borders

Most common: 0px 0px 1px solid #dadada — subtle bottom border, often for buttons or links.

6. Components

6.1 Buttons

Default:

• Background: transparent
• Text color: #ffffff
• Padding: 8px 16px
• Border radius: 0px (unless pill variant)
• Font size: 12px
• Font weight: 700

States: No hover/active/focus overrides in extracted data — likely handled via Tailwind classes.

6.2 Links

Two variants:

1. Dark text (#0e0e10) on light background.
2. White text (#ffffff) on dark background.

No underline. Weight: 400. Hover styles not in extracted data.

6.3 Forms

No text inputs, checkboxes, radios, or selects detected — possibly custom components loaded dynamically.

6.4 Cards

No explicit card component found — likely built from spacing + background + shadow tokens.

7. Design Tokens

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #0e0e10;
  --color-gray-bright: #f1f1f2;
  --color-gray-light: #dadada;
  --color-gray-darker: #2c2c2e;
  --color-orange: #fa9300;
  --color-gray-4: #ececec;
  --color-gray: #808085;
  --color-green: #009245;
  --color-gray-dark: #67676b;
  --color-gray-1: #89898e;
  --color-red: #e00000;
  --color-blue: #1961bc;
  --color-gray-medium-light: #cdcdcf;
  --color-gray-medium: #b3b3b6;

  /* Typography */
  --font-primary: 'JetBrains Mono', ui-monospace;
  --font-icons: 'tabler-icons-300-outline';

  /* Spacing */
  --space-1: 1px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  /* Border Radius */
  --radius-full: 33554400px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px,
                   rgba(0, 0, 0, 0.1) 0px 2px 4px -2px;
}

8. AI Coding Assistant Prompt

# Mikrotik Design System Specification

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

## Brand Context
Mikrotik's design language is technical, precise, and functional. It uses a monospaced font for all UI text, high-contrast black/white pairing, and strong functional accent colors. Components are minimal, with subtle shadows and an 8px spacing grid.

## Color Palette
- White: #ffffff — Light backgrounds, text on dark mode
- Near Black: #0e0e10 — Dark backgrounds, text in light mode
- Gray Bright: #f1f1f2 — Hover/focus backgrounds
- Gray Light: #dadada — Dividers, borders
- Gray Darker: #2c2c2e — Section backgrounds
- Orange: #fa9300 — Accent actions, warnings
- Gray 4: #ececec — Background blocks
- Gray: #808085 — Secondary text
- Green: #009245 — Success states
- Gray Dark: #67676b — UI chrome
- Gray 1: #89898e — Icons, neutral text
- Red: #e00000 — Error states
- Blue: #1961bc — Links, informational highlights
- Gray Medium Light: #cdcdcf — Backgrounds
- Gray Medium: #b3b3b6 — Body text

## Typography
- Primary Font: JetBrains Mono, ui-monospace
- Icon Font: tabler-icons-300-outline

| Level | Size | Weight | Line Height | Transform | Use For |
|-------|------|--------|-------------|-----------|---------|
| H1    | 48px | 700    | 1.13        | uppercase | Page titles |
| H1    | 40px | 700    | 1.13        | uppercase | Section headers |
| H1    | 32px | 700    | 1.13        | uppercase | Subheaders |
| Body  | 16px | 400    | 1.50        | none      | Body text |
| Link  | 14px | 300    | 1.50        | none      | Secondary links |
| Button| 12px | 700    | 1.50        | uppercase | Primary buttons |

## Spacing & Grid
Base: 8px
Scale: 1px, 8px, 10px, 12px, 16px, 24px, 32px, 40px, 64px, 96px, 128px

## Border Radius
- full: 33554400px — pill-shaped buttons, capsules

## Shadows & Depth
- subtle: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px 4px -2px

## Components

### Primary Button
Default:
```css
.btn-primary {
  background: transparent;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 0px;
  font-family: 'JetBrains Mono', ui-monospace;
  font-weight: 700;
  font-size: 12px;
  border: none;
}
```

### Link
Dark mode:
```css
.link-dark {
  color: #ffffff;
  text-decoration: none;
  font-family: 'JetBrains Mono', ui-monospace;
}
```

Light mode:
```css
.link-light {
  color: #0e0e10;
  text-decoration: none;
}
```

## Layout & Responsive Rules
- 8px grid for all spacing
- Tailwind responsive modifiers allowed
- Section spacing: 64px
- Card padding: 32px

## Interaction Rules
- 150ms ease for state changes
- No hover underline on links
- Focus states use #f1f1f2 background or #1961bc outline

## DO List
- Use only palette colors
- Stick to 8px grid
- Keep buttons uppercase
- Use JetBrains Mono everywhere
- Use subtle shadows only where needed

## DON'T List
- Add gradients
- Use arbitrary border radius
- Apply heavy shadows
- Change font family

## Code Examples

Button:
```css
.btn-primary {
  background: transparent;
  color: #ffffff;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 700;
  border: none;
}
```

Card:
```css
.card {
  background: #ffffff;
  padding: 32px;
  border-radius: 0px;
  box-shadow: var(--shadow-subtle);
}
```

9. Summary

TL;DR — Mikrotik’s design system is pure function: monospaced typography, high-contrast black/white, strict 8px grid, minimal shadows, and utility colors for state signaling. It’s a developer’s brand — precise, consistent, no fluff.

Brand Keywords:

• engineer-first
• code-centric
• high-contrast-minimal
• utility-color-driven