Overview
This design language turns data infrastructure into a crisp commercial interface. It uses white space, large editorial sans headlines, dashed utility borders, structured data cards, black commitment CTAs, and green live-action signals.
Datashake
Access 150+ social & review sources through one API. Get real-time + 5 years historical data with 98.3% uptime. Trusted by enterprise platforms.
4.0
25
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Datashake Home design analysis
This design language turns data infrastructure into a crisp commercial interface. It uses white space, large editorial sans headlines, dashed utility borders, structured data cards, black commitment CTAs, and green live-...
Colors
Use white as the primary page canvas and 0D0D0D for text, nav, key borders, and black CTAs. Use 3FE844 for the highest-priority action or live data signal. Use 2D62FF for links, selected product states, and active data categories. Use FAFAFA for nested data rows and D9D9D9 for grid lines and dashed fields.
Typography
Use a large editorial sans for hero and section headings, around 76px / 82px for top-level statements and 44px / 52px for sections. Use system sans for body copy, controls, labels, and forms. Use mono only when content looks like API metadata, sample payloads, or identifiers.
Layout
Lead with a large data promise and a direct CTA pair. Use grid cards for data products, sources, and metric proof. Form pages should use a split layout: large statement and supporting proof on the left, fields on the right. The grid should feel technical but not crowded. Each card needs enough whitespace for values and labels to scan quickly.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Green Data Grid
A white data-infrastructure language with large editorial sans headings, dashed utility borders, black and neon-green actions, blue active links, structured data cards, and split form pages.
Technical, crisp, data-rich, and commercial, with white space, dashed utilities, and high-signal green actions.
Primary mode: lightsocial and review data infrastructureui-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Technical, crisp, data-rich, and commercial, with white space, dashed utilities, and high-signal green actions.
Density
5
Variance
3
Motion
2
Signals
white shell with visible grid discipline · large editorial sans headings · dashed pill buttons and form fields · black commercial CTAs · neon green action and success marks · blue product links and active tabs
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Data White
#FFFFFF
Infrastructure Ink
#0D0D0D
Live Green
#3FE844
API Blue
#2D62FF
Quiet Surface
#FAFAFA
Grid Line
#D9D9D9
Muted Data
#6E6E6E
Alert Yellow
#FFE45C
Usage rules
Use green for key action and data freshness; keep black for commercial commitment.
Use dashed borders as a utility grammar for logins, forms, and technical containers.
Use blue for active data links, not as the main CTA color.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
page_margin
clamp(20px, 5vw, 80px)
content_max_width
1200px
hero_gap
24px
section_gap
88px
grid_gap
20px
card_padding
28px
form_gap
16px
control_padding
11px 18px
Token Radii
Corner radii tokens with a live surface sample.
small
6px
card
16px
panel
24px
pill
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Editorial Data Sans
large, commercial, slightly condensed, and authoritative
Body
System Sans
neutral, readable, and utilitarian
Mono
System mono
used for API fields, sample payloads, and data metadata
Typography Scale
Top-level typography scale rendered as live text specimens.
Hero
76px/82px
Hero
Page title
60px/66px
Page title
Section title
44px/52px
Section title
Card title
24px/—
Card title
Body
17px/26px
Body
Control
14px/20px
Control
Caption
12px/—
Caption
Typography Line Heights
Top-level typography line-height values from the design YAML.
| Property | Value |
|---|---|
hero | 82px |
page_title | 66px |
section_title | 52px |
body | 26px |
control | 20px |
Typography Weights
Top-level typography weights from the design YAML.
| Property | Value |
|---|---|
display | 500 |
title | 600 |
section | 600 |
control | 600 |
body | 400 |
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use large editorial sans headings with direct commercial language. · Use system sans for data descriptions and forms. · Use mono only for payload-like or API-like content.
Borders
Border tokens with resolved values.
Hairline
1px solid #D9D9D9
Dashed
1px dashed #0D0D0D
Green
1px solid #3FE844
Shadows
Shadow tokens with resolved values and shadow samples where applicable.
None
none
Data card
0 18px 48px rgba(13, 13, 13, 0.08)
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration fast
120ms
Duration base
180ms
Easing
cubic-bezier(.2, 0, 0, 1)
Borders
Resolved border token values.
| Property | Value |
|---|---|
hairline | 1px solid #D9D9D9 |
dashed | 1px dashed #0D0D0D |
green | 1px solid #3FE844 |
Shadows
Resolved shadow token values.
| Property | Value |
|---|---|
none | none |
data_card | 0 18px 48px rgba(13, 13, 13, 0.08) |
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration_fast | 120ms |
duration_base | 180ms |
easing | cubic-bezier(.2, 0, 0, 1) |
Layout Principles
Lead with a large data promise and direct CTA pair.
Use grid cards for data products and metric proof.
Use split pages for forms: statement left, inputs right.
Keep dashed controls visible and functional.
Use green sparingly to pull the eye to the next action.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Navigation top bar
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#0D0D0D
Border
0
Height
72px
Navigation login dashed
OverviewFeaturesDocs
Base Attributes
Background
#FFFFFF
Text
#0D0D0D
Border
{tokens.borders.dashed}->1px dashed #0D0D0D
Radius
{tokens.radii.pill}->999px
Padding
9px 16px
Buttons primary
Base Attributes
Background
#0D0D0D
Text
#FFFFFF
Border
1px solid #0D0D0D
Radius
{tokens.radii.pill}->999px
Padding
{tokens.spacing.control_padding}->11px 18px
Min height
44px
Shadow
none
Typography
control
Buttons green action
Base Attributes
Background
#3FE844
Text
#0D0D0D
Border
{tokens.borders.green}->1px solid #3FE844
Radius
{tokens.radii.pill}->999px
Padding
{tokens.spacing.control_padding}->11px 18px
Min height
44px
Typography
control
Cards data product
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#0D0D0D
Border
{tokens.borders.hairline}->1px solid #D9D9D9
Radius
{tokens.radii.card}->16px
Padding
{tokens.spacing.card_padding}->28px
Shadow
{tokens.shadows.data_card}->0 18px 48px rgba(13, 13, 13, 0.08)
Cards metric
Feature Card
Component preview content
Base Attributes
Background
#FAFAFA
Text
#0D0D0D
Border
{tokens.borders.hairline}->1px solid #D9D9D9
Radius
{tokens.radii.card}->16px
Padding
20px
Shadow
none
Inputs dashed field
Base Attributes
Background
#FFFFFF
Text
#0D0D0D
Border
1px dashed #D9D9D9
Radius
{tokens.radii.small}->6px
Padding
14px 16px
Min height
48px
Placeholder
#6E6E6E
Typography
body
Iconography
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Summary
Use data source logos, arrows, table glyphs, checkmarks, and small graph marks; keep utility icons black unless active or live.
Responsive guidance
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
- -Below 900px, stack split form layouts and keep CTAs full-width only when necessary.
- -Preserve card grid rhythm by moving from three columns to two, then one.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not use green as a full-page background.
- -Do not replace dashed utility grammar with generic solid cards everywhere.
- -Do not make form pages visually secondary; they are core conversion surfaces.
- -Do not overdecorate data cards with unnecessary illustration.
