Stark operates as a confident accessibility-infrastructure brand sitting on a dual-surface canvas: a deep midnight-navy hero that crashes into a warm cream secondary field, linked by a vivid violet primary action and a mustard-yellow highlighter that reads like a teacher's marking pen. The type system is anchored by ArminGrotesk at its heaviest possible weight (900) for hero display — the 110px headline is not a statement, it is a wall — then steps down through 56/48/28/24/20/16/14 with tight negative tracking (-0.02em) that pulls large letters into a single sculpted block. Yellow is not decoration; it marks emphasis inside running copy (the diagonal-split gradient) and signals one specific action. Violet is the chromatic engine: CTA fills, card borders, icon accents, active states. Everything else stays in a narrow achromatic corridor of #000, #fff, and #e5e7eb hairlines, so the two chromatic colors always read with maximum signal.
#10284bHero background, primary headings, footer surface — the dominant brand color establishes authority and anchors the dark-to-light page split. Used as a background field for the above-the-fold section and as body-text color on the cream secondary surface
#381fd1Primary action fills (Get started, Sign up, Request demo), card border accents, active nav state, decorative icon strokes, and inline emphasis text. The vivid violet against midnight navy creates a switched-on, electric feel without aggression
#fedb63Diagonal text-highlight gradient fill, one specific secondary CTA, and illustration accent. Yellow never decorates broadly — it marks, underlines, and punctuates specific words within dark-on-light headlines
#e5e0ffSoft button surface variant, gentle tinted card backgrounds. A desaturated wash of the violet brand that softens interactive elements without competing with the primary action
#99d6ccDecorative illustration accent in feature cards and dashboard widgets. Used sparingly in flat geometric shapes within artwork, not in core UI controls
#faf5ffLightly purple-tinted near-white page background. The faint violet cast unifies the cream and white surfaces under one chromatic family
#f6f6ebSecondary section surface and body-text color on the dark hero. The warm greenish-cream provides a relaxed counterpoint to the midnight navy and is the dominant body-text/link color on the dark section
#000000Body text on light surfaces, icon strokes, and high-contrast elements. Not used as a background — the system prefers the midnight navy for darkness
#ffffffText on dark hero, card surfaces, nav backgrounds, product screenshot frames. The bright surface that holds product imagery and dashboard content
#e5e7ebUniversal border color for cards, inputs, dividers, link underlines, and structural separators. The single achromatic border workhorse
110px · 900 · 1.1 · -2.2px trackingThe quick brown fox jumps
56px · 900 · 1.1 · -0.56px trackingThe quick brown fox jumps
48px · 900 · 1.1 · -0.48px trackingThe quick brown fox jumps
28px · 900 · 1.5 · 0px trackingThe quick brown fox jumps
24px · 900 · 1.5 · 0px trackingThe quick brown fox jumps
20px · 400 · 1.7 · 0.4px trackingThe quick brown fox jumps
16px · 400 · 1.5 · -0.16px trackingThe quick brown fox jumps
14px · 900 · 1.43 · -0.28px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
The single custom typeface carries the entire brand voice. Weight 900 is the hero display weapon (110px headline) — used at maximum volume for the opening statement. Weight 600 handles section headings and subheadings (24-48px). Weight 500 is the button and label workhorse. Weight 400 is body text. The geometric grotesque construction gives a contemporary, slightly technical authority.
All-caps eyebrow labels and section markers (e.g., 'EXPLORE THE STARK PLATFORM', 'SPEED UP DESIGN & DEV'). The monospaced mono with wide tracking creates a distinct utilitarian signal that sits above the display heading and below the nav — a consistent navigational breadcrumb layer.
6px12px20px6px40px4px6px8px12px14px16px17px24px32px40px48px56px64px80px96px144px188px233pxFilled button with #381fd1 background, white text, ArminGrotesk 500 at 16px, 6px border-radius, 8px vertical × 24px horizontal padding. Used for 'Sign up for free', 'Get started for free'. The vivid violet against both midnight navy and cream fields makes the action immediately findable.
Filled button with #fedb63 background, midnight navy text, ArminGrotesk 500 at 16px, 6px border-radius, same padding as primary. Appears once on the dark hero to provide a second action path that doesn't compete with the main violet CTA.
Transparent fill, 1px white border, white text, 6px border-radius, used for 'Request Demo' in the nav. Minimal weight that recedes behind the primary yellow or violet action.
Small uppercase tag with ArminGrotesk 600 or RobotoMono 700 at 13-14px, 0.08em tracking. 20px border-radius for fully rounded pill shape. Violet text on light, white text on dark. Used above feature card titles and on the 'Team Project' avatar-group label.
Compact card floating over the midnight hero, showing a large number (e.g., '120', '641') in white with a label below. Contains a small icon (lightning bolt) and sits with partial transparency over the dotted chart pattern.
Three vertically stacked rows with colored dot indicators (violet, violet, teal) and labels: Violations, Potential Violations, Passed Checks. Semi-transparent dark background with white text, 8px padding between rows.
White card with subtle shadow, housing actual product UI. Desktop frames are wide rectangles with 12px radius; mobile frame is a phone-shaped rounded rectangle. Positioned with intentional overlap to create depth.
Each card contains: an isometric/geometric flat illustration (teal, yellow, violet, navy palette) at top, a small uppercase violet label, a bold navy heading at 24px, and body text at 16px. 40px border-radius, generous internal padding, no visible border or shadow — relies on the illustration as visual anchor.
Horizontal bar on midnight navy background. Left: logo (circular leaf icon). Center: nav items in white uppercase with dropdown carets. Right: 'LOG IN' text link and outlined 'Request Demo' button. Sits over the dark hero without separate background fill.
Specific words within a headline get a diagonal yellow highlighter effect via the linear-gradient(to right bottom, transparent 50%, #fedb63 50%) technique. Creates the impression of a marker pen swipe. Also available in violet variant for secondary emphasis.
Stack of 3-4 circular avatars (overlapping) followed by a pill-shaped label reading 'Team Project' in violet. Sits inline with hero copy as a trust signal.
Grid of small dots and vertical bar shapes in lighter purple/lilac tones, scattered across the bottom of the dark hero. Creates data-visualization atmosphere without literal chart content.
#10284bFull-bleed dark navy above the fold, with decorative dot/bar chart pattern in lighter purple
#faf5ffPrimary light background for the body of the page, faintly violet-tinted
#f6f6ebAlternating warm-cream band that provides visual contrast and houses feature sections
#ffffffElevated white cards for product screenshots, stat displays, and content blocks
0 20px 60px rgba(16, 40, 75, 0.15)
0 8px 32px rgba(0, 0, 0, 0.2)
The page follows a dark-to-light vertical split. The hero is a full-bleed midnight-navy section with centered copy (headline at 110px, body text below, single yellow CTA), flanked by floating stat cards and avatar groups positioned asymmetrically. Below the fold, the layout transitions to a cream (#f6f6eb) band containing overlapping product screenshots (desktop, detail, mobile) arranged in a z-composition with intentional overlap. Feature sections use a max-width 1200px centered container with 4-column card grids on desktop. Each section begins with a centered uppercase eyebrow label, a large two-line headline (with yellow-highlighted phrase), and optional subtext. The rhythm alternates between tight, information-dense product-screenshot sections and spacious 4-column feature grids with 56px vertical gaps. Navigation is a flat top bar over the dark hero with no sticky behavior or shadow.
The visual language is split between two modes. On the dark hero, the imagery is abstract: a field of dots and vertical bars in lighter lilac/purple that suggests a data-visualization chart without committing to literal content. On the light sections, the imagery is functional: real product screenshots (desktop dashboard with charts, a detailed scan-results panel, and a mobile app showing project lists) float in white frames with subtle shadows. Feature cards use flat, isometric-style geometric illustrations built from simple shapes (rectangles, circles, arrows, document icons) in a controlled palette of teal, yellow, violet, and midnight navy. No photography of people or environments appears — the product UI and abstract data patterns are the entire visual vocabulary. Iconography is minimal: simple line icons in the stat cards and feature illustrations, with stroke weight proportional to their container size.
**Quick Color Reference** - Text (light surfaces): #000000 - Text (dark hero): #ffffff - Page background: #faf5ff - Cream section: #f6f6eb - Border: #e5e7eb - primary action: #381fd1 (filled action) - Highlighter accent: #fedb63 **3 Example Component Prompts** 1. *Hero Headline with Yellow Highlight*: Create a hero section on #10284b background. Display headline 'Digital accessibility compliance on autopilot' in ArminGrotesk weight 900 at 110px, color #ffffff, letter-spacing -2.2px, line-height 1.10. Apply the word 'autopilot' with a diagonal yellow highlighter using background: linear-gradient(to right bottom, transparent 50%, #fedb63 50%). Below: body text in ArminGrotesk 400 at 20px, color #f6f6eb, max-width 600px centered. 2. *Violet Primary CTA Button*: Create a filled button with #381fd1 background, white text in ArminGrotesk 500 at 16px, 6px border-radius, 8px padding-top, 8px padding-bottom, 24px padding-left, 24px padding-right, letter-spacing 0.32px. No border, no shadow. Label: 'Get started for free'. 3. *Feature Card Grid Item*: Create a card on #faf5ff background with 40px border-radius, 24px padding. Top: flat geometric illustration using #99d6cc, #fedb63, #381fd1, and #10284b. Below illustration: uppercase label in RobotoMono 700 at 13px, color #381fd1, letter-spacing 1.04px. Then: heading in ArminGrotesk 600 at 24px, color #10284b. Then: body text in ArminGrotesk 400 at 16px, color #000000, line-height 1.50.
The gradient vocabulary is minimal and purposeful: two diagonal split-gradients that create the highlighter-pen effect under text. The yellow variant (transparent → #fedb63) is the primary emphasis tool, used on words inside headlines on the cream/light sections. The violet variant (transparent → #381fd1) is the secondary emphasis tool for less critical highlights. Both use the same 50%/50% diagonal split via 'to right bottom' or 'to left top' direction. No radial gradients, no multi-stop brand gradients, no decorative mesh — the gradient system is a single-purpose marking tool.
The palette enforces a strict 3-tier hierarchy. Tier 1 (Midnight Navy #10284b) is the structural foundation — hero background, all headings on light surfaces, and the brand's gravitational center. Tier 2 (Stark Violet #381fd1) is the interactive engine — every clickable primary action, every card border accent, every active state. Tier 3 (Highlighter Yellow #fedb63) is the emphasis marker — one word at a time, never decorative. Everything else is achromatic or near-achromatic supporting cast. This hierarchy means a user scanning the page sees: dark structure → violet actions → yellow marks → gray text. Violation of this order (e.g., yellow body text, violet headings) breaks the reading rhythm.
Same geometric grotesque display typography at maximum weight for hero headlines, single vivid accent color, and clean hairline-border card aesthetic on near-white backgrounds
Similar dark-to-light page split with full-bleed colored hero section transitioning to white/cream product content areas, plus confident oversized headline scale
Shared approach of vivid chromatic CTA button as the single bright interactive element against neutral surfaces, with display-typeface hero at extreme weight and size
Similar product-screenshot-on-light-canvas presentation with floating overlapping frames, uppercase eyebrow labels above section headings, and high-contrast dark hero opening
Use the design exports or connect Musterlab to your AI.
