Tabbed feature card
Links der Kontext, rechts die Produktfläche.
Requested
In progress
Done
Diese Preview nutzt die extrahierten Airtable Tokens, zeigt sie aber in einer Airtable-nahen Oberfläche: White Canvas, dunkle CTA-Buttons, View Tabs, Tabellenraster, farbige Field Badges und große Signature Cards.
Die rote Signature Card ist Airtables Marken-Moment: kein generischer Token-Block, sondern eine produktnahe Story-Fläche mit echten Workflow-Fragmenten.
Airtable lebt von derselben Datenbasis in verschiedenen Ansichten. Deshalb zeigt die Preview Tabellen, Kanban, Record Details und Automation Side Panels statt generischer Kachel-Demos.
Links der Kontext, rechts die Produktfläche.
Dashboards bleiben clean: viel Weiß, klare Field-Gruppen, wenig Shadow.
Die dunkle Karte nutzt den gleichen Ink-Ton wie Primärtext und CTA.
Die Kernmuster sind exakt auf Airtable ausgerichtet: Bases, Views, Fields, Records, Automations.
Cream Callouts brechen den weißen Seitenfluss, bleiben aber leise. Keine lauten Gradients, keine generischen SaaS-Glows.
Semantische Rollen aus der Extraktion: Primärfarbe ist Near Black, Markenenergie kommt über vollflächige Coral, Forest, Cream, Peach, Mint und Yellow Cards.
#181d26#333840#f8fafc#aa2d00#0a2e0e#f5e9d4#fcab79#a8d8c4#f4d35e#1b61c9Haas Grotesk/Display Logik: moderate Gewichte, starke Größe, ruhige Line Heights. Display ist bewusst nicht fett.
48 / 500 / 1.140 / 400 / 1.224 / 400 / 1.3514 / 400 / 1.25Buttons, Formfelder, Cards, Radius und Elevation sind als echte UI-Elemente gerendert, aber in Airtable-Dichte und Airtable-Rhythmus.
4px Basis, große Sections mit 96px. Diese Luft ist ein Kernbestandteil der Airtable-Komposition.
Copy-paste-fähige CSS-Variablen für den nächsten Agenten oder Frontend-Prototyp.
:root {
--airtable-primary: #181d26;
--airtable-body: #333840;
--airtable-muted: #41454d;
--airtable-canvas: #ffffff;
--airtable-surface-soft: #f8fafc;
--airtable-hairline: #dddddd;
--airtable-coral: #aa2d00;
--airtable-forest: #0a2e0e;
--airtable-cream: #f5e9d4;
--airtable-peach: #fcab79;
--airtable-mint: #a8d8c4;
--airtable-yellow: #f4d35e;
--airtable-link: #1b61c9;
--airtable-radius-sm: 6px;
--airtable-radius-md: 10px;
--airtable-radius-lg: 12px;
--airtable-pill: 9999px;
--airtable-section: 96px;
}