Stape

Overview

Stape is a server-side tracking platform designed for digital agencies and businesses seeking to simplify GTM implementation without technical friction. The design system embodies 'Technical Clarity'—a philosophy that marries precision-driven interfaces with warm, approachable visual language. The brand uses a vibrant teal-green primary (#44b58f) paired with a secondary sky-blue (#37b0f6) and accent orange (#ff6d34) to inject energy and confidence into what is inherently a complex technical domain. The UI evokes a sense of control and transparency: users feel empowered to manage their tracking infrastructure, not overwhelmed by it.

The voice is direct, jargon-aware but never gatekeeping, and optimistic without being breathless. Stape speaks to practitioners who understand the stakes of data quality and cookie deprecation, but frames solutions as achievable, not daunting. Example sentence in brand voice: 'Recover conversions lost to tracking restrictions—no engineering team required.'

Colors

The color system is anchored by a primary teal-green (#44b58f) used exclusively for call-to-action buttons, interactive focus states, and key brand moments. This color appears on the hero 'Try for free' button and all primary CTAs, signaling trust and growth. Secondary blue (#37b0f6) supports secondary actions and highlights, appearing in accent underlines and supporting UI elements. Tertiary orange (#ff6d34) is reserved for emphasis, alerts, and decorative accents (e.g., the underline on 'complete data' in the hero). The surface stack is built on pure white (#ffffff) for the main canvas, with a subtle off-white (#f8f9fa) for container backgrounds and a mint-tinted container (#effffd) for elevated surfaces. Text is consistently rendered in near-black (#1e1f1e) for maximum legibility at 16p

Typography

The type system pairs Source Code Pro (a geometric monospace font) for headlines and display text with Prompt (a humanist sans-serif) for body and UI labels. This pairing creates visual tension that reinforces the brand's 'technical yet approachable' positioning: the monospace headlines signal precision and code-like clarity, while Prompt's rounded letterforms soften the interface and invite engagement. Headlines use weights 700 at sizes 52px–60px with tight line-height (60–68px) and negative letter-spacing (-0.02em to -0.04em) to create visual impact and hierarchy. Body text is set at 16px–18px in Prompt 400 with 24px–28px line-height for comfortable reading. Labels and buttons use Prompt 600–700 at 12px–14px with 0.01em–0.05em letter-spacing to add subtle emphasis. On small labels over b

Layout

The page grid is a 12-column fluid layout with a max-width of 1280px, centered with auto margins. Section spacing follows a consistent rhythm: lg spacing (40px) separates major sections (hero, features, testimonials), while md spacing (24px) is used for card-to-card gaps and internal component padding. The gutter (24px) is applied to left/right margins on mobile and tablet, scaling to 40px on desktop. Container backgrounds use the surface-container (#effffd) or surface-container-low (#f8f9fa) to create visual breathing room without introducing new colors. The hero section spans full-width with a light mint background, centering the headline and CTA form with max-width 800px. Cards are arranged in a 3-column grid on desktop, collapsing to 2 columns on tablet and 1 on mobile. Whitespace is g

Elevation & Depth

Depth is conveyed through a subtle shadow system and layered surface colors rather than dramatic drop shadows. Level 1 (Base): the white surface (#ffffff) with no shadow, used for the main canvas and card backgrounds. Level 2 (Elevated Cards): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), applied to cards, input fields, and modals; background remains white or shifts to surface-container (#effffd). Level 3 (Floating/Hover): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied on card hover or when a modal is active; background may shift to surface-container-high (#e0e3e6). All shadows use a 15–20%

Shapes

The shape philosophy is 'Geometric Precision with Warmth'—most UI elements use sharp 0px border-radius (square corners) to reinforce the technical, code-like nature of the platform, while interactive elements and badges use subtle rounding (0.75rem–1.5rem) to humanize the interface. Buttons use 0px radius, creating a clean, architectural feel that echoes the monospace headlines. Input fields also use 0px radius, signaling that they are functional, no-nonsense components. Cards use 0px radius by default, but elevated cards (on hover) may shift to 0.75rem (12px) to signal interactivity. Badges a

Components

Action Elements Buttons are the primary interaction pattern. The primary button uses background #44b58f, white text, Prompt 700 at 14px, padding 12px 24px, and 0px radius. On hover, the background darkens to #3a9d7a with a 200ms transition. The secondary button uses a transparent background with a 1px border in outline-variant (#c9cfd4), same padding and typography, and shifts to surface-container-low (#f8f9fa) on hover. Ghost buttons (for tertiary actions) use transparent background and primary text color, shifting to primary-container (#cef0ec) on hover. All buttons maintain a 48px minimum height for touch targets. Focus states apply a 3px outline in primary-container with 100% opacity.

Containers & Surfaces Cards are the primary content container, using white background, 1px bo

Do's and Don'ts

**Do**

• Do use the primary teal (#44b58f) exclusively on CTAs and interactive focus states—it is the brand's signature and must remain distinctive.
• Do pair Source Code Pro headlines with Prompt body text to reinforce the 'technical yet approachable' positioning; never use a single sans-serif stack for all text.
• Do maintain 0px border-radius on buttons, inputs, and cards to preserve the geometric precision aesthetic; reserve rounding for badges and secondary UI only.
• Do apply 200ms ease-in-out transitions on all hover and focus state changes to signal responsiveness without feeling sluggish.
• Do use the lg spacing (40px) to separate major sections and create visual breathing room; whitespace is a feature, not a bug.
• Do apply the elevation shadow system (0 3px 8px for Level 2, 0 8px 24px for Level 3) consistently to create depth without visual noise.

**Don't**

• Don't use secondary blue (#37b0f6) or orange (#ff6d34) on primary CTAs—these are supporting accents and will dilute the primary brand signal.
• Don't apply border-radius to buttons or inputs; the sharp corners are intentional and distinctive to the brand.
• Don't use system fonts or generic sans-serif fallbacks; always specify Prompt and Source Code Pro with proper @font-face declarations.
• Don't exceed 200ms transition timing on interactive elements; faster feels snappy, slower feels sluggish.
• Don't mix elevation shadow values; use only the three defined levels (sm, md, lg) to maintain visual consistency.
• Don't apply more than one accent color (primary, secondary, or tertiary) to a single interactive element; let each color own its role.