CURATED · OPEN · FREE

Ably

A developer-focused infrastructure platform for building resilient, real-time applications.

01

Identity DNA

A high-performance engine room for modern, multi-device digital experiences.

02

Color

High-contrast dark mode with a vibrant, energetic orange accent for high-priority actions.

03

Typography

geometric-sans · humanist-sans · monospace

• display56px · 500
• body17px · 500

Use a clear typographic hierarchy with large, bold display text for key messages. · Ensure sufficient contrast between white/gray text and the dark background.

04

Spacing

A consistent 4px base unit provides structure and predictable spacing throughout the layout.

05

Surfaces

1px solid rgba(226,232,240,1.0) for subtle separation and 1px solid rgba(255,255,255,0.25) for interactive elements.

0px 4px 4px 0px rgba(0,0,0,0.25)

06

Layout

A structured 12-column grid system with a centered container, featuring distinct sections for hero content, stats, and use-case cards.

07

Motion & Interaction

Smooth transitions for interactive states like hover, color changes, and layout shifts.

Visual feedback through color changes, opacity adjustments, or subtle padding shifts. · Immediate response with standard interactive feedback, often transitioning the element to its active state.

08

Components

• button Bold, solid-colored primary buttons (often orange gradient) and outlined secondary buttons, both with large padding and rounded corners.
• card Dark-themed cards with rounded corners, used to showcase use cases with imagery and concise descriptions.
• chip Small, rounded tags or badges used for status or categorization within the UI.
• input Dark-themed input fields with clear borders and specific states for interactive elements.
• hero A large, left-aligned hero section with a compelling headline, descriptive text, and prominent call-to-action buttons.

09

Voice & Don'ts

• Tone Confident, authoritative, and developer-focused, emphasizing reliability and performance.
• Headlines Direct, benefit-oriented, and concise, often using strong verbs and impactful numbers.
• CTAs Actionable and clear, using verbs like 'Start' and 'Jump to' to guide the user.

• Don't use a light theme — screenshot shows a dark background (#03020D) with white text.
• Don't use a primary blue accent — screenshot shows a vibrant orange (#FF5416) for key actions.
• Don't use rounded corners smaller than 4px — screenshot shows a consistent use of 8px-12px for cards.
• Don't use complex sans-serif fonts — screenshot shows clean geometric and humanist sans-serifs.
• Don't use small, cramped spacing — screenshot shows a generous 24px gutter and large padding.
• Don't use decorative serif fonts — screenshot shows modern, functional sans-serif typography.
• Avoid: Avoid overly casual or jargon-heavy language that obscures the technical value proposition.
• Avoid: Avoid using light or pastel color palettes that clash with the dark, high-contrast theme.
• Avoid: Avoid cluttered layouts; maintain generous whitespace to highlight key information.
• Avoid: Avoid complex or unpredictable animations; keep motion subtle and purposeful.
• Avoid: Avoid using multiple competing accent colors; stick to the primary orange for focus.

10

Inside the pack — real screenshots

Captured from the live site · real computed styles

11

System prompt

en · zh-CN · zh-TW · ja · ko