Skip to content
DesignMunkDesignMunk Submit a site

Openlayer

openlayer.com
Control your AI, layer by layer.
AI Developer Tools Next.js Homepage made Awelier neue Montreal
Share Visit site
openlayer.com DESKTOP · 1440
Openlayer

AI Breakdown

Design export

# Design brief: the Openlayer design language

Below is a complete design specification measured from a real, published web page. Use it as a design language for the user's product. It is not a page to reproduce.

## Reference images

- Full page: https://cdn.designmunk.com/2026/09/07092831/openlayer-com-featured.webp
- Above the fold: https://cdn.designmunk.com/2026/09/07092831/openlayer-com-featured.webp
- On DesignMunk: https://designmunk.com/openlayer/

Study these for hierarchy, rhythm, spacing and density. Where an image and the written spec disagree, the spec wins: the tokens were read from the page's own CSS, the images are one rendering of it.

## Before you start

Ask the user what they are building, who it is for, and what brand assets they already have — name, colours, typefaces. Wait for their answers before writing anything. Everything below is then applied to their product, not to the reference.

## Design specification

# Openlayer: Tight Serif Headlines, One Purple Emphasis

## Overview

Openlayer's UI is enterprise-serious, with calm neutrals and purple accents. It favors tight, high-contrast headlines and steady, low-saturation body text to signal control and auditability. Spacing is moderately spacious; sections breathe but stay information-dense. When tokens don't specify, default to clarity over decoration, privileging legibility, structure, and repeatable patterns.

## Colors

- **primary (#8b8d98):** Control gray for body text, metadata, and subdued UI labels.
- **secondary (#7c5bec):** Gateway violet for supportive accents and secondary emphasis.
- **tertiary (#8a58c1):** Core purple for primary CTAs and key interactive highlights.
- **neutral (#fcfcfd):** Paper white base for pages and cards.
- **border (#000033):** Night navy for hairline dividers, focus rings, and charts needing high-contrast edges.
- **brand-purple-sand (#bcacec):** Lavender sand for inline text emphasis and soft highlights.
- **surface ({colors.neutral}):** Mirrors neutral for surfaces and cards.
- **on-surface ({colors.primary}):** Default on-surface text color linking components back to Control gray.

## Typography

- Headline (lg 64px, md 62px) uses Made Awelier, a high-contrast display serif set tight (-0.05 to -0.06em). It is custom/self-hosted; if unavailable, substitute Playfair Display, Libre Bodoni, or Cormorant Garamond with similar optical sizes and tracking.
- Headline-sm (20px) and Headline-xs (18px) use Neue Montreal, a neutral grotesk. It is custom/self-hosted; if unavailable, substitute Inter, IBM Plex Sans, or Work Sans.
- Body-md (16px, 1.5 line-height, -0.011em) also uses Neue Montreal (or substitutes above). Use Body-md for most copy and UI text. Keep body color at #8b8d98 on #fcfcfd for the intended soft tone; increase weight or darken only for accessibility-critical elements.

## Layout

The spacing scale centers on 10/20/24/52px steps: use sm (10) and md (20) for intra-component rhythm, lg (24) for gutters between elements, and xl (52) for section paddings. Cards use fixed 16px internal padding as defined in component tokens. Favor a simple multi-column grid (e.g., 12-col) with generous outer gutters; align section headings to the same vertical rhythm as card stacks and tables. Keep hero blocks and platform layers vertically separated with multiples of 24–52px to maintain scanability.

## Elevation & Depth

Depth is minimal. A light sm shadow (rgba(0,0,0,0.05) 0 1px 3px) is available for floating cards or modals; medium and larger tiers are intentionally none. Where separation is needed, prefer 1px borders in #000033, tonal shifts between #fcfcfd surfaces, or whitespace. Avoid heavy drop shadows or glows—hierarchy is conveyed by structure and tone.

## Shapes

Two radii define the language: sm 8px for interactive elements (buttons, inputs, tags) and md 12px for containers (cards, screenshots, modals). Links remain sharp (0px) for text-level actions. Rounded choices communicate approachable yet serious tooling—functional first, decorative second.

## Components

Buttons and cards are restrained and consistent.
- Button — Primary: 32px high, 8px radius, padding 8px 16px, background #8a58c1, text #ffffff. Use for main CTAs (e.g., Request a demo).
- Button — Secondary: 32px high, 8px radius, padding 8px 16px, background #ffffff, text #1c2024; outline with #000033 on light backgrounds when extra separation is needed.
- Button — Link: Text-only in #8b8d98, 0px radius. Use for inline actions.
- Card: Background #fcfcfd, text #8b8d98, 12px radius, 16px padding, optional sm shadow for lift.

### Top Navigation
Single-row nav with product menus and two actions on the right. Default link text uses #8b8d98; the rightmost action pairs a Secondary button (Sign in) and a Primary button in #8a58c1 (Request a demo), both 32px high.

### Hero Headline Block
Display serif at 64px/62px with tight tracking (-0.05/-0.06em). Body lead set in 16px Neue Montreal. Primary CTA uses the Primary button. Maintain 52px vertical spacing below the headline and 24px to the CTA.

### Inline Emphasis Highlight
Short text span highlighted with a soft band in #bcacec behind the words. Keep radius at 0px (text inline) and padding using sm 10px left/right if treated as a pill.

### Trusted-By Logo Strip
Monochrome client logos arranged in a low-contrast row inside a surface card. Use 12px radius, 16px padding, and optional sm shadow; separate rows with a 1px #000033 divider when stacked.

### Product Demo Tabs
A wide card (12px radius) showing a screenshot with tabs: Development, Monitoring, Governance, Enforcement. Use the sm shadow for lift and 24px spacing to surrounding content. Active tab accent may use #7c5bec.

### Platform Layer Cards (01–07)
Seven repeatable sections (Discovery → Cost Controls). Each combines a short blurb, a compact UI example, and a "Explore" link. Keep 52px between layers, card radius 12px, and primary accents in #8a58c1.

### Quotes Block
Stacked testimonials in cards on #fcfcfd, body text #8b8d98. Author lines can increase weight or use #000033 for emphasis.

### Capability Matrix
A table comparing "Code you own / Traffic you can route / Connected vendor AI / Opaque vendor AI." Use 1px #000033 borders, 20px cell padding, and headline-xs (18px) for headers.

### Final Dual-CTA
"Start free" (Secondary) and "Get a demo" (Primary) side-by-side, 24px gap, with 52px section padding.

## Do's and Don'ts

- Do keep Primary actions in #8a58c1 and reserve #7c5bec for secondary accents or active states.
- Do space sections in multiples of 24–52px; keep cards at 16px internal padding to match the product shots.
- Do use the serif only for large headlines; all supporting headers and body should stay in the grotesk family.
- Don't introduce heavy shadows; use the sm shadow, borders #000033, or whitespace for hierarchy.
- Don't darken body copy by default—change color or weight only when accessibility or emphasis requires it.
- Don't round components beyond 12px; the system's visual voice relies on 8px and 12px corners.

## Agent Prompt Guide

Quick color reference
- Text: #8b8d98
- Background: #fcfcfd
- Border: #000033
- Accent (primary CTA): #8a58c1; Secondary accent: #7c5bec; Inline highlight: #bcacec

1) Hero section with serif headline and single CTA
- Background #fcfcfd. Container width typical desktop.
- Headline: 64px Made Awelier (or Playfair Display if unavailable), weight 400, line-height 1.2, letter-spacing -0.05em, color #1c2024 or keep body tone #8b8d98 per art direction.
- Subhead: 16px Inter (Neue Montreal substitute), line-height 1.5, color #8b8d98.
- Primary button: 32px height, 8px radius, padding 8px 16px, background #8a58c1, text #ffffff.
- Vertical spacing: 52px below headline, 24px to CTA.

2) Product demo tab card
- Card: 12px radius, 16px padding, background #fcfcfd, sm shadow rgba(0,0,0,0.05) 0 1px 3px.
- Tabs row: 18–20px Inter, inactive text #8b8d98; active tab underline or pill in #7c5bec.
- Outer gaps: 24px to surrounding sections.

3) Inline emphasis highlight for a phrase
- Wrap the target words in a span with background #bcacec, no border, 0px radius; optional x-padding 10px to make a soft band.
- Surrounding text: 64px Made Awelier (or Playfair Display), letter-spacing -0.05em.

4) Capability matrix table
- Header cells: 18px Inter, weight 500, text #1c2024.
- Body cells: 16px Inter, text #8b8d98.
- Grid: 1px borders in #000033, 20px cell padding, row gap 0.

5) Dual-CTA footer
- Section padding: 52px top/bottom.
- Buttons: Primary (#8a58c1) and Secondary (#ffffff text #1c2024 with 1px #000033 stroke if needed), both 32px high, 8px radius, 24px gap between.

## Similar Brands

- Datadog — Shares the violet accent and neutral UI; Openlayer is calmer with tighter typographic control and less illustration.
- Snyk — Security-forward tone and purple palette; Openlayer runs lighter surfaces and smaller, more conservative buttons.
- Anthropic — Minimal color and product-first sections; Openlayer adds enterprise-style tables and governance language.
- Snowflake — Clean enterprise storytelling with capability matrices; Openlayer relies more on serif display headlines and purple highlights.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #8b8d98;
  --color-secondary: #7c5bec;
  --color-tertiary: #8a58c1;
  --color-neutral: #fcfcfd;
  --color-border: #000033;
  --color-brand-purple-sand: #bcacec;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 64px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.2;
  --text-headline-lg-tracking: -0.05em;
  --text-headline-md-size: 62px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1;
  --text-headline-md-tracking: -0.06em;
  --text-headline-sm-size: 20px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.2;
  --text-headline-xs-size: 18px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.22;
  --text-body-md-size: 16px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --text-body-md-tracking: -0.011em;
  --font-madeawelier: "madeAwelier";
  --font-neuemontreal: "neueMontreal";

  /* Rounded */
  --radius-sm: 8px;
  --radius-md: 12px;

  /* Spacing */
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 52px;

  /* Components */
  --button-primary-background-color: var(--color-tertiary);
  --button-primary-text-color: #ffffff;
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 8px 16px;
  --button-primary-height: 32px;
  --button-secondary-background-color: #ffffff;
  --button-secondary-text-color: #1c2024;
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 8px 16px;
  --button-secondary-height: 32px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: var(--color-neutral);
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 16px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #8b8d98;
  --color-secondary: #7c5bec;
  --color-tertiary: #8a58c1;
  --color-neutral: #fcfcfd;
  --color-border: #000033;
  --color-brand-purple-sand: #bcacec;
  --color-surface: #fcfcfd;
  --color-on-surface: #8b8d98;
  --font-headline-lg: "madeAwelier";
  --font-headline-md: "madeAwelier";
  --font-headline-sm: "neueMontreal";
  --font-headline-xs: "neueMontreal";
  --font-body-md: "neueMontreal";
  --text-headline-lg: 64px;
  --text-headline-md: 62px;
  --text-headline-sm: 20px;
  --text-headline-xs: 18px;
  --text-body-md: 16px;
  --tracking-headline-lg: -0.05em;
  --tracking-headline-md: -0.06em;
  --tracking-body-md: -0.011em;
  --font-weight-headline-lg: 400;
  --font-weight-headline-md: 400;
  --font-weight-headline-sm: 400;
  --font-weight-headline-xs: 400;
  --font-weight-body-md: 400;
  --radius-sm: 8px;
  --radius-md: 12px;
  --spacing-xs: 2px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 24px;
  --spacing-xl: 52px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.545,
                    0.553,
                    0.596
                ],
                "hex": "#8b8d98"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.357,
                    0.925
                ],
                "hex": "#7c5bec"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.541,
                    0.345,
                    0.757
                ],
                "hex": "#8a58c1"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.988,
                    0.992
                ],
                "hex": "#fcfcfd"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0,
                    0,
                    0.2
                ],
                "hex": "#000033"
            }
        },
        "brand-purple-sand": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.737,
                    0.675,
                    0.925
                ],
                "hex": "#bcacec"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.988,
                    0.988,
                    0.992
                ],
                "hex": "#fcfcfd"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.545,
                    0.553,
                    0.596
                ],
                "hex": "#8b8d98"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 2,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 10,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 20,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 24,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 52,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 12,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "madeAwelier",
                "fontSize": {
                    "value": 64,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.05,
                    "unit": "em"
                }
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "madeAwelier",
                "fontSize": {
                    "value": 62,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.06,
                    "unit": "em"
                }
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "neueMontreal",
                "fontSize": {
                    "value": 20,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "neueMontreal",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "neueMontreal",
                "fontSize": {
                    "value": 16,
                    "unit": "px"
                },
                "fontWeight": 400,
                "letterSpacing": {
                    "value": -0.011,
                    "unit": "em"
                }
            }
        }
    }
}
```

## Rules

- **Fonts.** If the specification names a custom or self-hosted family, use one of the substitutes it names. Never reference a typeface you cannot actually load — it will fall back to a system font and undo the typography.
- **Colour.** Derive the palette from the user's brand. Use the token values as a guide to *relationships* — contrast, tint, how many accents carry the page — not as hex codes to paste.
- **Never reproduce** the wordmark, mascot, logo, brand name, illustrations, icon set, screenshots or any copy from the reference.
- **Never present the result as Openlayer**, or imply any connection to it.
- If something is unspecified, choose clarity and legibility over decoration.

More like this

Browse AI →
weaveos.com
Weave Analytics
Weave
stivio.ai
Stivio AI
Stivio
slite.com
Slite AI
Slite
clears.ai
Clears AI
Clears