Design System
Interactive reference for colors, typography, components, and patterns used across Datagrid.
Accent (Blue)
#1F5AFEPrimary brand — CTAs, links, interactive elements
Accent Hover
#1645C8Hover state for accent elements
Green
#3ADE7CCard hover glow, workflow borders, CTA prefooter gradient
Brand Green
#2EC4B6Actions and automation
Brand Yellow
#F4A261Interpretation, analysis, tools
Brand Turquoise
#1CC9D4Knowledge and data
Card BG
Stats card background
Arrow
Emerald up-arrow on stat cards
Read Story
Read story link color
Success
#2EC4B6Positive actions, confirmations
Warning
#F4A261Caution states, pending
Error
#DC2626Errors, destructive actions
Used on homepage and product prefooter CTA blocks. Dark text, black buttons.
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)
AI Agents that Do the Work for You
Datagrid gives teams time back
faster workflow execution
Submittal Review Agent
Datagrid automates document-heavy workflows with AI agents.
Level 10 reduced an 8-hour workflow to just 90 minutes.
On this page
81%
xs
sm
md
lg
xl
accent-sm
accent-md
sm
4px
md
4px
lg
4px
xl
7px
2xl
7px
full
9999px
Mouse over to see the #3ADE7C gradient border glow follow your cursor.
Submittal Review Agent
Compares submittals against project specs and flags deviations.
Same green glow used on enterprise governance cards.
SOC 2 Security
Enterprise-grade safeguards
Logo area (fixed h-[52px])
Up to
50%
of time reclaimed each day
Description text goes here.
py-10 sm:py-14 lg:py-18Content sectionspy-14 sm:py-20Prefooters, detail pagesmax-w-[1480px] px-4 sm:px-6 lg:px-8
Interactive background pattern using PatternGrid component.
Rounded-[6px] container, green gradient background, dark text. Used on homepage and product page. Left-aligned copy with black CTA button.
Top border: border-t border-border on all prefooter sections.
Hover to see the shaft extend and push the chevron outward.
Conic gradient spinning border. Color: rgba(58,222,124,0.7) (#3ADE7C).
Used on: workflow demo box, "Teams use Datagrid to" active item.
animation: marquee 25s linear infinite0% translateX(0) → 100% translateX(-50%)patternBreathe keyframe: oscillates opacity between --breath-min and --breath-max. Duration 8-14s, staggered delays.