ElectricSQL — design system & UI screens

Dev Tools · 1 screen · 8 sections · https://electric-sql.com/

Build and deploy long-lived agents and multi-agent systems, with managed agents that handle complex workflows without manual lock-in. The page uses a dark theme with a scrolling hero-led layout: prominent headline and CTA at top, followed by feature cards highlighting key capabilities (managed agents, AI collaboration, Electric Agents runtime, Electric Streams data, Electric Sync engine), testimonials from industry leaders, and a final CTA section. Copy emphasizes long-lived agent systems and multi-device collaboration.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/electricsql.

Decoded design system

ElectricSQL's decoded design system: background #111318, text #ECECEE, accent #56E8EA, link #75FBFD, primary #56E8EA; type scale h1 56px / h2 38px / body 20px; 4px spacing base; 8px base radius. The single interactive/action color is #56E8EA — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Using these colors

• Action color #56E8EA — the single interactive color; only on things you click or must notice, never large fills.
• primary, accent, button_bg are all #56E8EA — one role, not several (the action color).
• accent #56E8EA — THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
• link #75FBFD — inline text links and link-styled controls.
• secondary #22C55E — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

• h1: 56px
• h2: 38px
• body: 20px

Spacing

• base unit: 4px
• scale: 2px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 20px, 24px

Radii

• base: 8px
• button: 20px

Shadows (elevation)

• card: rgba(0, 0, 0, 0.1) 0px 12px 32px 0px, rgba(0, 0, 0, 0.08) 0px 2px 6px 0px
• overlay: rgba(0, 0, 0, 0.55) 0px 28px 60px -12px, rgba(0, 0, 0, 0.35) 0px 10px 22px -8px

Motion

Micro-interactions run at 340ms (dominant) with cubic-bezier(0.65, 0, 0.35, 1).

• durations: 340ms · 250ms · 200ms
• easings: cubic-bezier(0.65, 0, 0.35, 1) · ease
• animated properties: opacity, color, transform, border-color

Native design tokens

…and 110 more measured on the page.

Button states (measured)

• primary hover: background #75FBFD
• primary focus: outline 1px auto rgb(16, 16, 16)

Layout (measured)

• container max-width: 1152px
• nav: 64px relative
• common grid: 2 columns

Motion choreography (measured)

Load order: span.csd-dot×3 → div.VPNavBar → span.title-suffix → div.why-loops-head → div.why-loops-head → article.why-card×3

Scroll reveal: 40 elements rest at opacity 0, translateY(24px), animate in over 0.34s cubic-bezier(0.65, 0, 0.35, 1).

Overlay recipe (measured)

dropdown panel: #22252F · radius 12px

Responsive (measured)

• breakpoints: 480px · 549px · 559px · 640px · 768px · 960px
• mobile (390px): hero 36px · nav hamburger

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

• Agent platform landing page

Sections (8)

• Hero — Agent platform landing page
• Feature — Managed agents without the lock-in
• Feature — Electric Agents runtime
• Feature — Electric Streams data primitive
• Feature — Electric Sync engine
• Testimonial / Social Proof — Backed by industry insiders
• CTA / Sign-up — Bring your agents online
• Footer — Footer