Tablekit — The data table your team actually wants to live in

{"summary": "A dense, light-mode admin data table app (\"Tablekit\") in a cobalt-on-white system: a blurred sticky top nav, a grid-dot hero with a big tracking-tight headline, then a centered table panel with a filter/search bar, a cobalt bulk-action bar, a scroll-area table with a sticky header, colored type/status/priority badges, avatar chips, and a full pagination footer. The look is a polished Linear/shadcn-tasks aesthetic: tabular-nums data, tight type, soft shadows, rounded-2xl panel.", "style": {"description": "Light, dense SaaS-admin aesthetic. Cobalt accent on a near-white canvas, Inter throughout with tabular numerals and tight letter-spacing, soft layered shadows, generous rounding on the panel but tight rounding on controls. Status conveyed by semantic color (cobalt/amber/violet/slate/emerald/rose) on pale tinted badge fills.", "prompt": "Design system: light mode, page background #f8fafc, primary ink text #0f172a. Accent is a cobalt ramp: 50 #eef4ff, 100 #dbe6ff, 200 #bdd1ff, 300 #93b4ff, 400 #608dff, 500 #3b6bff, 600 #2563eb (primary buttons/brand), 700 #1d4ed8 (hover), 800 #1e40af (dark text on tint). Neutral text uses Tailwind slate (slate-400 #94a3b8, slate-500 #64748b, slate-600 #475569) plus a custom muted-uppercase slate-450 #7c899c for table headers. Borders are slate-200 (#e2e8f0). Semantic badge colors: amber (Bug), violet (Docs), slate (Chore), emerald (Done), rose (High priority / Delete). Typeface: Inter (weights 400/450/500/600/700/800), -webkit-font-smoothing antialiased, font-feature-settings 'cv05' 1,'ss01' 1,'tnum' 1; numeric/data cells use tabular-nums. Letter-spacing -0.012em on headings ('tightish'). Shadows: card = 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06); panel = 0 1px 3px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.12); a glowing cobalt 'pop' shadow 0 10px 30px -10px rgba(37,99,235,.35) on primary buttons. Rounding: panel rounded-2xl, controls/buttons rounded-lg, badges rounded-md, avatars/pills rounded-full. Icons: Lucide line icons (1.5–2px stroke) at 13–16px. Custom thin checkbox (15px, 1.5px slate-300 border, fills cobalt-600 when checked, supports an indeterminate dash state). Selection color #bdd1ff."}, "layout_and_structure": {"description": "Single-column, max-width 1240px centered. Vertical flow: sticky nav (56px) -> full-bleed hero with dotted grid + masked fade -> centered <main> holding a section heading row and one large rounded panel that stacks filter bar / bulk-action bar / scrollable sticky-header table / pagination footer -> a slim page footer. Table is horizontally min-width 760px and scrolls inside a max-height 560px scroll container so the header stays sticky.", "prompts": [{"part": "Sticky nav", "prompt": "Sticky top header (h-14, ~56px), white at 80% opacity with backdrop-blur (saturate(180%) blur(12px)) and a slate-200 bottom border. Left: a 28px cobalt-600 rounded-8px logo tile with a white table-2 Lucide icon + glowing pop shadow, the wordmark 'Tablekit' in 15px font-700 tightish, and a small uppercase 'Beta' pill (cobalt-50 fill, cobalt-200 border, cobalt-700 text). Center (md+): text nav links Tasks/Views/Automations/Docs in 13.5px slate-600, active link is ink with a slate-100 hover chip. Right: a search input (h-8, slate-50 fill, search icon left, a ⌘K kbd chip right; lg+ only), a 32px ghost bell icon button, a cobalt-600 'New task' primary button with a plus icon and pop shadow, and a 32px gradient avatar circle 'TM' (cobalt-500->700) ringed white."}, {"part": "Hero", "prompt": "Full-bleed white hero with a subtle dotted grid background (radial cobalt dots at 22px spacing) masked to fade out toward the bottom, plus a soft blurred cobalt-200 blob top-right. Inside the 1240px container (py-12 to py-16): a small status row (white pill with green dot + '2,184 tasks synced', a separator dot, 'Updated 2 min ago'), then a large headline 'The data table your team actually wants to live in.' at 34px scaling to 44px, font-800, leading-1.08, tracking-tightish. Below: a 15px slate-600 subhead, then two CTAs: primary cobalt-600 'Open the workspace' (arrow-right icon, pop shadow) and a white outlined 'Watch 90s demo' (play icon in cobalt, card shadow)."}, {"part": "Table heading row", "prompt": "Above the panel, a flex row: left = 'Tasks' (20px font-700 tightish) with a 13px slate-500 subtitle 'Here is a list of your tasks for this cycle.'; right = a white outlined 'Export' button (download icon) and a cobalt-600 'New task' primary button (plus icon)."}, {"part": "Filter / search bar", "prompt": "Top strip of the panel (slate-50/60 fill, bottom slate-200 border): a 'Filter tasks…' search input (search icon left), two dashed-border filter buttons 'Status' (circle-dashed icon, with two cobalt-50 chip facets 'In Progress'/'Todo') and 'Priority' (signal icon), a ghost 'Reset' x button, then pushed right: a small segmented view toggle (rows-3 active on cobalt-600 white / layout-grid inactive) and a white 'View' button with sliders icon + chevron-down."}, {"part": "Bulk action bar", "prompt": "A cobalt-50 band with a cobalt-200 top/bottom border, shown when rows are selected: left = a 20px cobalt-600 square count badge '3' + 'selected', and faint 'of 2,184 tasks'. Right cluster of white pill buttons with cobalt-200 borders and cobalt-700 text: 'Set status' (circle-check), 'Assign' (user-plus), 'Label' (tags), a thin vertical divider, then a rose-bordered 'Delete' (trash-2, rose-600)."}, {"part": "Data table", "prompt": "Inside a max-h-560px overflow-auto scroll container, a full-width table (min-w-760px, border-collapse). Sticky thead (top-0, z-20): slate-50 row, 11px uppercase tracking-wide slate-450 header text with a 1px bottom shadow line; columns: a select-all checkbox (15px, indeterminate dash state), Task (w-32), Title, Status (w-40), Priority (w-32), Assignee (w-24), and a trailing actions column. Body rows are 13px tabular-nums, ~py-2.5 dense height, slate-100 bottom borders, hover #f6f9ff, selected rows tinted #eef4ff with their checkbox checked. Each row: checkbox; mono-ish task id (e.g. TBK-8901) in font-600 slate-500; a Title cell = a small type badge (Feature=cobalt, Bug=amber, Docs=violet, Chore=slate) + a truncating task title in font-500 ink; a Status cell = Lucide icon + label (In Progress=circle-dot cobalt, Todo=circle slate, Done=circle-check emerald, Canceled=circle-slash slate); a Priority cell = arrow-up rose 'High' / minus amber 'Medium' / arrow-down slate 'Low'; an Assignee = a 24px colored initials avatar (AR cobalt / JL slate / MK emerald); a trailing more-horizontal kebab ghost button."}, {"part": "Pagination footer", "prompt": "Panel footer (slate-50/60, top slate-200 border): left = 'N of 2,184 row(s) selected.' in 12.5px slate-500. Right cluster: 'Rows per page' with a small '25' dropdown button (chevrons-up-down), 'Page 1 of 88' text, and a 4-button pager (chevrons-left, chevron-left both disabled/slate-300; chevron-right, chevrons-right active slate-600). Below the panel, a centered 12px slate-400 caption line."}, {"part": "Page footer", "prompt": "Slim white footer with a slate-200 top border, 1240px container: left = a 20px cobalt-600 logo tile (table-2 icon) + 'Tablekit' + '© 2026'; right = text links Changelog / API / Status in 12.5px slate-500 with ink hover."}]}, "special_ui_components": ["Sticky, backdrop-blurred translucent top navigation bar", "Sticky table header that pins inside a scrollable max-height container (header never overlaps row 1)", "Custom 15px checkbox with checked + indeterminate (dash) states", "Contextual cobalt bulk-action bar that appears for selected rows", "Semantic colored badges (type / status icon-label / priority arrow) and colored initials avatars", "Dashed-border facet filter buttons with inline selected-value chips", "Segmented table/board view toggle", "Dotted-grid hero background with a linear-gradient mask fade", "Full pagination footer with rows-per-page selector and disabled-state pager buttons"], "special_notes": "Keep it dense and tabular: numerals must be tabular-nums and type tight; this is an information surface, not a marketing page. The cobalt-600 #2563eb is the only saturated color used structurally (brand tile, primary buttons, selection, active states); every other color is a low-saturation semantic tint used only inside badges/icons. The sticky header must live on the scroll container (thead sticky top-0), not the page, so it stays put while body rows scroll under it. Use Inter with tabular-nums + 'tightish' (-0.012em) heading tracking, soft layered shadows, and a glowing cobalt 'pop' shadow reserved for primary CTAs. Mobile reflow: nav center links and the search/⌘K hide, badge facet chips and secondary labels hide, the table stays horizontally scrollable at min-width 760px."}

---
"Tablekit — The data table your team actually wants to live in" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/tablekit-the-data-table-your-team-actually-wants-to-live-in @ 6c6090694520.
powered by Styledex — https://styledex.dev

Tokens

{
  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
  "$description": "Tablekit — The data table your team actually wants to live in. \"Tablekit — The data table your team actually wants to live in\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/tablekit-the-data-table-your-team-actually-wants-to-live-in @ 6c6090694520.",
  "$extensions": {
    "dev.styledex": {
      "id": "superdesign-tablekit-the-data-table-your-team-actually-wants-to-live-in",
      "license": "CC0-1.0",
      "attribution": "\"Tablekit — The data table your team actually wants to live in\" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/tablekit-the-data-table-your-team-actually-wants-to-live-in @ 6c6090694520.",
      "banner": "powered by Styledex — https://styledex.dev"
    }
  },
  "color": {
    "background": {
      "$type": "color",
      "$value": "#f8fafc"
    },
    "foreground": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "card": {
      "$type": "color",
      "$value": "#f8fafc"
    },
    "card-foreground": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "primary": {
      "$type": "color",
      "$value": "#f8fafc"
    },
    "primary-foreground": {
      "$type": "color",
      "$value": "#1c1917"
    },
    "secondary": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "secondary-foreground": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "accent": {
      "$type": "color",
      "$value": "#0f172a"
    },
    "accent-foreground": {
      "$type": "color",
      "$value": "#fafaf9"
    },
    "muted": {
      "$type": "color",
      "$value": "#e9ebed"
    },
    "muted-foreground": {
      "$type": "color",
      "$value": "#636875"
    },
    "border": {
      "$type": "color",
      "$value": "#d5d7d9"
    },
    "destructive": {
      "$type": "color",
      "$value": "#dc2626"
    },
    "ring": {
      "$type": "color",
      "$value": "#f8fafc"
    }
  },
  "font": {
    "sans": {
      "$type": "fontFamily",
      "$value": [
        "ui-sans-serif",
        "system-ui",
        "sans-serif"
      ]
    },
    "serif": {
      "$type": "fontFamily",
      "$value": [
        "ui-serif",
        "Georgia",
        "serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "monospace"
      ]
    }
  },
  "radius": {
    "base": {
      "$type": "dimension",
      "$value": "0.5rem"
    }
  },
  "spacing": {
    "base": {
      "$type": "dimension",
      "$value": "1rem"
    }
  },
  "shadow": {
    "base": {
      "$type": "shadow",
      "$value": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
    }
  }
}

/* powered by Styledex — https://styledex.dev */
/* "Tablekit — The data table your team actually wants to live in" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/tablekit-the-data-table-your-team-actually-wants-to-live-in @ 6c6090694520. */
:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --card: #f8fafc;
  --card-foreground: #0f172a;
  --primary: #f8fafc;
  --primary-foreground: #1c1917;
  --secondary: #0f172a;
  --secondary-foreground: #0f172a;
  --accent: #0f172a;
  --accent-foreground: #fafaf9;
  --muted: #e9ebed;
  --muted-foreground: #636875;
  --border: #d5d7d9;
  --destructive: #dc2626;
  --ring: #f8fafc;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}

/* powered by Styledex — https://styledex.dev */
/* "Tablekit — The data table your team actually wants to live in" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/tablekit-the-data-table-your-team-actually-wants-to-live-in @ 6c6090694520. */
/** Tailwind theme extend for Tablekit — The data table your team actually wants to live in (superdesign-tablekit-the-data-table-your-team-actually-wants-to-live-in) */
module.exports = {
  "theme": {
    "extend": {
      "colors": {
        "background": "#f8fafc",
        "foreground": "#0f172a",
        "card": "#f8fafc",
        "primary": "#f8fafc",
        "primary-foreground": "#1c1917",
        "secondary": "#0f172a",
        "accent": "#0f172a",
        "muted": "#e9ebed",
        "border": "#d5d7d9",
        "destructive": "#dc2626",
        "ring": "#f8fafc"
      },
      "borderRadius": {
        "lg": "0.5rem"
      },
      "fontFamily": {
        "sans": [
          "ui-sans-serif",
          "system-ui",
          "sans-serif"
        ],
        "serif": [
          "ui-serif",
          "Georgia",
          "serif"
        ],
        "mono": [
          "ui-monospace",
          "SFMono-Regular",
          "Menlo",
          "monospace"
        ]
      },
      "boxShadow": {
        "styledex": "0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04)"
      }
    }
  }
};

/* powered by Styledex — https://styledex.dev */
/* "Tablekit — The data table your team actually wants to live in" from https://github.com/superdesigndev/superdesign-prompts (CC0-1.0). © Superdesign. prompts/tablekit-the-data-table-your-team-actually-wants-to-live-in @ 6c6090694520. */
@layer base {
:root {
  --background: #f8fafc;
  --foreground: #0f172a;
  --card: #f8fafc;
  --card-foreground: #0f172a;
  --primary: #f8fafc;
  --primary-foreground: #1c1917;
  --secondary: #0f172a;
  --secondary-foreground: #0f172a;
  --accent: #0f172a;
  --accent-foreground: #fafaf9;
  --muted: #e9ebed;
  --muted-foreground: #636875;
  --border: #d5d7d9;
  --destructive: #dc2626;
  --ring: #f8fafc;
  --radius: 0.5rem;
  --font-sans: ui-sans-serif, system-ui, sans-serif;
  --font-serif: ui-serif, Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --spacing: 1rem;
  --shadow: 0 1px 2px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
}