Lightdash

Light-first editorial data landing. Off-white #eceff3 primary canvas (freq 283) paired with pure #000 primary ink (freq 3368 — the decisive rejection of near-black). Secondary text descends through #272835 → #36394a → #666d80 for progressive de-emphasis. Typography carries the entire personality: Britti Sans Variable (Trial Regular / Trial Semibold / Medium) for display, Inter / Inter Variable for body — a two-foundry duet with 129 @font-face declarations delivered from Framer's CDN (zero preload). Accent is signature purple #625df5, plus the preserved native #0000ee hyperlink blue used unmodified as an editorial credibility signal. Integration chips (Slack / Google / Google Sheets hues) are first-class palette citizens. Elevation is a multi-layer soft shadow grammar (up to four stacked layers on the flagship) that makes cards feel printed rather than floated. Motion stays moderate — Framer Motion in use, colour 0.5s ease dominant, plus a single cubic-bezier(0.44, 0, 0.56, 1) for chroma micro-interaction.

Use this capture as a design language transfer brief for my project. Adopt the palette (light-first #eceff3 off-white canvas + pure #000 primary ink + near-black descender ladder + signature purple #625df5 + preserved #0000ee native-link blue + integration-chip palette where relevant), typographic duet (Britti Sans Variable for display paired with Inter Variable for body, delivered via @font-face without preload), 2px base spacing scale with peaks at 8 / 16 / 10, four-tier graduated container ladder 724 / 836 / 1080 / 1280, multi-layer soft shadow grammar (three-layer for cards, four-layer for flagship surfaces), three-only gradient system (1px rail separators + soft fade, no decorative colour gradients), border-radius peaks at 8 / 12 + full-pill 80px, moderate Framer Motion with color 0.5s ease dominant and cubic-bezier(0.44, 0, 0.56, 1) for chroma micro-interactions, and a custom md=810 breakpoint. Treat this as my project's constitution — every new component should pass as if crafted in the same studio. Apply the language, not the source brand's copy or identity. When I ask you to build a page or component, enforce these rules by default, and call out any decision that deviates.

Layout

Grid

Content width

Bounded

Framing

Flat

Grid strength

Moderate

Light-first canvas — cool off-white #eceff3 (freq 283) as primary background, with #ffffff (freq 97) reserved for elevated surfaces like cards and tables. Pure #000 text does the dominant reading (freq 3368 — the decisive choice). Secondary descender: #272835 → #36394a → #666d80 for progressive de-emphasis. Signature accent is purple #625df5 (freq 156); the native #0000ee hyperlink blue is preserved unmodified (freq 160) as an editorial credibility signal. Integration chip palette — #2eb67d, #ecb22e, #36c5f0, #ea4335, #4285f4, #e01e5a — used exclusively to identify partner products and third-party services, not as decorative brand colour.

• Primary reading pair: pure #000 text on #eceff3 off-white canvas (measured 3368 + 283 occurrences — dominant surface)
• Elevated surfaces: #ffffff for cards, table rows and modals against the off-white canvas
• Secondary descender: #272835 (muted body) → #36394a (cooler secondary) → #666d80 (captions / labels)
• Signature accent: #625df5 purple for primary CTAs, brand moments and product feature emphasis
• Preserved native link: #0000ee for inline anchor text — do not substitute a branded blue
• Integration chip palette (Slack / Google / Google Sheets / Figma brand hues) reserved for partner-product identification only

linear-gradient(rgba(0, 0, 0, 0) 1px, rgb(255, 255, 255) 0px)
linear-gradient(90deg, rgba(0, 0, 0, 0) 1px, rgb(255, 255, 255) 0px)
linear-gradient(rgb(248, 250, 251) 0%, rgba(248, 250, 251, 0) 100%)