Skip to content
Back to extractor

Overview

Airtable's enterprise design system is built on a foundation of typographic precision, using the proprietary "Haas Groot Disp" typeface as its primary voice — a refined grotesque that signals both approachability and corporate authority. The system defers to system-native fonts across platforms via a carefully ordered fallback stack, ensuring consistent rendering at scale. The single explicit colour token extracted (#fff) points toward a predominantly light, high-contrast UI pattern common to modern enterprise SaaS.

Signature traits: proprietary grotesque typography, system-font fallback chain, white-dominant icon fill palette, enterprise-grade legibility focus, minimal extracted decoration.

Colors

⚠️ Only one explicit colour value (#fff) was present in the extracted CSS, applied as an SVG fill for the Salesforce integration icon. All other colour tokens below are marked as unresolved and must be confirmed via full stylesheet extraction.

| Role | Token | Hex | Usage | |------|-------|-----|-------| | Background | --color-background | #ffffff | Page backgrounds | | Surface | --color-surface | #ffffff | Card/panel backgrounds | | Text Primary | --color-text-primary | unresolved | Headings, body copy | | Text Secondary | --color-text-secondary | unresolved | Captions, placeholders | | Border | --color-border | unresolved | Dividers, outlines | | Accent | --color-accent | unresolved | CTAs, highlights |

Confirmed Colour Values from CSS

| Source | Value | Context | |--------|-------|---------| | .salesforce_svg__st1 { fill } | #ffffff | Salesforce SVG icon fill — white on coloured background |

Typography

⚠️ Only the font-family stack was extracted. Size, weight, line-height, and letter-spacing values were not present in the provided CSS.

| Role | Family | Size | Weight | Line Height | Letter Spacing | Usage | |------|--------|------|--------|-------------|----------------|-------| | Display | "Haas Groot Disp", "Haas", system stack | unresolved | unresolved | unresolved | unresolved | Hero headlines | | Heading | "Haas Groot Disp", "Haas", system stack | unresolved | unresolved | unresolved | unresolved | Section titles | | Body | "Haas Groot Disp", "Haas", system stack | unresolved | unresolved | unresolved | unresolved | Paragraph text | | Caption | "Haas Groot Disp", "Haas", system stack | unresolved | unresolved | unresolved | unresolved | Labels, metadata | | Mono | unresolved | unresolved | unresolved | unresolved | unresolved | Code, data |

Font Family Stack (Full, as extracted)

"Haas Groot Disp", "Haas", -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif Stack rationale:

  • —"Haas Groot Disp" — primary brand typeface (proprietary Haas display grotesque)
  • —"Haas" — secondary brand alias
  • —-apple-system, "BlinkMacSystemFont" — macOS/iOS native fallback
  • —"Segoe UI" — Windows native fallback
  • —"Roboto" — Android/Chrome OS fallback
  • —"Oxygen", "Ubuntu", "Cantarell" — Linux distribution fallbacks
  • —"Fira Sans", "Droid Sans" — extended open-source fallbacks
  • —"Helvetica Neue" — universal print-quality fallback
  • —sans-serif — browser default termination

Layout

⚠️ No spacing, max-width, or layout values were present in the extracted CSS.

| Token | Value | Context | |-------|-------|---------| | Spacing XS | unresolved | Inline gaps | | Spacing SM | unresolved | Component padding | | Spacing MD | unresolved | Section gaps | | Spacing LG | unresolved | Layout margins | | Spacing XL | unresolved | Section separators | | Max Width | unresolved | Content container |

Responsive strategy: Not determinable from extracted CSS. Expected to follow standard enterprise breakpoints (mobile ~375px, tablet ~768px, desktop ~1280px+) based on site category, but unconfirmed.

Elevation & Depth

⚠️ No box-shadow or elevation values were present in the extracted CSS.

| Level | CSS Value | Usage | |-------|-----------|-------| | sm | unresolved | Cards, tooltips | | md | unresolved | Dropdowns, popovers | | lg | unresolved | Modals, overlays |

Shapes

⚠️ No border-radius values were present in the extracted CSS.

| Token | Value | Applied To | |-------|-------|-----------| | none | 0px | Sharp containers, table cells | | sm | unresolved | Input fields, tags | | md | unresolved | Cards, buttons | | lg | unresolved | Modals, panels | | full | 9999px | Pill badges, avatar rings |

Components

SVG Icon System The extracted CSS contains a targeted SVG class .salesforce_svg__st1 { fill: #fff }, indicating Airtable uses namespaced SVG class conventions for partner/integration icons (e.g. salesforce_svg__). White fills are applied to icon paths, suggesting icons render over coloured or dark backgrounds in integration showcase contexts.

Body-level Typography Override The !important flag on body { font-family } indicates a deliberate override of any third-party or injected stylesheets — common in enterprise platforms that embed external widgets, iframes, or partner content where font consistency must be enforced globally.

Font Loading Strategy The use of a proprietary font ("Haas Groot Disp") at the top of the stack, with an extensive system-font fallback chain, suggests a FOUT-managed or font-display optimised loading strategy to preserve layout stability before the brand font loads.

Do's and Don'ts

| Do ✓ | Don't ✗ | |------|---------| | Use "Haas Groot Disp" as the primary typeface for all text elements | Don't substitute arbitrary web fonts (e.g. Google Fonts) not in the defined stack | | Apply #ffffff (white) as SVG icon fill when rendering on coloured backgrounds | Don't use coloured fills on Salesforce or partner SVG icons without design confirmation | | Honour the full system-font fallback chain for cross-platform consistency | Don't truncate the fallback stack — all entries serve specific platform targets | | Maintain the !important body font-family override to prevent third-party style bleed | Don't override body font-family in component-scoped CSS without explicit justification | | Confirm all unresolved tokens (spacing, colour, radius) from the full production stylesheet before implementation | Don't infer or invent token values not present in the extracted CSS | | Use namespaced SVG class conventions (e.g. partnerName_svg__) for all integration iconography | Don't apply generic class names to partner SVG assets that may conflict globally |

Agent Prompt Guide

You are working within the Airtable: Build Enterprise design system. Key constraints:
- Typography: "Haas Groot Disp" is the primary brand font for all text; fall back to
  -apple-system > BlinkMacSystemFont > Segoe UI > Roboto > Helvetica Neue > sans-serif
- Colours: only #ffffff is confirmed from extracted CSS (used as SVG icon fill);
  do not invent background, text, or accent hex values — defer to the full token sheet
- Spacing: scale tokens (xs/sm/md/lg/xl/2xl) are unresolved — do not hardcode arbitrary
  values; mark as TODO pending full stylesheet extraction
- Radius: no border-radius values confirmed; use 0px (none) or 9999px (full/pill) only
  until md/lg values are extracted
- SVG icons: use namespaced class conventions (e.g. salesforce_svg__st1) and white fills
  on coloured backgrounds
- Never apply font-family overrides without !important at the body level to prevent
  third-party style conflicts
- All unresolved tokens must be flagged as [UNRESOLVED] in code comments until confirmed