# Dimedis Design System

> High-contrast engineering aesthetic defined by electric blue accents, technical dot-grid textures, and a rigid geometric structure.

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

## TL;DR
Dimedis utilizes a "monochrome plus one" strategy, where a stark white and black foundation is energized by a high-saturation Electric Blue (#003cff). The system is built on a strict 8px base unit, favoring sharp corners and hairline borders for structural elements while reserving pill shapes for interactive CTAs. Visual interest is generated through technical patterns—specifically blue dot grids and thin-line coordinate meshes—that suggest a data-driven or software-centric identity. Typography is handled exclusively by TT Norms Pro, maintaining a clean, geometric sans-serif voice across all hierarchies.

## Signature DNA
1. **The Electric Accent** (#003cff used for primary actions, borders, and text emphasis against a pure #ffffff canvas).
2. **Technical Textures** (Blue dot grids and 1px coordinate line patterns used as background decoration to signal "Software+").
3. **Geometric Rigidity** (Sharp 0px corners for containers and surfaces, contrasted only by 9999px pill-shaped buttons).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 23 | 1.0 | Computed Style |
| `{color.ink}` | `#000000` | Primary body text, headings | 160 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#003cff` | Primary CTA text, borders, active states | 46 | 0.8 | Computed Style |
| `{color.primary-muted}` | `#d0dbff` | Soft background for tags or secondary cards | 4 | 0.6 | Computed Style |
| `{color.deep-navy}` | `#0a1a6f` | Dark section backgrounds (decorative_only) | 5 | 0.6 | Computed Style |
| `{color.teal}` | `#37a8a0` | Secondary accent (decorative_only) | 8 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| TT Norms Pro | 400, 600, 700 | All headings and body | Inter | Commercial |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display-1}` | 50px | 70px | normal | 400 | Hero display | `h2.text-heading-1` |
| `{type.heading-1}` | 35px | 49px | normal | 400 | Section heads | `h2` |
| `{type.heading-1-bold}` | 35px | 49px | normal | 700 | Emphasized heads | `strong` |
| `{type.heading-3}` | 28px | 39.2px | normal | 400 | Sub-section heads | `p.text-heading-3` |
| `{type.heading-sm}` | 20px | 30px | normal | 400 | Card titles | `section.flex.flex-col` |
| `{type.body-lg}` | 16px | 24px | normal | 400 | Default body | `p` |
| `{type.body-lg-bold}` | 16px | 24px | normal | 600 | Bold body | `p.font-semibold` |
| `{type.ui-label}` | 16px | 16px | normal | 400 | Buttons/Tags | `span.inline-flex` |

### Principles
1. **Geometric Sans Only:** No serif fonts are permitted; TT Norms Pro carries the entire hierarchy.
2. **Generous Leading:** Display and heading sizes use a 1.4x line-height ratio to ensure readability against technical patterns.
3. **Weight Restraint:** Most headings use weight 400; weight 700 is reserved for specific semantic emphasis.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 4px | 12 |
| `{space.sm}` | 12px | 11 |
| `{space.md}` | 16px | 12 |
| `{space.lg}` | 32px | 53 |
| `{space.xl}` | 64px | 4 |
| `{space.section}` | 192px | 3 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Default for cards, surfaces, and sections | 186 occurrences |
| `{radius.pill}` | 9999px | Primary buttons and category tags | 10 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.focus}` | `rgb(255, 255, 255) 0px 0px 0px 8px, #003cff 0px 0px 0px 9px` | Focus rings and active card states | Card component |

## Components

### Tier 1: Foundational

#### Pill Button
**Role:** Primary and secondary call to action.
**Pages observed:** https://dimedis.io, https://dimedis.io/about
**Spec:** Background: `#ffffff` / Text: `#003cff` / Border: 1px `#003cff` / Radius: `9999px` / Typography: `{type.ui-label}`
**States observed:** Default | Hover: captured | Focus: captured

#### Surface
**Role:** Content grouping and section containers.
**Pages observed:** https://dimedis.io, https://dimedis.io/pricing
**Spec:** Background: `#ffffff` / Border: 1px `#003cff` / Radius: `0px` / Padding: `32px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Category Tag
**Role:** Metadata labeling for blog or case studies.
**Pages observed:** https://dimedis.io
**Spec:** Background: `#d0dbff` / Text: `#000000` / Radius: `9999px` / Padding: `4px 16px` / Typography: 16px
**States observed:** Default: captured

#### Technical Card
**Role:** Feature display with hover interaction.
**Pages observed:** https://dimedis.io
**Spec:** Background: `transparent` / Border: 1px `#003cff` / Radius: `0px` / Shadow: `{shadow.focus}` on active
**States observed:** Default | Active: captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site navigation and copyright.
**Pages observed:** https://dimedis.io, https://dimedis.io/pricing
**Spec:** Background: `#003cff` / Text: `#ffffff` / Radius: `0px` / Padding: `80px 0px`
**States observed:** Default: captured

#### Contact Banner
**Role:** High-conversion section before footer.
**Pages observed:** https://dimedis.io
**Spec:** Background: `#0a1a6f` / Text: `#ffffff` / Radius: `0px` / Pattern: Dot grid overlay
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max-width | 1440px |
| Section Gap | 192px |
| Horizontal Padding | 32px |

## Do's
- Use `#003cff` for all primary interactive borders.
- Apply `{radius.none}` (0px) to all structural containers.
- Use dot-grid patterns only as background decoration, never as foreground elements.
- Maintain 32px (`{space.lg}`) internal padding for all Surface components.
- Reserve pill shapes exclusively for Buttons and Tags.

## Don'ts
- **Wrong:** Using a rounded corner (e.g., 8px) on a card. **Right:** Use 0px. **Reason:** The brand identity is built on rigid, technical geometry.
- **Wrong:** Using `#3b82f6` (standard blue) for buttons. **Right:** Use `#003cff`. **Reason:** Standard SaaS blues dilute the high-contrast "Electric Blue" signature.
- **Wrong:** Placing text directly over a heavy dot grid. **Right:** Ensure text sits on a solid `#ffffff` or `#0a1a6f` background.

## Similar brands
- Stripe (technical precision)
- Vercel (monochrome foundation)
- IBM (engineering-first aesthetic)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --dimedis-blue: #003cff;
  --dimedis-black: #000000;
  --dimedis-white: #ffffff;
  --dimedis-muted-blue: #d0dbff;
  --radius-pill: 9999px;
  --radius-sharp: 0px;
  --font-main: "TT Norms Pro", sans-serif;
}
```

## Agent prompt examples
- "Create a feature card for Dimedis using a 1px #003cff border, 0px border-radius, and TT Norms Pro 20px heading."
- "Generate a primary button as a white pill with a 1px electric blue border and blue text."
- "Design a section background using a white canvas with a subtle #003cff dot grid pattern."

## Known gaps
- Hover states for primary buttons were not explicitly detailed in the token evidence.
- Mobile-specific typography scaling for display sizes was not fully captured.
- Error and Success semantic colors were not present in the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Home | https://dimedis.io | 1440px | 2026-06-06 |
| Pricing | https://dimedis.io/pricing | 1440px | 2026-06-06 |
| About | https://dimedis.io/about | 1440px | 2026-06-06 |