Design System

Design System

Interactive reference for colors, typography, components, and patterns used across Datagrid.

Colors

Core Palette

Background
Surface
Foreground
Secondary
Tertiary
Border
Border Hover

Brand Colors

Accent (Blue)

#1F5AFE

Primary brand — CTAs, links, interactive elements

Accent Hover

#1645C8

Hover state for accent elements

Green

#3ADE7C

Card hover glow, workflow borders, CTA prefooter gradient

Brand Green

#2EC4B6

Actions and automation

Brand Yellow

#F4A261

Interpretation, analysis, tools

Brand Turquoise

#1CC9D4

Knowledge and data

Stat Card Colors

Card BG

Stats card background

Arrow

Emerald up-arrow on stat cards

Read Story

Read story link color

Semantic

Success

#2EC4B6

Positive actions, confirmations

Warning

#F4A261

Caution states, pending

Error

#DC2626

Errors, destructive actions

Green Gradient (Prefooter CTA)

Used on homepage and product prefooter CTA blocks. Dark text, black buttons.

Typography

Font Specimens

PolySans

Brand | Primary typeface

Aa

Headings

Bulky (700)

Aa

Subtitles

Median (500)

Aa

Body

Neutral (400)

Inter

Secondary typeface

Aa

Headings

ExtraBold (800)

Aa

Subtitles

Medium (500)

Aa

Body

Regular (400)

Type Scale

Hero H1

AI Agents that Do the Work for You

Section H2

Datagrid gives teams time back

Card Headline

faster workflow execution

Card Title

Submittal Review Agent

Body

Datagrid automates document-heavy workflows with AI agents.

Small Body

Level 10 reduced an 8-hour workflow to just 90 minutes.

Label

On this page

Stat Number

81%

Rules

  • No all-caps typography — always sentence case or title case
  • No trailing periods on h1/h2 headings
  • Stat card headlines are fully lowercase

Shadows

xs

sm

md

lg

xl

accent-sm

accent-md

Border Radius

sm

4px

md

4px

lg

4px

xl

7px

2xl

7px

full

9999px

Buttons & CTAs

Primary CTA

Secondary CTA

Green Prefooter CTA

Nav CTA (scrolled)

Read Story Link

Read story

Cards & Tiles

HoverCard — Green Glow Border

Mouse over to see the #3ADE7C gradient border glow follow your cursor.

Submittal Review Agent

Compares submittals against project specs and flags deviations.

GlowCell — Green Glow Border

Same green glow used on enterprise governance cards.

SOC 2 Security

Enterprise-grade safeguards

Stat Card

Logo area (fixed h-[52px])

Up to

↑

50%

of time reclaimed each day

Description text goes here.

Page Sections

Section Spacing

py-10 sm:py-14 lg:py-18Content sections
py-14 sm:py-20Prefooters, detail pages

Container

max-w-[1480px] px-4 sm:px-6 lg:px-8

Pattern Grid Background

Interactive background pattern using PatternGrid component.

  • Default cell size: 90px (prefooters). Hero/headers: 170px.
  • Mouse hover: 280px feathered spotlight with smoothstep.
  • Phantom cursor: wanders when mouse leaves, 0.5-2s pause between sweeps.
  • Auto wave on mobile + scroll: three overlapping sine waves.
  • ~30% colored icons, 70% white. ~35% cells empty.

Green Prefooter Block

Rounded-[6px] container, green gradient background, dark text. Used on homepage and product page. Left-aligned copy with black CTA button.

Prefooter Border

Top border: border-t border-border on all prefooter sections.

Animations

CtaArrow

Hover to see the shaft extend and push the chevron outward.

Rotating Glow Border

Conic gradient spinning border. Color: rgba(58,222,124,0.7) (#3ADE7C).

Used on: workflow demo box, "Teams use Datagrid to" active item.

Dropdown Panel

Marquee

animation: marquee 25s linear infinite0% translateX(0) → 100% translateX(-50%)

Pattern Breathing

patternBreathe keyframe: oscillates opacity between --breath-min and --breath-max. Duration 8-14s, staggered delays.