Viewport uses a bright, airy workspace language: pure white canvas, generous breathing room, and a signature mint-teal surface that softens sections without darkening them. The entire chromatic story is a tight two-color duo — vivid indigo for actions and mint-teal for surfaces — connected by a cyan-to-violet gradient that lives only on the primary CTA. Typography is calm and geometric: HK Sentiments Bold for headlines at a whisper-heavy 700 weight, Silka for everything functional at 14–18px, tracking pulled tight across the scale. Components feel like smooth tiles: large 16px radii on cards, 12px on buttons, 100px pills for tags, and shadows that are either barely-there gray or a branded cyan glow — never neutral mid-tones. Layouts center a single headline per section, then let wide product screenshots do the work, often floating over the mint surface like sticky notes on a glass desk.
#4d4dffPrimary action buttons, active nav states, accent borders, heading highlights — the sole chromatic brand color, making every interactive element unmistakable; Primary CTA button fill — the only gradient in the system, flowing from cyan to indigo vertically
#c5fbeeSignature section surface — replaces gray for feature panels, product wrappers, and comparison cards; a soft teal that reads as a colored canvas rather than a colored card; Radial hero wash — cyan blooming into neutral gray for ambient atmosphere on showcase sections
#00caf2Gradient origin point and link glow shadow; appears only inside the cyan→indigo button gradient and the radial brand wash
#66dff7Soft cyan used as a link-focus glow ring; bridges Mint Whisper and the gradient endpoints
#000000Primary text, icons, hairline borders, and image outlines — used at high frequency for structural edges rather than fills
#ffffffPage canvas, card surfaces, button text on indigo fills
#f8f9faSecondary card and section surface — the next step up from pure white before reaching Mint Whisper
#c8c9cfMuted borders and dividers; structural edges that need to be visible but never assertive
#333333Deep accent for headings and section frames where pure black would feel too sharp
#7f8087Body helper text, link base color, icon fills, and secondary metadata — the de facto mid-neutral for prose
#e3e6ecTertiary card surface for grouped content blocks and inner panels
32px · 400 · 1.1 · -0.576px trackingThe quick brown fox jumps
28px · 700 · 1.2 · -0.476px trackingThe quick brown fox jumps
24px · 400 · 1.2 · -0.144px trackingThe quick brown fox jumps
18px · 400 · 1.2 · -0.198px trackingThe quick brown fox jumps
16px · 400 · 1.3 · -0.176px trackingThe quick brown fox jumps
14px · 400 · 1.2 · -0.144px trackingThe quick brown fox jumps
12px · 400 · 1.2 · 0px trackingThe quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Silka SemiBold — detected in extracted data but not described by AI
Display and section headings — a bold serif-adjacent sans that carries the voice of headlines, tightened by negative tracking
All UI text, body copy, button labels, and inline links — a neutral geometric sans for the functional layer
Accent italic for emphasized phrases inside body copy
Micro UI text — tag labels, fine print, timestamp-style metadata
Silka Regular — detected in extracted data but not described by AI
Silka Medium Italic — detected in extracted data but not described by AI
100px16px8px12px20px1px2px8px10px11px12px14px16px20px24px32px40px54px60px72px80px100px120pxVertical cyan-to-indigo gradient (rgb(0,202,242) → rgb(77,77,255)), white text in Silka Medium 16px, 12px corner radius, padding 12px 24px, no border, subtle drop shadow rgba(0,0,0,0.25) 0 8px 16px. This is the brand's loudest element and should appear once per section at most.
Transparent fill, 1px solid #000000 border, 12px radius, Silka Medium 14px in #000000, padding 8px 16px. Sits in the top nav next to the gradient CTA.
100px pill radius, #e3e6ec background, uppercase Silka SemiBold 12px in #4d4dff, padding 6px 14px. Marks the topic of the next section in a soft chip.
Two side-by-side cards with 16px radius, 24px padding, #f8f9fa background. Each contains a screenshot frame with a small circular status badge centered above (red #ff4d4d X or indigo #4d4dff check), plus a short caption in Silka Regular 14px #333333.
Full-bleed #c5fbee background, generous 64px vertical padding, centered product screenshot framed inside a white card with 16px radius and a soft drop shadow. The mint surface replaces the typical gray section.
White card, 16px radius, 1px hairline border in #c8c9cf, inner padding 0 (image bleeds to edges), drop shadow rgba(0,0,0,0.1) 0 15px 20px -5px. Always centered inside a Mint Feature Panel.
Wide card with multi-image grid inside, 20px radius, layered over a cyan radial wash background. Contains labeled sub-panels in white with their own 12px radius and small captions.
40px circle, solid fill in #4d4dff (positive) or warm red (negative), white icon centered, drops with 8px gap above the card. Sits like a sticker.
White background, no border, 64px height, flex row with logo left, links centered in Silka Medium 14px #333333, CTA pair right-aligned. Sticky behavior assumed for long pages.
Stacked Silka Regular 14px links in #7f8087 with 10px row gap, 24px column gap between groups. Group headings in Silka SemiBold 12px uppercase in #333333.
Centered stack: HK Sentiments Bold 28-32px in #000000 with -0.476 to -0.576px letter-spacing, optional one-line subtitle in Silka Regular 18px #7f8087. Vertical rhythm 16px between lines.
Silka Regular 14px in #7f8087, 1px dotted underline in #7f8087, hover state adds the cyan glow ring rgba(0,202,242,0.6) 0 4px 12px around the text.
#ffffffDefault page background
#f8f9faSection separators and quiet content blocks
#e3e6ecTertiary grouped panels
#c5fbeeSignature feature surface and product wrapper
rgba(0, 0, 0, 0.1) 0px 15px 20px -5px
rgba(0, 0, 0, 0.25) 0px 8px 16px 0px
rgba(0, 202, 242, 0.6) 0px 4px 12px 0px
Page is max-width 1200px centered with a fixed top nav. The hero opens as a centered single-column stack: eyebrow-style headline in HK Sentiments Bold 32px, a one-sentence subtitle in Silka Regular 18px #7f8087, then the gradient CTA, then a two-column comparison row with 24px gap. Sections alternate between white canvas and Mint Whisper (#c5fbee) full-bleed bands, separated by 64px vertical padding. Each feature section follows the same pattern: optional tag pill, centered heading block, then a single wide product frame or 2–3 column grid of product previews. Navigation is a minimal sticky top bar — no sidebar, no mega-menu. Content density stays low; each section claims the full viewport-width with generous breathing room rather than packing information side by side.
Product screenshots dominate the visual language — real UI captures of the Viewport board, asset library, and brand kit views, not abstract mockups. Screenshots are presented as floating white cards on the mint surface with hairline borders and soft shadows, never with gradients or color overlays applied to them. The only non-product imagery is contained inside the screenshots themselves (design samples in green-teal palettes). No lifestyle photography, no people, no hero illustration — the product IS the hero. Icons are minimal and outlined, using the same #4d4dff or #000000 as surrounding text. Decorative graphics are limited to the cyan radial wash behind the brand showcase carousel.
primary action: #4d4dff (filled action) Create a Primary Action Button: #4d4dff background, #ffffff text, 9999px radius, compact pill padding. Use this filled treatment for the main CTA. Example Component Prompts: 1. Build a hero CTA: vertical gradient from #00caf2 to #4d4dff, white Silka Medium 16px label, 12px radius, 12px 24px padding, drop shadow rgba(0,0,0,0.25) 0 8px 16px. 2. Build a Mint Feature Panel: full-width #c5fbee background, 64px vertical padding, centered HK Sentiments Bold 28px #000000 heading with -0.476px tracking, then a white product frame (16px radius, 1px #c8c9cf border, shadow rgba(0,0,0,0.1) 0 15px 20px -5px) containing a product screenshot. 3. Build a section tag pill: 100px radius, #e3e6ec fill, uppercase Silka SemiBold 12px in #4d4dff, 6px 14px padding. 4. Build a before/after comparison card: 16px radius, #f8f9fa fill, 24px padding, a 40px circular status badge (red or indigo) floating 8px above the card center, product screenshot inside, and a Silka Regular 14px #333333 caption below.
Gradients are rationed — there are exactly two in the entire system. The CTA gradient flows vertically from cyan rgb(0,202,242) at 0% to indigo rgb(77,77,255) at 100%, used only on the highest-priority filled button per page. The radial wash is a cyan bloom (rgba(0,202,242,0.3)) expanding from the bottom-center into a neutral gray (rgb(241,243,245)), used only as an ambient backdrop for the brand showcase carousel. No other gradients, no diagonal sweeps, no multicolor decorations.
Same light-canvas-plus-one-vivid-accent approach with generous section spacing and product-screenshot-led layouts
Quiet white surfaces, minimal chrome, and product screenshots treated as floating tiles with soft shadows
Tight typographic scale with negative letter-spacing on bold headings and a single saturated brand color that does the work of a palette
Creative-tool marketing pages that lead with centered hero copy, before/after visual storytelling, and wide product preview frames
Use the design exports or connect Musterlab to your AI.
