skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-airtable

Applies Airtable's design system tokens, typography, and component styles to generated UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#css#color palette#design tokens#ui design#airtable
One-click install
npx skills add https://github.com/deepparser/skills --skill design-airtable-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-airtable
Source: https://github.com/deepparser/skills/tree/main/design-airtable
Command: npx skills add https://github.com/deepparser/skills --skill design-airtable-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Airtable's visual identity requires manually extracting exact colors, fonts, spacing, and shadow values from their site, which is slow and error-prone. ## Core Features & Use Cases - Complete Design Tokens: Provides exact hex colors (Deep Navy #181d26, Airtable Blue #1b61c9), Haas typography scale, spacing, radius, and blue-tinted shadow values. - Component Specifications: Defines button, card, form input, and layout styles matching Airtable's enterprise-friendly aesthetic. - Light and Dark Previews: Bundled HTML preview files show the design system implemented in both themes for visual verification. - Use Case: When asked to build a landing page or dashboard styled like Airtable, the agent applies these exact tokens to produce on-brand UI without guesswork. ## Quick Start Build a landing page for my SaaS product using the Airtable design system.

Frequently Asked Questions about design-airtable

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make my UI look like Airtable?▼

Use Airtable's design tokens: Deep Navy #181d26 for text, Airtable Blue #1b61c9 for CTAs, white surfaces, Haas font family with positive letter-spacing, 12px button radius, and 16px card radius. This skill provides all values plus HTML previews.

What colors and fonts does Airtable use?▼

Airtable uses Deep Navy #181d26 as primary text, Airtable Blue #1b61c9 for buttons and links, and #e0e2e6 for borders. Typography uses the Haas family with a Haas Groot Disp display variant at weights 400-900.

Does this design system include a dark mode?▼

Yes, the skill bundles both preview.html for the light theme and preview-dark.html for a dark theme adaptation. The dark preview inverts surfaces and text while keeping Airtable Blue as the accent color.

What shadow style does Airtable use on cards?▼

Airtable uses a multi-layer blue-tinted shadow combining rgba(0,0,0,0.32) 0px 0px 1px with rgba(45,127,249,0.28) 0px 1px 3px, plus a soft ambient glow of rgba(15,48,106,0.05) 0px 0px 20px.

When should I not use the Airtable design style?▼

Avoid it when the project requires its own distinct brand identity or when heavy shadows and dense layouts are needed, since Airtable's system favors white space, subtle blue-tinted elevation, and positive letter-spacing.

Related Skills

Explore More Design & Creative Skills→
code-vibe-academycode-vibe-academy
2

architecte-contenu

Structures website information with sitemaps, content strategy documents, and Markdown wireframes.

Official
Advanced
ingbyringbyr
2

frontend-design

Convert high-level frontend requirements into production-grade React, Vue, or HTML/CSS interfaces.

Community
Advanced
fiftynotaififtynotai
10

ui-design

Generate accessible UI component specifications with WCAG 2.1 AA contrast ratios.

Community
Intermediate
nexscope-ainexscope-ai
632

ecommerce-branding

Develop e-commerce brand positioning, messaging, and visual identity guidelines.

Official
Intermediate