Skip to content
DesignMunkDesignMunk Submit a site

Stigg

stigg.io
Every AI request is a spend decision—make it in milliseconds.
AI Developer Tools Webflow Homepage Soehne Buch Soehne Leicht
Share Visit site
stigg.io DESKTOP · 1440
Stigg

AI Breakdown

Design export

# Design brief: the Stigg 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/04182239/stigg-1440x11772.webp
- Above the fold: https://cdn.designmunk.com/2026/09/04182239/stigg.webp
- On DesignMunk: https://designmunk.com/stigg/

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

# Stigg: Dual-CTA Hero Over a Neon Usage Field

## Overview

Stigg's UI is dark, technical, and concise — built to speak to engineering teams evaluating runtime enforcement. The tone is serious and enterprise-ready, with copy that foregrounds speed, throughput, and governance. Layouts are spacious but information-dense, using compact stats and terse subheads. Accent color is sparing; most of the contrast comes from white type on near-black surfaces.

## Colors

- **primary (#ffffff):** Primary text and icon color on dark surfaces; also used for the solid primary button.
- **secondary (#98ea8c):** Accent mint for highlights, data points, and decorative particles.
- **tertiary (#92e759):** Brighter lime accent for secondary highlights and animated dots; use sparingly.
- **neutral (#131512):** Core page background for dark mode.
- **border (#393a38):** Hairline separators, input outlines, and card strokes.
- **brand-leafy-lichen (#7c8474):** Muted green-gray for subtle brand flourishes and low-priority accents.
- **surface ({colors.neutral} → #131512):** Base surface color for sections and containers.
- **on-surface ({colors.primary} → #ffffff):** Default on-surface text/icon color.

## Typography

Headlines use Soehne Buch at three display sizes plus a compact subhead: headline-lg 62px/1.07, headline-md 45px/1.2, headline-sm 33px/1.21, headline-xs 24px/1.21 — all at weight 400 for a calm, confident tone. Body copy is Soehne Leicht 18px/1.5 at weight 400 for continuous reading on dark backgrounds.
Availability: both Soehne Buch and Soehne Leicht are custom/self-hosted and not auto-loadable from Google. Use substitutes with similar modern grotesk geometry when the brand files aren't available: Inter (Google), IBM Plex Sans (Google), or Manrope (Google). Keep weights at 400 to preserve the light-handed voice, and prefer tight line heights on headlines as specified.

## Layout

Spacing follows a compact-to-generous scale: 8, 16, 30, 50, 66px. Use xs/sm (8/16) for intra-component padding and pill gaps; md (30) for block spacing inside sections; lg/xl (50/66) for section padding and between major modules. Layouts generally read as a 12-column grid with left-aligned content and a visual canvas on the right in the hero. Stat rows and tab groups snap to the same rhythm for predictable scanning.

## Elevation & Depth

Shadows are not used. Hierarchy is created with tonal steps (neutral #131512 background, card surface #151a16), hairline borders in #393a38, and generous negative space. Interactive states rely on border/tonal shifts and accent greens rather than depth effects.

## Shapes

Corners are minimally rounded to keep the enterprise tone. Buttons use sm radius 4.1px; cards use md radius 6px. Small radii signal click targets without softening the overall, hardware-grade aesthetic.

## Components

Buttons and card primitives:
- Primary button: background #ffffff, text #131512, height 55px, padding 7.18236px 14.3647px, radius 4.1px. Use for the main CTA ("Install with AI").
- Secondary button: transparent on dark with #ffffff text, same 55px height and padding, radius 4.1px. Use for the conversational CTA ("Talk to a Human").
- Link button: text-only in #ffffff, no radius.
- Card: background #151a16, text #ffffff, padding 20px 26px, radius 6px; add a #393a38 border when separation is needed.

Distinctive modules on this page:
### Announcement Bar
A slim, full-width strip above the nav with #98ea8c accents for acquisition news and a link.
### Hero with Particle Field
Left column: headline-lg 62px and body-md 18px, followed by a dual-CTA group (primary + secondary). Right column: animated field of white/mint/lime dots.
### Stat Pill Row
Compact pills listing p99 < 10ms, 1M+ events/sec, 1M+ entities, and BYOC. Use #393a38 borders and #98ea8c/#92e759 for key numerals or "NEW".
### Anchor Section Rail
A five-item rail ("01 Enforcement" → "05 Governance") linking to in-page sections; small caps styling with tight spacing.
### Testimonial Quote
Customer quote set in body-md with a bolded name/role label; place inside a low-contrast surface or card to contain long copy.
### Deployment Tabs
Three tabs (Cloud API, BYOC, BYODB). Active tab uses a mint underline or text tint; content sits in a card surface #151a16.
### Integration Matrix Strip
A subdued logo strip and a short bulleted list explaining "Stigg works with your existing billing stack," accompanied by a docs link.
### Status Indicator in Footer
A small "All systems normal" line aligned with the footer links; treat as a tertiary, unobtrusive element.

## Do's and Don'ts

- Do keep text in #ffffff on #131512 surfaces; reserve #98ea8c/#92e759 for highlights, metrics, and indicators.
- Do size the primary H1 at 62px/1.07 (weight 400) and preserve the dual-CTA pattern with 55px-tall buttons.
- Do separate sections with #393a38 borders or a shift to #151a16 — not drop shadows.
- Don't fill large panels with mint or lime; accents should never become backgrounds.
- Don't round corners beyond 6px; excessive curvature breaks the industrial tone.
- Don't introduce new button sizes; keep padding 7.18236px 14.3647px for consistency across CTAs.

## Agent Prompt Guide

Quick reference — Text: #ffffff; Background: #131512; Border: #393a38; Accent: #98ea8c (mint) and #92e759 (lime). Headline font: "Soehne Buch" 400 (or Inter 400). Body font: "Soehne Leicht" 400 (or IBM Plex Sans 400).

1) Build a dark hero
- Page background #131512. Left column: H1 set to 62px/1.07 in "Soehne Buch" 400 (fallback Inter 400), color #ffffff; paragraph 18px/1.5 in "Soehne Leicht" 400 (fallback IBM Plex Sans 400), color #ffffff.
- CTA group: primary button 55px tall, radius 4.1px, background #ffffff, text #131512; secondary button 55px, radius 4.1px, transparent background, text #ffffff, 1px border #393a38.
- Right column reserved for a canvas; sprinkle accent dots in #98ea8c and #92e759.

2) Create a stat pill row
- Four pills on one line, gap 16px. Each pill has a 1px border #393a38, background #151a16, radius 6px, padding 8px 16px.
- Label in #ffffff (18px), key numeral in #98ea8c. Include a small "NEW" badge in #92e759 if needed.

3) Deployment tabs section
- Section background #131512 with top/bottom padding 50px.
- Tab list horizontally aligned; active tab text #98ea8c with a 2px underline #98ea8c; inactive tabs #ffffff at 70% opacity.
- Content panel is a card: background #151a16, radius 6px, 1px border #393a38, padding 20px 26px.

4) Testimonial card
- Card background #151a16, radius 6px, 1px border #393a38, padding 20px 26px.
- Quote set in 18px/1.5 #ffffff; author name on a separate line with a mint accent #98ea8c for the role.

## Similar Brands

- Vercel — dark developer aesthetic with restrained color; Stigg pushes lime accents and data pills more assertively.
- Stripe — polished dark marketing and technical diagrams; Stigg is more utilitarian, using stats and tabs over gradients.
- OpenAI — black canvas and minimal type; Stigg adds stronger enterprise framing and runtime metrics.
- Datadog — dense metric cards and integrations story; Stigg is darker and leans on green accents instead of purple.

## Tokens

### CSS custom properties

```css
:root {
  /* Colors */
  --color-primary: #ffffff;
  --color-secondary: #98ea8c;
  --color-tertiary: #92e759;
  --color-neutral: #131512;
  --color-border: #393a38;
  --color-brand-leafy-lichen: #7c8474;
  --color-surface: var(--color-neutral);
  --color-on-surface: var(--color-primary);

  /* Typography */
  --text-headline-lg-size: 62px;
  --text-headline-lg-weight: 400;
  --text-headline-lg-leading: 1.07;
  --text-headline-md-size: 45px;
  --text-headline-md-weight: 400;
  --text-headline-md-leading: 1.2;
  --text-headline-sm-size: 33px;
  --text-headline-sm-weight: 400;
  --text-headline-sm-leading: 1.21;
  --text-headline-xs-size: 24px;
  --text-headline-xs-weight: 400;
  --text-headline-xs-leading: 1.21;
  --text-body-md-size: 18px;
  --text-body-md-weight: 400;
  --text-body-md-leading: 1.5;
  --font-soehne-buch: "Soehne Buch";
  --font-soehne-leicht: "Soehne Leicht";

  /* Rounded */
  --radius-sm: 4.1px;
  --radius-md: 6px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 30px;
  --spacing-lg: 50px;
  --spacing-xl: 66px;

  /* Components */
  --button-primary-background-color: var(--color-primary);
  --button-primary-text-color: var(--color-neutral);
  --button-primary-rounded: var(--radius-sm);
  --button-primary-padding: 7.18236px 14.3647px;
  --button-primary-height: 55px;
  --button-secondary-text-color: var(--color-primary);
  --button-secondary-rounded: var(--radius-sm);
  --button-secondary-padding: 7.18236px 14.3647px;
  --button-secondary-height: 55px;
  --button-link-text-color: var(--color-primary);
  --button-link-rounded: 0px;
  --card-background-color: #151a16;
  --card-text-color: var(--color-primary);
  --card-rounded: var(--radius-md);
  --card-padding: 20px 26px;
}
```

### Tailwind theme

```css
@theme {
  --color-primary: #ffffff;
  --color-secondary: #98ea8c;
  --color-tertiary: #92e759;
  --color-neutral: #131512;
  --color-border: #393a38;
  --color-brand-leafy-lichen: #7c8474;
  --color-surface: #131512;
  --color-on-surface: #ffffff;
  --font-headline-lg: "Soehne Buch";
  --font-headline-md: "Soehne Buch";
  --font-headline-sm: "Soehne Leicht";
  --font-headline-xs: "Soehne Leicht";
  --font-body-md: "Soehne Leicht";
  --text-headline-lg: 62px;
  --text-headline-md: 45px;
  --text-headline-sm: 33px;
  --text-headline-xs: 24px;
  --text-body-md: 18px;
  --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: 4.1px;
  --radius-md: 6px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 30px;
  --spacing-lg: 50px;
  --spacing-xl: 66px;
}
```

### Design tokens (DTCG)

```json
{
    "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
    "color": {
        "$type": "color",
        "primary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        },
        "secondary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.596,
                    0.918,
                    0.549
                ],
                "hex": "#98ea8c"
            }
        },
        "tertiary": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.573,
                    0.906,
                    0.349
                ],
                "hex": "#92e759"
            }
        },
        "neutral": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.075,
                    0.082,
                    0.071
                ],
                "hex": "#131512"
            }
        },
        "border": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.224,
                    0.227,
                    0.22
                ],
                "hex": "#393a38"
            }
        },
        "brand-leafy-lichen": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.486,
                    0.518,
                    0.455
                ],
                "hex": "#7c8474"
            }
        },
        "surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    0.075,
                    0.082,
                    0.071
                ],
                "hex": "#131512"
            }
        },
        "on-surface": {
            "$value": {
                "colorSpace": "srgb",
                "components": [
                    1,
                    1,
                    1
                ],
                "hex": "#ffffff"
            }
        }
    },
    "spacing": {
        "$type": "dimension",
        "xs": {
            "$value": {
                "value": 8,
                "unit": "px"
            }
        },
        "sm": {
            "$value": {
                "value": 16,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 30,
                "unit": "px"
            }
        },
        "lg": {
            "$value": {
                "value": 50,
                "unit": "px"
            }
        },
        "xl": {
            "$value": {
                "value": 66,
                "unit": "px"
            }
        }
    },
    "rounded": {
        "$type": "dimension",
        "sm": {
            "$value": {
                "value": 4.1,
                "unit": "px"
            }
        },
        "md": {
            "$value": {
                "value": 6,
                "unit": "px"
            }
        }
    },
    "typography": {
        "headline-lg": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Soehne Buch",
                "fontSize": {
                    "value": 62,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Soehne Buch",
                "fontSize": {
                    "value": 45,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-sm": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Soehne Leicht",
                "fontSize": {
                    "value": 33,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "headline-xs": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Soehne Leicht",
                "fontSize": {
                    "value": 24,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        },
        "body-md": {
            "$type": "typography",
            "$value": {
                "fontFamily": "Soehne Leicht",
                "fontSize": {
                    "value": 18,
                    "unit": "px"
                },
                "fontWeight": 400
            }
        }
    }
}
```

## 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 Stigg**, 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