Complete design system extracted from www.basedash.com — every token, component, interaction pattern, and accessibility note, all from real values.
All color values extracted from the live stylesheet. Contrast ratios per WCAG 2.1.
Single font family: Inter — used across all roles. Font files loaded by the site: Alpha Lyrae (500).
| Role | Specs | Sample | Used on |
|---|---|---|---|
| Body | Open in new tabCopy logo as SVGBrand guidelines |
||
| Body | AI-Native Business Intelligence AI-Native Business Intelligence |
||
| Link | Greg Demoge |
||
| Body | AI-Native Business Intelligence AI-Native Business Intelligence |
||
| Body | Open in new tabCopy logo as SVGBrand guidelines |
||
| Link | Open in new tabCopy logo as SVGBrand guidelines |
||
| Link | Start free |
||
| Body | Build charts, dashboards, and reports in seconds using all your data. |
Nav demo using extracted colors, font, real link labels.
| Background | #000000 |
| Text color | #ffffff |
| Font family | Inter |
| Links (extracted) | Open in new tab · Brand guidelines · Data sources · Pricing · Log in |
Layout values (height, padding, link states) are demo styling — not extracted from the site.
Color and radius tokens extracted from the scrape; variants are representative demos. Border-radius: 8px · fill type: solid · padding density: normal.
bg #000000 · color #ffffff · radius: 8px
Demo variant — outlined treatment of the extracted primary color #000000.
Demo variant — text-only treatment of the extracted primary color.
Generic disabled-state demo — not extracted from the site.
Flat design system — no box-shadows. Depth is communicated through background contrast and borders.
bg #000000 · text #000000
bg #000000 · text #ffffff
bg oklab(0 0 0 / 0.85) · text #ffffff
Real case studies found on the scraped site — titles and URLs extracted from live links.
Case studiesHow teams use Basedash
/case-studies
Representative form patterns styled with extracted color and radius tokens. Input border-radius: not detected in scrape.
radius: not detected · demo border/background styling
Demo focus treatment using extracted primary color #000000.
Spacing values observed in the live layout. Values extracted from stylesheet padding, margin, and gap declarations.
Corner radius tokens observed across components. All values extracted from live stylesheet.
Fully flat design — zero box-shadow usage. Depth communicated through background-color contrast and 1px borders.
bg #000000 — the outermost layer. Everything sits on top of this.
bg #ffffff with 1px border. No shadow — white lift creates elevation via contrast.
bg #000000 — depth through color contrast, no shadows.
Transition and animation values extracted from the scraped stylesheets, with real occurrence counts.
Demo transitions use the fastest extracted duration (0.15s ease-in-out).
Demo hover treatment — fill with extracted primary color. Real hover styles are not scraped.
| Token | Value | Occurrences |
|---|---|---|
| duration-fast | 0.15s | 1× in stylesheet |
| duration-base | 1s | 4× in stylesheet |
| duration-slow | 2.8s | 3× in stylesheet |
| duration-slower | 3.2s | 3× in stylesheet |
| duration-slowest | 60s | 2× in stylesheet |
| easing-1 | ease-in-out | 8× in stylesheet |
| easing-2 | linear | 5× in stylesheet |
| easing-3 | ease | 5× in stylesheet |
No media-query breakpoints detected in the scraped stylesheets of https://www.basedash.com/.
Assets and links extracted from the scraped pages.
https://fivetran.com/integrations/dynamodb/resources/dynamodb.svg
https://fivetran.com/integrations/google_ad_manager/resources/google_ad_manager.png
No icon library (Phosphor, Feather, Heroicons, Font Awesome…) detected in the scraped pages.