Ssscript

Overview

Ssscript is a developer-focused AI launchpad for Webflow that embodies a "Technical Minimalism" aesthetic—where precision, clarity, and dark-mode sophistication converge to create an interface that feels both powerful and approachable. The brand serves technical builders, designers, and developers who demand control over custom code, MCP integration, and deployment pipelines without sacrificing visual elegance. The UI evokes a sense of calm competence: every element is intentional, every interaction is predictable, and the dark canvas (#000000) with bright white text (#fefefe) and electric blue accents (#146ef5) creates a high-contrast, low-fatigue environment optimized for extended work sessions.

The voice is direct, technical, and confident—never marketing-speak, always precise. Ssscript speaks in the language of builders: "Agentic Control," "Embedded Knowledge," "Deployment Pipeline." The tone avoids breathlessness; instead, it conveys mastery and reliability. Example sentence in brand voice: "Deploy your Webflow project with full agentic oversight—no black boxes, no surprises."

Colors

The color system is built on a deep-dark foundation (surface: #000000, surface-container: #1f1f1f) that minimizes eye strain during long coding sessions while maximizing contrast for accessibility. Primary (#146ef5) is a vivid electric blue reserved exclusively for interactive elements—call-to-action buttons, links, focus states, and active indicators. This blue is the brand's signature accent and appears sparingly to draw attention to critical actions like "Join Waitlist" or "Complete Docs." Secondary colors (grays: #7e7e7e, #505050, #666666) provide hierarchy and support without competing for attention. The on-surface palette (#fefefe for primary text, #b9b9b9 for secondary text) ensures legibility across all surface layers. Outline colors (#666666 for borders, #505050 for subtle divider

Typography

The typography system uses Instrumentsans (with Arial and sans-serif fallbacks) across all scales, creating a cohesive, technical aesthetic that feels contemporary and trustworthy. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero sections with commanding presence; Headline-lg (40px, 600 weight) introduces major sections; Headline-md (28px, 600 weight) breaks up content hierarchically. Body-lg (18px, 400 weight, 28px line-height) and Body-md (16px, 400 weight, 24px line-height) maintain readability in dense information layouts. Label-md (14px, 500 weight, 0.01em letter-spacing) and Label-sm (12px, 500 weight, 0.05em letter-spacing) are used for UI labels, buttons, and metadata. The consistent use of 400 and 500–700 weights (avoiding ultra-light or ultra-heavy variants) keeps

Layout

The layout follows a 12-column grid with a max-width of 1280px (or 940px on medium breakpoints), ensuring content remains scannable and never overwhelms the viewport. The spacing scale is semantic: xs (4px) for micro-adjustments, sm (12px) for compact groupings, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. The gutter (24px) is applied consistently to container padding, creating a breathing room that prevents the dark background from feeling claustrophobic. White-space is generous but purposeful—never wasteful. The hero section occupies full viewport height (h-screen), establishing visual dominance, while subsequent sections use lg spacing (40px) to create rhythm. Input fields and form containers use md spacing

Elevation & Depth

Depth in Ssscript is achieved through layered surfaces and subtle shadows rather than bright highlights or glassmorphism. Level 1 (Base) is the pure black background (#000000) with no shadow. Level 2 (Standard Cards) uses surface-container (#1f1f1f) with a 1px border at outline-variant (#505050) and a soft shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Level 3 (Elevated/Modals) uses surface-container-high (#2a2a2a) with a 1px border at outline (#666666) and a deeper shadow: 0 16px 40px rgba(0, 0, 0, 0.5). Focus states on interactive elements add a 2px glow: box-shadow: 0 0 0 2px rgba(20, 110, 245, 0.2

Shapes

The shape philosophy is "Functional Precision"—rounded corners are applied strategically to soften the technical aesthetic without sacrificing clarity. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a modern, approachable feel while remaining distinctly digital. Input fields and form controls use a tighter DEFAULT radius (0.5rem / 8px) or md (0.75rem / 12px) to signal their functional purpose. Cards and containers use lg (1rem) or xl (1.5rem) depending on visual hierarchy—hero cards lean toward xl for prominence, while utility cards use lg for consistency. Badge

Components

Action Elements Buttons are the primary interaction mechanism. button-primary uses {colors.primary} (#146ef5) background with white text, 12px 24px padding, and lg radius (16px). On hover, the background shifts to #0d3fa8 (primary-container) over 200ms, signaling interactivity without jarring the user. button-secondary uses a transparent background with a 1px border at {colors.outline} (#666666) and primary text, allowing secondary actions to coexist without visual competition. Both button variants maintain a 48px height for touch-friendly targets. ### Containers & Surfaces card components use surface-container (#1f1f1f) with a 1px border at outline-variant (#505050), lg radius (16px), and md padding (24px). The shadow 0 3px 8px rgba(0, 0, 0, 0.15) provides subtle depth. On hover, the

Do's and Don'ts

**Do**

• Do use primary (#146ef5) exclusively for interactive elements—buttons, links, focus states, and active indicators. Never use it for backgrounds or decorative elements.
• Do maintain at least 48px height for all clickable targets (buttons, list items) to ensure mobile and accessibility compliance.
• Do apply 200ms ease-in-out transitions to all state changes (hover, focus, active) to reinforce responsiveness and reduce perceived latency.
• Do use the full spacing scale (xs, sm, md, lg, xl) to create visual rhythm; never hardcode arbitrary pixel values.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) on small labels over animated or gradient backgrounds to preserve legibility.

**Don't**

• Don't use primary blue (#146ef5) for body text, backgrounds, or non-interactive elements; reserve it as the brand's signature accent.
• Don't mix rounded radii arbitrarily—stick to the defined scale (sm, DEFAULT, md, lg, xl, full) to maintain visual consistency.
• Don't apply shadows without a corresponding border; the combination of 1px border + shadow creates the visual hierarchy.
• Don't exceed 200ms transition timing on interactive elements; faster feels snappy, slower feels sluggish in a technical interface.
• Don't use pure white (#ffffff) for text on dark backgrounds; use on-surface (#fefefe) instead to reduce eye strain during extended use.