Build and ship on a premium design system.
norcel is the dark-only design system for SaaS, AI applications, and enterprise dashboards. Production-ready components, accessible by default, crafted for the modern dark interface.
// The design language
Inspired by the best.
Engineered for shipping.
Every component follows the same principles that make modern developer tools feel premium: minimal, focused, and crafted down to the pixel.
- Sentence-case headlines with negative tracking
- Two pill scales that coexist deliberately
- Stacked shadows, never single heavy drops
- Mono for technical labels, sans for everything else
- norcel
- .vscode
- public
- src
- components
- ui
- button.tsx
- card.tsx
- input.tsx
- badge.tsx
- marketing
- lib
- theme.ts
- colors.ts
- utils.ts
- app
- globals.css
- package.json
- tailwind.config.ts
- tsconfig.json
1// norcel — design system tokens2// Dark-only. Designed for dark interfaces.3 4import "./colors";5import { tokens } from "./tokens";6 7export const theme = {8 primary: "#171717",9 canvas: "#0a0a0a",10 tracking: "-0.05em",11 radius: "100px",12 mesh: brandGradient(),13 shadow: {14 s1: "0 1px 1px #00000020",15 s5: "0 30px 60px -20px #000000b3",16 },17 18 tokens: tokens,19};20 21export type Theme = typeof theme;/ // what's included
Everything you need to ship faster.
Polished primitives, marketing sections, authentication flows, and dashboard surfaces — all in one cohesive system.
34 components
Buttons, inputs, dialogs, drawers, tables, charts, command palette, and more — all built on Radix primitives.
Themable tokens
Every color, spacing, radius, and shadow is a token. Re-skin the entire system by changing a few values.
Accessible by default
WCAG AA contrast, keyboard navigation, focus rings, ARIA attributes, and reduced-motion support.
Copy-paste ready
Drop any component into another Next.js project. Tree-shakeable, fully typed, zero magic.
Optimized for speed
Server Components by default. Minimal client JS. Excellent Lighthouse scores across the board.
Variants with CVA
Class Variance Authority gives you type-safe variant props for every component — no string soup.
// built for every surface
One system, every context.
From marketing to dashboards to auth, the same primitives compose into every experience you need to ship. Pick a surface to see it in action.
// dashboard
Dashboard.
Real-time metrics, charts, and tables — rendered with the same primitives as the marketing site.
- Sidebar with active-row indicator
- Stat cards with trend deltas
- Area chart with brand gradient
- Searchable, filterable data table
// developer experience
Built for the people who build.
Every component is a Server Component by default. Every API is fully typed. Every decision is documented.
- Server Components by defaultZero client JS until you opt in.
- Fully typed propsStrict TS, exported variants, IntelliSense.
- Tree-shakeableImport only what you ship.
- Zero runtime depsBuilt on Radix + CVA, that's it.
1import { Button, buttonVariants } from "@/components/ui/button";2import { cn } from "@/lib/utils";3 4export function PrimaryButton() {5 return (6 <Button7 variant="primary"8 size="lg"9 shape="pill"10 className={cn("shadow-level-1")}11 onClick={handleClick}12 >13 Get started14 </Button>15 )16}// free forever
The kit is free. For everyone. Forever.
No trial, no tier, no card, no "founder pricing" countdown. Just npx shadcn@latest add https://norcel.dev/r/button and the file lands in your project.
$ npx shadcn@latest add https://norcel.dev/r/button// self-referential
The site you're reading is built with the kit.
Every section on this page is made from the same components, tokens, and patterns you get. Here's what the first 30 minutes of building with norcel actually feel like.
“The home page, the docs, the components catalog, this very section — every one of them is a norcel component. When you ship a system and then build the marketing site from it, the components stop being abstract. They become the product's voice.”
“The first pass at the pricing section was 4 cards in a row. After we added FreeForever with the line-through "no trial, no card, no tier" grid, the whole thing felt honest. Stripping out fake numbers did more than any design polish could.”
“We tried to gate the basic Button behind a paywall in a draft. The whole site became untrustworthy in about 10 seconds. Now Button is free forever — the same as every other component we ship today.”
// faq
Frequently asked questions.
Everything you need to know about norcel. Can't find what you're looking for? Reach out to our team.
// ready to ship?
Start building with norcel today.
One command. No account, no card, no email. The whole design system — components, tokens, marketing sections — is yours to use, modify, and ship.
- 34 production-ready components
- 10 marketing sections
- Dark-mode native, light opt-in
- MIT-licensed, forever
// 34 components · 10 marketing sections · 60+ variants · MIT