Tablekit — The data table your team actually wants to live in
Dense light-mode admin data table (Tablekit): blurred sticky nav, dotted-grid hero, a cobalt-on-white panel with a filter bar, bulk-action bar, sticky-header scroll table with colored status/priority/type badges and avatar chips, and a full pagination footer.
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
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.
Layout & Structure
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.
Sticky nav
Hero
Table heading row
Filter / search bar
Bulk action bar
Data table
Pagination footer
Page footer
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.