AutoDash
Design System
Spreadsheets in. The dashboard you want, out. — A retro brand for a style-agnostic tool.
Brand
Logo · Mascot · Voice
The retro identity. The mascot. The voice. AutoDash dresses one way — its output dresses however you say.
Brand · main
Wordmark
Primary lockup · use everywhere
AutoDash
Bolt mark
Favicon, app icon
Reverse
On cobalt surface
Voice
Punchy. Plainspoken. A little bit grease-monkey.
Like a talkative mechanic who happens to know SQL. We name things plainly (“Upload”, “Make me a dashboard”), celebrate small wins (“She runs.”), and never use the word synergy.Sparky · the mascot
Hero illustration only — never the logo. Sparingly.
DO drive him into landing pages, error states, empty states.
DON'T cram him into the favicon or buttons. He needs room.
DON'T cram him into the favicon or buttons. He needs room.
Foundations
Color & Type
Color, type, and the rhythm of the page.
Color
Color
Two heroes, one paper. Cobalt does the driving; tomato makes you look.
Heroes
Cobalt
#2742B5
Primary · charts · CTAs
Tomato
#D63A2C
Accent · highlight · brand
Cream
#EFE8D4
Page background
Ink
#16161A
Type · outlines · 100%
Supporting
Cobalt Deep
#1B2E80
Pressed · text on cream
Cobalt Soft
#C8D0EE
Backgrounds · chips
Tomato Deep
#A82A1F
Hover · errors
Tomato Soft
#F2C5BE
Toast · highlight
Chalk
#FFFFFF
App canvas · cards
Cream Deep
#E2D9BF
Elevation · headers
Ink scale
Ink
#16161A
Body · outlines
Ink Soft
#3A3A40
Subhead
Ink Mute
#6B6962
Captions
Ink Faint
#A8A498
Placeholder
Data viz · ordered ramp
01
02
03
04
05
06
Typography
Typography
One chunky slab for the loud bits. Clean grotesque for the rest. Mono for digits.
Display · Alfa Slab One
96 / 72 / 48 / 32
Numbers go vroom.
Headline · Section · Card title
Body · DM Sans
20 / 16 / 14 / 12
Lede paragraph. Sets the scene. Bigger than body, smaller than display.
Body copy lives here. AutoDash takes a spreadsheet and gives you a dashboard in under a minute — no formulas, no pivot tables, no asking the data team to “please please please” run a query. Just upload and go.
CAPTION · METADATA · LABEL
Mono · DM Mono
$1,284,902.14
rows = 12,408
cols = 18
uplink = 9.4 MB/s
cols = 18
uplink = 9.4 MB/s
Components
Core kit
Buttons, inputs, the upload zone — die-cut and shadowed.
Components · core kit
Components
Chunky outlines, hard drop-shadows, no gradients. Everything looks like it was die-cut.
Buttons
Inputs
Workspace name
Q3 Marketing Dash
Sheet URL
https://docs.google.com/spreadsheets/…
Email
you@team.io
Badges & chips
Sheet · 12k rows3 errorsPRODraftLive · synced 2m agoHot ✦
Stat card
Revenue
$284K
▲12.4% vs LW
Churn
2.1%
▼0.3pt vs LW
Upload zone
The heart of AutoDash. Lives big on the landing page, small inside the app.
Drop a spreadsheet
.xlsx, .csv, or paste a Google Sheets URL
Drop a spreadsheet
.xlsx, .csv, or paste a Google Sheets URL
Output styles
Same data. Your vibe.
The killer feature — same data, totally different look. AutoDash's brand is retro, but the dashboards it generates adopt whatever style the user prompts for.
Style gallery · 5 themes, same data
Style-aware output
Same data. Your vibe.
AutoDash's brand is retro, but the dashboards it generates aren't. Tell our AI the look you want — clean enterprise, hacker terminal, editorial magazine, friendly pastel — and it'll render your sheet in that style. Same numbers, totally different feel.
style.prompt =
"make it feel like a Bloombergterminal, dark mode, mono font"
Prompt
"the default — retro racing (subtle / quiet dashboard)"
Q3 Marketing
Acquisition · 90d
● liveshare
Revenue
$284K
▲ 12.4%
Customers
1,402
▲ 8.1%
AOV
$203
▲ 1.2%
Churn
2.1%
▼ 0.3pt
Sessions / week▲ peak
Revenue trend
Top campaignsn=4
Spring Tune-up$48,210+24%
Highway Star$31,902+18%
Pit-stop$22,140+9%
Referral$14,008−3%
AutoDash
Prompt
"clean enterprise — McKinsey vibe"
Q3 Marketing
Acquisition · 90d
● liveshare
Revenue
$284K
▲ 12.4%
Customers
1,402
▲ 8.1%
AOV
$203
▲ 1.2%
Churn
2.1%
▼ 0.3pt
Sessions / week▲ peak
Revenue trend
Top campaignsn=4
Spring Tune-up$48,210+24%
Highway Star$31,902+18%
Pit-stop$22,140+9%
Referral$14,008−3%
Boardroom
Prompt
"Bloomberg terminal · dark mode"
> q3_marketing.xlsx
Acquisition · 90d
● live
Revenue
$284K
▲ 12.4%
Customers
1,402
▲ 8.1%
AOV
$203
▲ 1.2%
Churn
2.1%
▼ 0.3pt
Sessions / week▲ peak
Revenue trend
Top campaignsn=4
Spring Tune-up$48,210+24%
Highway Star$31,902+18%
Pit-stop$22,140+9%
Referral$14,008−3%
Terminal
Prompt
"editorial · magazine layout"
Q3 Marketing
Acquisition · 90d
● liveshare
Revenue
$284K
▲ 12.4%
Customers
1,402
▲ 8.1%
AOV
$203
▲ 1.2%
Churn
2.1%
▼ 0.3pt
Sessions / week▲ peak
Revenue trend
Top campaignsn=4
Spring Tune-up$48,210+24%
Highway Star$31,902+18%
Pit-stop$22,140+9%
Referral$14,008−3%
Atelier
Prompt
"friendly · Notion / Linear-soft"
Q3 Marketing
Acquisition · 90d
● liveshare
Revenue
$284K
▲ 12.4%
Customers
1,402
▲ 8.1%
AOV
$203
▲ 1.2%
Churn
2.1%
▼ 0.3pt
Sessions / week▲ peak
Revenue trend
Top campaignsn=4
Spring Tune-up$48,210+24%
Highway Star$31,902+18%
Pit-stop$22,140+9%
Referral$14,008−3%
Sherbet
It's the same chart engine. The theme controls type, color, radius, stroke weight, shadow style, chart strokes, chip shape, and density. You can also start from one of these presets and tweak from there, or hand us a brand asset and we'll match it.