# Somniosoftware Design System

> A high-contrast technical canvas where deep indigo and electric violet meet geometric precision and generous whitespace.

**Source:** https://somniosoftware.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Somniosoftware utilizes a "monochrome-plus" approach, where a strict black (#000000) and white (#ffffff) foundation is energized by a specific palette of purples and blues. The system leans heavily on the **Montserrat Latin** typeface, using extreme weights (800) for high-impact display headers and medium weights for interactive elements. Layouts are defined by large-radius containers (24px to 100px) and distinct section-based color blocking, moving from pure white canvases to deep navy (#1f1867) or soft lavender (#f4f0ff) surfaces.

## Signature DNA
1. **Heavyweight Geometric Typography** (Montserrat at weight 800 for display headings creates an authoritative, tech-forward voice across all hero sections.)
2. **Soft-Edge Technical Surfaces** (The use of 24px and 100px radii on containers and buttons softens the high-contrast palette, making the "software" identity feel approachable.)
3. **Indigo-Violet Accents** (The strategic use of `--brand--500` (#986af6) and `--text--interactive` (#165add) as the only chromatic signals against a grayscale base.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.ink}` | `#000000` | Primary text and button labels | 160 | 0.8 | Computed Style |
| `{colors.canvas}` | `#ffffff` | Primary page background | 35 | 1.0 | `--text--negative` |
| `{colors.surface-dark}` | `#222222` | Dark section backgrounds | 11 | 0.8 | Computed Style |
| `{colors.surface-soft}` | `#f4f0ff` | Light lavender section background | 7 | 1.0 | `--brand--100` |
| `{colors.disabled}` | `#b0b0b0` | Disabled text and placeholders | 5 | 1.0 | `--text--disable` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.interactive}` | `#165add` | Primary buttons and links | 30 | 1.0 | `--text--interactive` |
| `{colors.brand-primary}` | `#986af6` | Brand accent and surface highlights | 10 | 1.0 | `--brand--500` |
| `{colors.brand-soft}` | `#ebe2fd` | Secondary surface backgrounds | 9 | 1.0 | `--brand--200` |
| `{colors.brand-deep}` | `#4d367d` | High-contrast accent text | 9 | 1.0 | `--brand--700` |
| `{colors.sky-soft}` | `#e6f7ff` | Decorative surface background | 9 | 1.0 | `--primary--100` |
| `{colors.border-dark}` | `#151146` | Deep navy borders/accents | 8 | 1.0 | `--secondary--700` |
| `{colors.decorative-blue}` | `#edf2ff` | Decorative only | 1 | 1.0 | `--background--primary` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Montserrat Latin | 400, 500, 600, 700, 800 | All headings, body, and UI | Montserrat (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 60px | 66px | normal | 800 | Hero headers | `h2.heading` |
| `{type.display-md}` | 48px | 52.8px | normal | 800 | Section headers | `h2.heading-style-h3` |
| `{type.heading-sm}` | 24px | 26.4px | normal | 700 | Sub-section titles | `h3.heading-style-h5` |
| `{type.body-lg}` | 20px | 30px | normal | 700 | Emphasized body | `div.text-size-large` |
| `{type.body-md}` | 18px | 27px | normal | 400 | Standard body copy | `p.text-size-medium` |
| `{type.body-sm}` | 16px | 24px | normal | 400 | Default text | `header.section_home-hero` |
| `{type.button}` | 16px | 16px | normal | 500 | Interactive labels | `a.button.is-link` |
| `{type.caption}` | 12px | 12px | normal | 400 | Tags and labels | `div.tag.is-light-pink` |

### Principles
1. **Weight as Hierarchy:** Use weight 800 for primary display, 700 for sub-headers, and 400 for body.
2. **Tight Display Leading:** Large headings use a tight 1.1x line-height (60/66) to maintain visual density.
3. **Interactive Emphasis:** Buttons and links use weight 500 to distinguish from weight 400 body text.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 4px | 22 |
| `{space.sm}` | 8px | 38 |
| `{space.md}` | 12px | 9 |
| `{space.lg}` | 16px | 21 |
| `{space.xl}` | 20px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.none}` | 0px | Section containers | 141 occurrences |
| `{radius.md}` | 8px | Buttons and Inputs | 30 occurrences |
| `{radius.lg}` | 16px | Small cards | 9 occurrences |
| `{radius.xl}` | 24px | Large surfaces | 12 occurrences |
| `{radius.pill}` | 720px | Pill buttons/tags | 16 occurrences |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All observed components | 0 shadow occurrences |

## Components

### Tier 1: Foundational
#### Text Input
**Role:** Form data entry
**Pages observed:** https://somniosoftware.com
**Spec:** Background `#ffffff` / Text `#000000` / Border `1px #151146` / Radius `8px` / Padding `8px 12px`
**States observed:** Default: captured | Hover/Focus: not captured

#### Rounded Button (Pill)
**Role:** Primary site navigation and CTAs
**Pages observed:** https://somniosoftware.com
**Spec:** Background `#165add` / Text `#000000` / Radius `720px` / Font `16px 500`
**States observed:** Default: captured | Active: captured

### Tier 2: Patterns
#### Tag / Badge
**Role:** Metadata labeling
**Pages observed:** https://somniosoftware.com
**Spec:** Background `#ebe2fd` / Text `#4d367d` / Radius `720px` / Padding `8px 16px` / Font `12px`
**States observed:** Default: captured

#### Content Card (Standard)
**Role:** Feature display
**Pages observed:** https://somniosoftware.com
**Spec:** Background `#e5f6ff` / Text `#000000` / Radius `8px` / Padding `20px 16px`
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Dark Surface Card
**Role:** High-contrast content blocks
**Pages observed:** https://somniosoftware.com
**Spec:** Background `rgba(34, 34, 34, 0.4)` / Text `#ffffff` / Radius `100%` (Circular)
**States observed:** Default: captured

#### Interactive Link
**Role:** Inline or standalone navigation
**Pages observed:** https://somniosoftware.com
**Spec:** Background `transparent` / Text `#165add` / Font `16px 500` / Padding `4px 0px`
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px (observed) |
| Section Padding | 80px - 120px (estimated from visual) |
| Grid | Flex-based 2-column and 3-column patterns |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Desktop | 1440px | Full horizontal navigation, multi-column grids |
| Mobile | 390px | Hamburger menu, single-column stacked layout |

## Imagery & decoration
- **Geometric Shapes:** Uses circles and large-radius rectangles as background motifs.
- **App Previews:** High-fidelity UI screenshots used as primary feature graphics.
- **Avoids:** Skeuomorphism, drop shadows, and complex gradients.

## Do's
- Use **Montserrat 800** for all primary page headings.
- Apply **720px radius** to primary CTA buttons to create the signature pill shape.
- Use **#165add** for interactive elements to ensure contrast against white.
- Maintain generous **whitespace** between content sections.
- Use **#f4f0ff** for subtle background differentiation in long-scroll pages.

## Don'ts
- **Wrong:** Using a sub-brand accent color like #986af6 as the primary CTA background. 
  **Right:** Use #165add for primary actions. 
  **Reason:** #165add is the validated interactive token for the parent brand.
- Do not use drop shadows on cards; the system is strictly flat.
- Do not use weights below 400 for body text.
- Do not mix border radii on the same horizontal plane (e.g., a 0px card next to an 8px card).
- Do not use pure #000000 for large background surfaces; use #222222 for dark modes.

## Similar brands
- Vercel (monochrome foundation, high-contrast type)
- Linear (technical precision, indigo accents)
- Stripe (geometric clarity, specific color-blocking)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #165add;
  --color-brand-500: #986af6;
  --color-ink: #000000;
  --color-canvas: #ffffff;
  --radius-pill: 720px;
  --font-main: 'Montserrat Latin', sans-serif;
}
```

## Agent prompt examples
- "Generate a hero section with a Montserrat 800 heading in #000000 and a pill-shaped primary button using #165add."
- "Create a feature grid using cards with an 8px border radius and #e5f6ff background."
- "Design a footer with a #222222 background and Montserrat 400 text in #ffffff."

## Known gaps
- Hover and Focus states for inputs were not captured in the source evidence.
- Z-index layering for navigation overlays was not explicitly defined in tokens.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main Homepage | https://somniosoftware.com | 1440px | 2026-06-06 |