# Karming.se Design System

> Deep navy foundations anchored by high-contrast white surfaces and sharp, square geometry.

**Source:** https://karming.se | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Karming.se utilizes a professional, high-contrast "monochrome" system where "monochrome" refers to a strict adherence to a single primary chromatic accent—Deep Navy (#0b365b)—against a grayscale foundation. The layout is characterized by sharp, 0px border radii on primary interactive elements and containers, creating a rigid, structured feel. Typography is led by Lato for all functional and heading roles, maintaining a clean sans-serif hierarchy. Surface transitions are abrupt, moving between pure white (#ffffff) and deep navy bands without the use of shadows or gradients, relying entirely on flat color blocks for sectioning.

## Signature DNA
1. **The Navy Anchor** (#0b365b is used as both a primary surface background for hero blocks and the primary brand color for logos and icons across all analyzed pages).
2. **Hard-Edge Geometry** (A strict 0px border radius policy for buttons, input fields, and major containers creates a utilitarian, architectural aesthetic).
3. **Lato-Centric Hierarchy** (Lato is the workhorse font, utilized from 14px functional labels to 20px bold headings, providing a consistent humanist sans-serif voice).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text, surface | 26 | 0.8 | computed_style |
| `{color.charcoal}` | `#212121` | Primary body text | 53 | 0.8 | computed_style |
| `{color.silver}` | `#969696` | Secondary/muted text | 14 | 0.8 | computed_style |
| `{color.platinum}` | `#ebebeb` | Borders and dividers | 10 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.navy}` | `#0b365b` | Primary brand color, hero background | 22 | 1.0 | brand_page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Lato | 400, 700 | Primary Heading & Body | Lato (Google Fonts) | SIL Open Font |
| karming-font | 400 | Custom Icons | Fontello / Entypo | Custom |
| HelveticaNeue | 400 | Form Inputs | Inter | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 30px | 64px | normal | 400 | Brand Icons | `a.iconlist_icon` |
| `{type.h3}` | 20px | 22px | normal | 700 | Section Headings | `h3` |
| `{type.body-lg}` | 18px | 29.7px | normal | 400 | Main Body Copy | `section.av_textblock_section` |
| `{type.h4}` | 18px | 19.8px | normal | 700 | List Headings | `h4.iconlist_title` |
| `{type.input}` | 18px | normal | normal | 400 | Search Input | `input#s` |
| `{type.body-sm}` | 15px | 26.01px | normal | 400 | News/List Content | `li.news-content` |
| `{type.label-bold}` | 14px | 29.7px | normal | 700 | Tab Labels | `div.tab.first_tab` |
| `{type.caption}` | 14px | 29.7px | normal | 400 | Metadata | `span.news-time` |

### Principles
1. **Sans-Serif Exclusivity:** No serifs are used; Lato handles all semantic levels.
2. **High Line-Height for Body:** Body copy at 18px uses a generous 29.7px line height (approx 1.65) for readability.
3. **Bold for Emphasis only:** Weight 700 is reserved for headings and strong tags; UI labels remain 400.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 8 |
| `{space.sm}` | 8px | 8 (derived) |
| `{space.md}` | 15px | 5 |
| `{space.lg}` | 18px | 6 |
| `{space.xl}` | 30px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Buttons, Inputs, Cards | 94 occurrences |
| `{radius.soft}` | 2px | Surface containers | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | none | All components | No shadows captured in source |

## Components

### Tier 1: Foundational

#### Search Button
**Role:** Primary site search trigger
**Pages observed:** pricing, about
**Spec:** Background `{color.navy}` (#0b365b) | Text `{color.white}` (#ffffff) | Radius `{radius.sharp}` (0px) | Font 17px
**States observed:** Default | Hover: not captured

#### Search Input
**Role:** Global search field
**Pages observed:** pricing, about
**Spec:** Background `{color.white}` (#ffffff) | Text `{color.silver}` (#969696) | Border 1px `{color.platinum}` (#ebebeb) | Radius `{radius.sharp}` (0px) | Padding 11px 47px 11px 5px

### Tier 2: Patterns

#### Icon List Item
**Role:** Feature lists with brand icons
**Pages observed:** homepage, about
**Spec:** Icon Color `{color.navy}` (#0b365b) | Title `{type.h4}` (Lato 700) | Radius `{radius.sharp}` (0px)

### Tier 3: Surface-specific

#### Content Tab
**Role:** Section navigation
**Pages observed:** pricing, about
**Spec:** Text `{color.charcoal}` (#212121) | Radius `{radius.soft}` (2px) | Padding 5px 0px | Font 14px (Lato 700)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1310px (approx) |
| Section Padding | 50px vertical |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Desktop | >990px | Multi-column layouts, full navigation |
| Mobile | <767px | Single column stack, hidden desktop text blocks |

## Imagery & decoration
The brand relies on full-width hero imagery with color overlays. It uses a repeating geometric pattern (circles/mandala-style) as a subtle background texture in footer and CTA bands.

## Do's
- Use `#0b365b` for all primary calls to action and brand-heavy backgrounds.
- Maintain `0px` border radius on all interactive elements to preserve the "sharp" brand identity.
- Set Lato as the primary font-family for all web content.
- Ensure high contrast (12.4:1) by placing `#ffffff` text on `#0b365b` surfaces.
- Use generous vertical spacing (30px+) between section headers and content.

## Don'ts
- **Wrong:** Using rounded corners on buttons. **Right:** 0px radius. **Reason:** The brand identity is built on rigid, square geometry.
- **Wrong:** Using a light blue for the primary brand color. **Right:** `#0b365b`. **Reason:** This is the specific navy identified across all core pages.
- **Wrong:** Introducing serif fonts for headings. **Right:** Lato 700. **Reason:** Lato is the validated heading font.
- **Wrong:** Using drop shadows to create depth. **Right:** Flat color transitions. **Reason:** No shadows were captured in the system evidence.

## Similar brands
- SAP (Corporate navy/white/sharp)
- Maersk (Industrial, utilitarian grid)
- Volvo (Swedish minimalist, high-contrast typography)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-navy: #0b365b;
  --color-charcoal: #212121;
  --color-white: #ffffff;
  --color-silver: #969696;
  --radius-sharp: 0px;
  --font-main: 'Lato', sans-serif;
}
```

## Agent prompt examples
- "Create a pricing card for Karming.se using a #ffffff background, a 1px #ebebeb border, and a 0px border radius. Use Lato 700 for the price heading."
- "Generate a hero section with a full-width #0b365b background and white Lato text. The primary button should have a 0px radius and #0b365b text on a white background."
- "Design a search bar component with a 1px #ebebeb border, 0px radius, and a navy (#0b365b) square submit button."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the token evidence.
- Mobile-specific typography scale was not fully documented beyond general stacking behavior.
- Secondary accent colors (beyond the primary navy) were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://karming.se | 1440px | 2026-06-06 |
| Pricing | https://karming.se/pricing | 1440px | 2026-06-06 |
| About | https://karming.se/about | 1440px | 2026-06-06 |