{"id":"f4ef80f4-f6e5-4aea-8045-f99efaf208b8","source":{"name":"Refero","url":"https://styles.refero.design/","kind":"public-design-reference"},"contributors":[{"name":"Refero","role":"reference-helper","url":"https://styles.refero.design/"}],"attributionLabel":"Referenced with help from Refero","sourceUrl":"https://styles.refero.design/style/f4ef80f4-f6e5-4aea-8045-f99efaf208b8","originalSiteUrl":"https://airtable.com","capturedAt":"2026-04-13T22:24:46.572Z","licenseNote":"Public design-reference facts mirrored from Refero for agent context. Keep source attribution visible and verify rights before reusing media, logos, or brand assets.","name":"Airtable","summary":"Polished Workflow, Vibrant Efficiency — like a perfectly organized, brightly lit command center.","description":"The Airtable design system conveys an approachable enterprise workflow platform. Its light theme and ample spacing provide a sense of clarity, grounded by a distinctive dark blue (#181D26) for strong text elements and primary actions. Functional interactivity is highlighted by a bright blue (#1B61C9) while a palette of vivid, multi-colored accents introduces a playful, almost illustrative quality, suggesting flexibility and creativity within a structured environment. Rounded corners and subtle shadows soften the experience, making complex AI tools feel less intimidating.","industry":"productivity","colorScheme":"light","colors":[{"name":"White Canvas","hex":"#ffffff","role":"Page background, primary surface color for cards and major sections.","group":"neutral"},{"name":"Cloud Whisper","hex":"#f8fafc","role":"Secondary background, subtle visual break for content cards and sections.","group":"neutral"},{"name":"Warm Parchment","hex":"#faf5e8","role":"Dominant canvas color, offers a slight warmth compared to pure white, establishing the overall page tone.","group":"neutral"},{"name":"Slate Ink","hex":"#181d26","role":"Primary heading color, strong body text, and background for primary action buttons. The core dark neutral.","group":"neutral"},{"name":"Deep Graphite","hex":"#333333","role":"General text color, provides strong contrast against light backgrounds.","group":"neutral"},{"name":"Soft Steel","hex":"#333840","role":"Default body text, slightly softer than Deep Graphite for secondary text information.","group":"neutral"},{"name":"Silver Mist","hex":"#e0e2e6","role":"Subtle borders, dividers, and disabled button backgrounds.","group":"neutral"},{"name":"Muted Stone","hex":"#41454d","role":"Less prominent body text, link text in paragraphs.","group":"neutral"},{"name":"Cool Gray","hex":"#9297a0","role":"Navigation text, inactive icons, subtle borders.","group":"neutral"},{"name":"Frost","hex":"#c7e5f2","role":"Light background shade, used on some interactive elements when hovered.","group":"neutral"},{"name":"Dark Shadow","hex":"#040e20","role":"Very dark text color, appears for headings and body text, a deeper contrast option.","group":"neutral"},{"name":"Ocean Accent","hex":"#1b61c9","role":"Call-to-action buttons, active navigation links, and interactive elements. Stands out clearly.","group":"accent"},{"name":"Sky Veil","hex":"#c4dbfd","role":"Subtle accent, often appears as a box shadow for active elements or focus states.","group":"accent"},{"name":"Amethyst","hex":"#254fad","role":"Brand accent, used for specific interactive elements and highlighting key information, hinting at information or success.","group":"brand"},{"name":"Burnt Sienna","hex":"#aa2d00","role":"Brand accent, used in specific illustrative contexts and text highlighting, indicates urgency or warning.","group":"brand"},{"name":"Forest Nudge","hex":"#0a2e00","role":"Brand accent, used for success indications and positive feedback, often in illustrative elements.","group":"brand"},{"name":"Sweet Pink","hex":"#fa91e0","role":"Brand accent, used decoratively in illustrations and data visualizations for visual separation.","group":"brand"},{"name":"Sunburst","hex":"#fcb42a","role":"Brand accent, used for highlighting and decorative elements, adds a vibrant pop.","group":"brand"},{"name":"Mars Red","hex":"#912e1f","role":"Background for specific card variations, provides a strong, warm contrast.","group":"brand"},{"name":"Tropical Orange","hex":"#fcab79","role":"Background for specific interactive elements or badges, a softer version of the orange accent.","group":"brand"},{"name":"Dark Forrest","hex":"#214224","role":"Darker shade of green, for text against lighter green backgrounds or specific brand elements.","group":"brand"},{"name":"Warm Gold","hex":"#423719","role":"Darker shade of yellow-brown, primarily for headings in certain branded contexts.","group":"brand"}],"typography":[{"role":"Headline font. Used for prominent headings and titles like 'All your teams, all their workflows'. The thick weight at 48px creates a bold, authoritative statement without being overly aggressive due to the spacious line height.","sizes":"20px, 48px","family":"Haas Groot Disp","weight":"400, 900","lineHeight":"1.50","substitute":"IBM Plex Sans","letterSpacing":"0"},{"role":"Primary UI font for body text, navigation, and most interactive elements. Weight 400 maintains approachability. Sizes range from small captions to larger subheadings, ensuring versatility. Letter spacing is slightly positive on smaller text to enhance legibility, tightening to normal at larger sizes.","sizes":"14px, 16px, 18px, 20px, 24px, 32px, 40px","family":"Haas","weight":"400, 500, 600","lineHeight":"1.15, 1.20, 1.25, 1.30, 1.35, 1.50","substitute":"Inter","letterSpacing":"0.007"},{"role":"Medium weight for secondary interactive elements, button text, and emphasized body copy. Provides a subtle distinction from regular body text without becoming too heavy.","sizes":"14px, 16px, 18px, 20px, 24px, 32px, 40px","family":"Haas","weight":"400, 500, 600","lineHeight":"1.15, 1.20, 1.25, 1.30, 1.35, 1.50","substitute":"Inter","letterSpacing":"0.006"},{"role":"Semibold weight used for navigation headings, strong labels, and section titles where additional emphasis is paramount. It provides hierarchy and readability against lighter backgrounds.","sizes":"14px, 16px, 18px, 20px, 24px, 32px, 40px","family":"Haas","weight":"400, 500, 600","lineHeight":"1.15, 1.20, 1.25, 1.30, 1.35, 1.50","substitute":"Inter","letterSpacing":"0.005"}],"typeScale":[{"role":"caption","size":14,"lineHeight":1.35,"letterSpacing":0.007},{"role":"body","size":16,"lineHeight":1.3,"letterSpacing":0.007},{"role":"subheading","size":18,"lineHeight":1.25,"letterSpacing":0.007},{"role":"heading-sm","size":20,"lineHeight":1.2,"letterSpacing":0.006},{"role":"heading","size":24,"lineHeight":1.2,"letterSpacing":0.006},{"role":"heading-lg","size":32,"lineHeight":1.15,"letterSpacing":0.005},{"role":"display","size":48,"lineHeight":1.5,"letterSpacing":0}],"spacing":{"radius":{"nav":"12px","cards":"16px","links":"12px","buttons":"12px"},"elementGap":"16px","sectionGap":"40-80px","cardPadding":"24-48px","pageMaxWidth":"1280px"},"radius":{"nav":"12px","cards":"16px","links":"12px","buttons":"12px"},"shadows":{"surfaces":[{"hex":"#faf5e8","name":"Warm Parchment","level":0,"purpose":"Dominant page canvas, providing a slightly off-white, warm base."},{"hex":"#ffffff","name":"White Canvas","level":1,"purpose":"Primary content surface, used for main sections, navigation, and primary cards, sitting directly on the canvas."},{"hex":"#f8fafc","name":"Cloud Whisper","level":2,"purpose":"Secondary, slightly elevated content surface, for cards or content blocks that need a subtle visual separation or grouping."}]},"guidelines":{"do":["Prioritize Slate Ink (#181D26) for headlines and primary actions against light backgrounds for strong contrast.","Use Ocean Accent (#1B61C9) exclusively for interactive elements like primary CTAs and active navigation links.","Apply 12px border-radius consistently to all buttons and similar interactive elements for a softened feel.","Maintain comfortable spacing with 16px for elementGap and 24-48px for cardPadding to ensure visual breathing room.","Utilize Haas Groot Disp (or IBM Plex Sans fallback) at its 900 weight for eye-catching, high-impact headlines.","Employ the full palette of vivid brand accents (Amethyst, Burnt Sienna, Forest Nudge, Sweet Pink, Sunburst) for illustrative elements, badges, or specific content blocks, not for core UI text or backgrounds.","Elevate primary navigation and critical interactive buttons with subtle box shadows to indicate hierarchy and interactivity."],"dont":["Do not use Gray Mist (#E0E2E6) for primary text or backgrounds that require strong contrast.","Avoid using the vivid brand accent colors for standard text or backgrounds; reserve them for highlighting and illustration.","Do not introduce sharp corners on interactive components; maintain the established 12px or 16px radius for buttons and cards.","Avoid excessive use of shadows; most elevation is achieved through color contrast and subtle background shades.","Do not use letter-spacing on display-sized text; keep it normal for Haas Groot Disp at 48px.","Do not condense spacing beyond 16px for element gaps; preserve the comfortable density."]},"components":[{"name":"Primary Filled Button","role":"Call to Action"},{"name":"Secondary Outline Button","role":"Secondary Action"},{"name":"White Filled Button","role":"Tertiary/Alternate Action"},{"name":"Compact Nav Link","role":"In-line Navigation Link/Tag"},{"name":"Base Card","role":"Content container"},{"name":"Subtle Card","role":"Content container"},{"name":"Accent Card - Mars Red","role":"Highlighted Content Container"},{"name":"White Elevated Card","role":"Prominent Content Container"},{"name":"Input / Search Bar","role":"Data Entry Field"},{"name":"Navigation Bar","role":"Site Navigation"}],"customSections":[{"title":"Agent Prompt Guide","content":"**Quick Color Reference:**\n- Text (Strong): `#181D26` (Slate Ink)\n- Text (Body): `#333840` (Soft Steel)\n- Background (Canvas): `#faf5e8` (Warm Parchment)\n- Background (Surface 1): `#ffffff` (White Canvas)\n- CTA Button (Background): `#181D26` (Slate Ink)\n- Accent (Interactive): `#1b61c9` (Ocean Accent)\n- Border (Subtle): `#e0e2e6` (Silver Mist)\n\n**3-5 Example Component Prompts:**\n1. **Create a hero section:** Background is Warm Parchment (#faf5e8). Centered headline: 'All your teams, all their workflows—connected in one workspace' using Haas Groot Disp, 48px, weight 900, Slate Ink (#181D26). Subtext: 'Build AI-powered workflows...' using Haas, 18px, weight 400, Soft Steel (#333840). Follow with a Primary Filled Button: 'Get started for free' (Slate Ink background, White Canvas text, 12px radius, 16px/24px padding). Below this, an image of the product UI, featuring a search bar component (White Canvas background, 12px radius, subtle shadow, containing an input with Slate Ink text).\n2. **Generate a feature card:** Background Cloud Whisper (#f8fafc), 16px border-radius, 24px internal padding. Title: 'Production apps at prototype speed' using Haas, 24px, weight 600, Slate Ink (#181D26). Body text 'Streamline your team’s critical data...' using Haas, 16px, weight 400, Soft Steel (#333840). Include a 'Learn more' Primary Filled Button (Ocean Accent background, White Canvas text, 12px radius, 16px/24px padding) aligned right.\n3. **Design a customer logo band:** White Canvas (#ffffff) background, with a top border of Silver Mist (#E0E2E6). Section padding 40px top/bottom. Centered heading 'Trusted by 500,000 leading teams' using Haas, 20px, weight 600, Dark Shadow (#040e20). Display 5-6 customer logos, each treated as a transparent image against the white background, with 32px column and row gaps between them."}],"media":{"screenshotUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776119056975-screenshot.jpg","thumbnailUrl":"https://ysxnuuuj3kqhdyj2.public.blob.vercel-storage.com/1776119056975-thumb.jpg"},"similarStyleIds":["8d4a4e15-31f1-4509-8d13-7746f85c20d7","2b41e7c4-1e8c-4ea2-a87f-51e24c57886e","9946887b-ffa9-4276-af81-ae6352795afb","ced1c98f-d489-48f7-a01f-1fa59a07b706","77ee57e9-9f8e-4ec1-93f7-cc1c4b84307a","0ab4c544-6147-4998-8365-3a0f6191e54f","e1c7cab3-dae7-47c3-bb2c-c8f616a8124f","729ba7a8-35d5-44f3-abc0-1078ff6a3467","376baf20-9ace-405d-bf4a-086016f2b1e3","b5ca4e9a-2322-4796-b4c5-3b3bf194821f","9342e89b-c2fe-4acf-9993-53b44e0c13b5","efcb73cb-b84a-4ae7-9a2b-e1116f79f130","47c9e353-bed3-4d6c-8316-63a2db5cc377","26dac924-d1c8-4097-af0f-0417ccb12128","a80cb179-2d90-4896-b52d-4e674b421498","18e2c0b4-f29c-4e84-90b0-1d8066b59409","d3289fe7-a85e-42d8-96b7-eb7faa62a104","ebbfbc6a-988b-4f33-b261-d431b2327545","64aadcc7-f884-41ea-9b0b-a90dfc10c9ec","6b2a0513-df80-4140-87a8-38b1fef34313"],"exports":{"designMdUrl":"/references/refero/f4ef80f4-f6e5-4aea-8045-f99efaf208b8/design.md","tokensJsonUrl":"/references/refero/f4ef80f4-f6e5-4aea-8045-f99efaf208b8/tokens.json","tailwindV4Url":"/references/refero/f4ef80f4-f6e5-4aea-8045-f99efaf208b8/tailwind-v4.css","cssVariablesUrl":"/references/refero/f4ef80f4-f6e5-4aea-8045-f99efaf208b8/tailwind-v4.css"}}