Lightdash

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%)

• Display family: Britti Sans Variable (Trial Regular / Trial Semibold / Medium) — a small-foundry grotesque with editorial weight. Delivered via @font-face from framerusercontent.com; no preload observed. Licensing note: Trial variants are for evaluation — production use requires a commercial licence.
• Body family: Inter / Inter Variable — the default body companion. Do not swap to a second display family; the Britti + Inter duet is the identity.
• Size ladder observed: 12 / 15 / 16 / 18 / 20 / 24 / 48 / 76 px. Display hero at 48/48 with letter-spacing -0.96px (Britti Trial Regular or Semibold); XXL hero at 76/68.4 with normal tracking; sub-display at 24/31.2 with -0.48px (Britti Medium).
• Body at 16/24 with letter-spacing -0.16px (Inter) or 18/30.6 with -0.18px (Inter Variable) — the negative px tracking compensates at reading sizes.
• Britti Medium is used for UI labels at 16/32 (line-height 32 creates generous space), 20/24 for compact headers. Do not substitute the Medium weight — it is the secondary emphasis step.
• Do not use italic. Britti Sans has no observed italic cut; emphasis in body is carried via weight (Inter 500+).
• Paragraph max 55-70 ch at body 16-18px — echoes the 724 / 836 narrow container tiers.

• 2px base unit. Observed scale: 2 / 4 / 6 / 8 / 10 / 12 / 14 / 16 / 18 / 20 / 22 / 24 px. Dominant usage: 8 (freq 227) / 16 (168) / 10 (118) / 20 (71) / 12 (69) / 24 (57).
• Four-tier graduated container ladder: 724 / 836 / 1080 / 1280 px. Use 724 for narrow reading-forward sections, 836 for medium editorial, 1080 for product-forward feature sections, 1280 as the full site rail (dominant, freq 8).
• Flex gap peaks at 8px and 16px — keep gutters on these steps wherever possible.
• Card padding scale: 16 / 20 / 24 / 32 px. Table cell padding typically 10-12 vertical, 16 horizontal.
• Section vertical rhythm: 48 / 64 / 96 px desktop, 32 / 48 / 64 mobile.

• Default cards: shadow-xs three-layer soft stack — 'rgba(0,0,0,0.05) 0px 2px 5px 0px, rgba(0,0,0,0.04) 0px 9px 9px 0px, rgba(0,0,0,0.02) 0px 20px ...' — the stacked layers produce a printed-on-paper feel rather than a drop.
• Hairline outline: shadow-md 'rgba(39,40,53,0.1) 0px 0px 0px 1px' — a 1px indigo-tinted ring for pure outline separation.
• Card + ring: shadow-sm 'rgba(18,18,18,0.1) 0px 1px 1px 0px, rgba(18,18,18,0.1) 0px 0px 0px 1px' — a tiny drop plus a hairline ring for mild elevation.
• Flagship cards: shadow-lg and shadow-xl stack a hairline ring with a larger offset drop — e.g. 'rgba(39,40,53,0.1) 0px 0px 0px 1px, rgba(39,40,53,0.08) 0px 24px 24px -12px, ...' — reserve for hero feature surfaces.
• Extreme elevation: shadow-2xl four-layer stack with 21-30px blurs — used only once in the capture on the dashboard hero card. Use sparingly.
• Do not substitute a single-layer drop shadow — the multi-layer stack is the identity.

• Double-peak base: 12px (freq 28) for feature cards and image frames, 8px (freq 24) for inline controls and buttons.
• Secondary radii: 6px for small chips and badges, 16px for large surface cards, 26px for the distinctive medium-large radius used on hero image frames.
• Full pill (80px radius, freq 7) for indicator badges, integration chips and tag-sized controls — note 80px, not 100px, produces a slightly tighter pill that matches Britti's letterform proportions.
• Do not use radii between 16 and 26 — the jump is intentional.
• Border widths: 1px default (absence of explicit borderWidths tokens means default stroke is 1px throughout).

• three-layer-card

  backgroundColor

  #ffffff

  textColor

  #000000

  radius

  12px

  padding

  24px

  border

  none

  boxShadow

  rgba(0, 0, 0, 0.05) 0px 2px 5px 0px, rgba(0, 0, 0, 0.04) 0px 9px 9px 0px, rgba(0, 0, 0, 0.02) 0px 20px 12px 0px

  fontFamily

  Britti Sans, Inter, ui-sans-serif

  Tailwind

  Copy

  rounded-xl bg-white p-6 text-black shadow-[rgba(0,0,0,0.05)_0px_2px_5px_0px,rgba(0,0,0,0.04)_0px_9px_9px_0px,rgba(0,0,0,0.02)_0px_20px_12px_0px]

• hairline-outline-surface

  backgroundColor

  #eceff3

  textColor

  #000000

  radius

  12px

  padding

  20px

  border

  none

  boxShadow

  rgba(39, 40, 53, 0.1) 0px 0px 0px 1px

  fontFamily

  Inter Variable

  Tailwind

  Copy

  rounded-xl bg-[#eceff3] p-5 text-black shadow-[rgba(39,40,53,0.1)_0px_0px_0px_1px]

• purple-cta

  backgroundColor

  #625df5

  textColor

  #ffffff

  radius

  8px

  padding

  10px 20px

  border

  none

  boxShadow

  rgba(18, 18, 18, 0.1) 0px 1px 1px 0px, rgba(18, 18, 18, 0.1) 0px 0px 0px 1px

  fontFamily

  Britti Sans Medium

  fontSize

  16px

  transition

  color 0.5s ease, filter 0.5s ease

  Tailwind

  Copy

  inline-flex min-h-[44px] items-center gap-2 rounded-lg bg-[#625df5] px-5 py-2.5 text-[16px] font-medium text-white shadow-[rgba(18,18,18,0.1)_0px_1px_1px_0px,rgba(18,18,18,0.1)_0px_0px_0px_1px] transition-[color,filter] duration-500 ease-in-out hover:brightness-110

• integration-chip

  backgroundColor

  #ffffff

  textColor

  #272835

  radius

  80px

  padding

  6px 14px

  border

  none

  boxShadow

  rgba(39, 40, 53, 0.1) 0px 0px 0px 1px

  fontFamily

  Inter

  fontSize

  15px

  iconColor

  #36c5f0

  Tailwind

  Copy

  inline-flex items-center gap-2 rounded-full bg-white px-3.5 py-1.5 text-[15px] text-[#272835] shadow-[rgba(39,40,53,0.1)_0px_0px_0px_1px]

• link-inline

  color

  #0000ee

  textDecoration

  underline

  textDecorationThickness

  1px

  textUnderlineOffset

  2px

  transition

  color 200ms ease

  Tailwind

  Copy

  text-[#0000ee] underline decoration-[1px] underline-offset-2 transition-colors duration-200 ease-[cubic-bezier(0.44,0,0.56,1)] visited:text-[#551a8b] hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#0000ee]

• Moderate motion level — deliberate reduction from expressive. Colour is the primary animated property.
• Default hover transition: color 0.5s ease — unhurried, editorial tempo.
• Focused chroma uses a custom cubic-bezier(0.44, 0, 0.56, 1) at 0.2s for crisp state change.
• Framer Motion handles scroll-reveal on below-the-fold sections; use once:true viewport triggers.
• Respect prefers-reduced-motion — Framer Motion's useReducedMotion disables all reveals.
• Do not introduce spring or bounce — moderate ease and the single cubic-bezier only.

• Hover states lean on colour, not elevation. Ink darkens, accent brightens, but cards stay in place.
• Links: preserved #0000ee for inline anchors — do not substitute a branded blue without a deliberate reason.
• Integration chips: 80px pill + 1px hairline ring + 3rd-party brand colour icon + Inter text. Use as navigation cues for partner-product sections.
• Buttons escalate through one tier — secondary (outline + hairline ring) to primary (purple filled) to accent hero (purple + three-layer soft shadow).
• Focus rings use the signature purple #625df5 with 2px offset.

Desktop-first with a custom md=810 breakpoint instead of the Tailwind default 768. The 30-extra-pixels space is intentional — it pushes dense product imagery onto a larger viewport before collapsing to mobile layout. Six measured media queries include 809.98 / 810 / 1099.98 / 1199 bounds — per-breakpoint tweaks rather than fluid guessing.

• Breakpoints: sm 640 / md 810 / lg 1024 / xl 1280 / 2xl 1536. Note the custom md=810.
• Four-tier container ladder 724 / 836 / 1080 / 1280 maps to reading / editorial / product / full-site modes — pick based on content density.
• Below md 810, collapse to single-column reading flow. Britti Sans display scales from 76/68.4 down to 48/48 to 32/36.
• Hide-on-mobile is banned — controls reflow to accordion or drawer, not disappear.
• Tap targets minimum 44×44 on touch; 40×40 on pointer.

• Primary reading pair pure #000 on #eceff3 = 19.5:1 (AAA). Secondary #272835 on #eceff3 = ~14:1 (AAA). #666d80 on #eceff3 = ~4.9:1 (AA).
• Accent #625df5 on white = ~4.7:1 (AA for normal text, AAA for large text 18+). Test for UI controls that need AA on smaller text.
• Preserved link colour #0000ee on #eceff3 = ~8:1 (AAA) — one of the reasons the classic link colour still works.
• Focus rings mandatory: 2px solid #625df5 with 2px offset for form fields and interactive elements.
• Integration chip colours are decorative and must be paired with icon + text for meaning; do not rely on chip colour alone.
• prefers-reduced-motion must disable Framer Motion scroll reveals and collapse color transitions to 0ms.
• Tap targets minimum 44×44 touch, 40×40 pointer.

Lightdash ships on Framer — images are served via framerusercontent.com, the 129 @font-face declarations point to Framer's font CDN, and scroll-reveal motion is handled by Framer Motion (the only observed runtime motion library, level=moderate). Zero fonts are preloaded via <link rel='preload'> — Framer handles font orchestration at render time. No CSS custom properties observed in the cascade; the palette lives in compiled classes.

• If replicating the type system, source Britti Sans from the original foundry (with proper licensing), not from Framer's CDN
• Use Framer Motion for scroll reveals with useReducedMotion guards; keep level at moderate, not expressive
• Adopt Tailwind custom breakpoint md=810 to match the density rhythm
• No CSS custom properties required — compiled utility classes are the token surface
• Icons stroke-based at 1.5-2px weight; integration chips use the partner's own brand icon at its brand colour

• Use Britti Sans Variable + Inter Variable as the only two typographic voices.
• Keep primary text pure #000 on an off-white #eceff3 canvas — commit to the decisive contrast.
• Preserve native #0000ee for inline anchors when the editorial tone demands credibility.
• Use the three-layer soft shadow stack for cards instead of a single drop-shadow.
• Treat partner integration colours as first-class palette citizens when your product is a connector.
• Keep motion moderate — Framer Motion at 0.5s ease is the tempo signature.
• Pick the container tier (724 / 836 / 1080 / 1280) based on content density, not layout convenience.

• Do not ship Britti Sans Trial in production without a commercial licence — it is trial-licensed on the source.
• Do not replace #0000ee with a branded hyperlink colour — the preserved default is the brand choice.
• Do not substitute a single-layer drop shadow for the multi-layer stack — identity breaks immediately.
• Do not use the integration chip palette as decoration — only to identify partner products.
• Do not invent the #eceff3 canvas without testing — pure white often looks washed-out by comparison.
• Do not adopt the 810px md breakpoint without justifying it; if unsure, fall back to Tailwind's 768.

• Typography must render with variable-weight Britti Sans and Inter — static substitutes break the duet tension.
• All shadows must honour the observed rgba stacks exactly — the multi-layer grammar only works with the measured opacities.
• Accents must pass AA contrast against the surface they sit on; promote to #625df5 on white, demote to pure #000 on #eceff3 otherwise.
• Custom md breakpoint must be documented in the Tailwind config; do not silently override the 768 default in other stylesheets.
• Motion durations are quantised — 0.2s or 0.5s only.

• Does primary body text render in pure #000 against an off-white canvas (#eceff3 or equivalent), not near-black on white?
• Do cards use the three-layer soft shadow stack (shadow-xs) rather than a single drop-shadow?
• Is Britti Sans Variable paired exclusively with Inter Variable, with no third display family in sight?
• Are integration chips rendered at 80px radius with 1px hairline ring and partner brand colour icon?
• Does the layout pick one of four container tiers (724 / 836 / 1080 / 1280) based on content density?
• Is scroll-reveal motion handled via Framer Motion at moderate level (0.5s ease or the single cubic-bezier(0.44, 0, 0.56, 1)) with useReducedMotion guards?