The best way to work with AI. Describe a task — Runable's agent plans it, runs the tools, and ships the result.
01 / Color
Palette
A clean white canvas with a confident cyan-teal primary and a mint-green success accent. (The Google-blue in the live DOM is an embedded Sign-In widget — not brand.)
Primary — cyan-teal
--brand
#00B7CA
Primary — buttons, links, run
--brand-deep
#00828C
Gradient base, hover
--brand-ink
#047B86
Teal text on white (contrast)
Accent — mint & gradient
--mint-soft
#76E5A9
Success, gradient highlight
--mint-2
#6DC696
Gradient mid
--grad
teal→mint
Signature section band
--orange
#F0A23C
"Loved by 1M+" badge only
Surfaces & text
--bg
#FFFFFF
Page canvas (light)
--bg (dark)
#061A1C
Deep teal-black canvas
--text
#1A1A1A
Body ink
--text2
#5F6368
Secondary text
02 / Type
Typography
Runable ships no custom webfont — Tailwind's system-ui stack. Inter is the neutral stand-in; JetBrains Mono is reserved for the agent console and generated code.
Inter42px · 600
What needs to be done?
Inter24px · 600
Build apps, slides & sites
Inter16px · 400
Describe a task and Runable's agent plans it, runs the tools, and ships the result.
JetBrains Mono13px · 400
agent › scaffolding react + tailwind…
03 / Components
Building blocks
The prompt bar, task chips, and agent-run states that make up the product.
Buttons & task chips
Build AppsCreate SlidesGenerate Videos
Agent run state
RunningDoneErrorQueued
04 / Signature
The Runable agent
Pick a task — the agent plans it, runs its tools step by step, and assembles the artifact. Try each: apps, slides, videos, sites.