The design collection
Colorblock
A soft neo-brutalist theme: solid pastel blocks on warm paper, navy ink and hard offset shadows for landing pages, directories and review sites.
Build something people love.
A live preview of this theme — every color, font, radius, and shadow you see is rendered straight from its tokens.
Color system
Click any swatch to copy. Contrast graded against WCAG.
Typography
Body sample. Readable paragraphs, comfortable measure, and a rhythm that holds up across long pages of content and UI.
Radius, shadow & fonts
Components
Real UI rendered with this theme's tokens.
A surface for grouping content, with the theme's border, radius, and shadow.
Principles, guidelines & component specs
Do's & don'ts, spacing, motion, iconography, accessibility, and exact component specs — all in the design.md too.
Do
- •Build every section from flat, solid color blocks on warm paper #f5f3ed.
- •Set text on color blocks in navy #101527 (secondary lines #343e53); white text lives only on navy surfaces.
- •Give interactive elements (primary buttons, search, filters, open accordions, hovered cards) the hard navy offset shadow with zero blur.
- •Rotate block fills in a fixed order (butter, aqua, lavender, mint) and save coral for the one block that leads a group.
- •Set headlines in Space Grotesk 700 with tight negative tracking; keep body and UI in DM Sans.
- •Open each section with a kicker, a large title and a short lead paragraph.
Don't
- •Don't use gradients, glows, blur or glass effects. The system is solid color only.
- •Don't put the hard offset shadow on static content; static blocks stay flat or take the soft card shadow.
- •Don't set white or mid-gray text on coral, butter or aqua blocks; use navy or #343e53.
- •Don't place two blocks of the same hue side by side, horizontally or vertically.
- •Don't use coral for errors or small text. Errors use the destructive red; small coral text uses coral-ink #b02a24.
- •Hover feedback runs 200ms ease on transform, box-shadow, border-color and background only.
- •Hard-shadow elements press toward their shadow: translate(2px,2px) while the offset shrinks from 5px to 3px.
- •Clickable cards lift the other way: translate(-3px,-3px) and gain a 6px navy offset.
- •Sections reveal once on scroll: fade up 24px over 700ms. Carousels slide 450ms on the emphasized curve.
- •Under prefers-reduced-motion: reduce, drop reveals, smooth scrolling, count-ups and slide easing.
Hover to feel this theme's base transition.
Lucide · 2px stroke · 1.25rem. Navy outline icons centred in a 46px white chip (1px rgba(16,21,39,0.1) border) that sits on the colored block. One icon per card; never tint the icon to match the block.
- Navy on every solid block passes AA (coral 6.0:1, butter 12.6:1, aqua 9.5:1, lavender 9.4:1, mint 12.6:1). White on coral does not (3.0:1).
- Secondary text on any color block uses #343e53, except on solid coral where every line is navy.
- Form fields need a 3:1 boundary: 1px var(--input) at rest, navy on hover and focus.
- Never rely on block color alone to carry meaning. Pair it with a label, an icon or a check/cross glyph.
- Decorative glyphs and icons get aria-hidden; ratings are also given as text.
Button
| Background | var(--primary) |
| Text | var(--primary-foreground) |
| Radius | 0.6875rem |
| Padding | 0 1.125rem |
| Height | 3.25rem |
| Weight | 700 |
Primary is butter with a 1px #e8b83e border and a 5px navy offset shadow. Secondary is white with a 1px #bfc1c8 border and no shadow.
Badge
| Background | var(--accent) / var(--primary) |
| Text | var(--accent-foreground) / var(--primary-foreground) |
| Radius | 0.5rem |
| Padding | 0.375rem 0.5625rem |
| Font size | 0.8125rem |
| Weight | 700 |
Tinted chips with a slightly darker border of the same hue and navy text. Rotate hues like blocks.
Alert
| Radius | 1rem |
| Padding | 1rem 1.125rem |
| Border | 0 |
Alerts are solid tint blocks with a navy icon chip and navy text, not bordered boxes.
Form field
| Background | var(--background) |
| Border | 1px solid var(--input) |
| Radius | 0.75rem |
| Height | 3rem |
| Padding | 0.8125rem |
Search and filter inputs use a 1px to 2px navy border plus a 4px to 7px navy offset shadow.
Card
| Background | var(--card) |
| Text | var(--card-foreground) |
| Border | 1px solid var(--border) |
| Radius | 1.25rem |
| Padding | 1.375rem |
| Shadow | 0 12px 28px rgba(29,34,51,0.08) |
Borderless solid fill. Clickable cards gain a 6px navy offset on hover.
The design brief
Colorblock is a soft neo-brutalist design system for landing pages, software directories and review sites: flat pastel color blocks on warm paper, deep navy ink, hard offset shadows on everything clickable, and Space Grotesk headlines over DM Sans body copy. It uses no gradients, glows or glass, and ships light and dark modes that map 1:1 to shadcn/ui and Tailwind variables.
Principles
- Solid color only. Sections are stacks of flat blocks (butter, aqua, lavender, mint, coral) on warm paper
#f5f3ed. Depth comes from color changes and a few hard shadows, never from blends or blur. - Navy is the ink. Deep navy
#101527sets every headline, all text on color, the nav bar, table headers and the footer. - A hard shadow means "press me". A zero-blur navy offset marks primary buttons, search and filter fields, open accordion rows and hovered cards. Static content stays flat.
- Loud headlines, calm copy. Space Grotesk 700 runs large with tracking down to -0.072em and ends in a period. DM Sans copy stays quiet in slate.
When to use
Landing pages, review and comparison sites, software directories, marketplaces, pricing pages and resource hubs: anywhere many cards, categories and verdicts must stay scannable while the brand feels approachable. Choose a different system for dense dashboards, admin tools, or luxury and finance brands that need restraint. The rotating pastel blocks read as playful.
Signature details
- Warm paper
#f5f3edcanvas. White is kept for inputs, tables, forms and accordion rows. - Five solid blocks, coral
#ff5d55, butter#ffd164, aqua#5bcbd7, lavender#bdb1fband mint#a9e4ca, rotated butter, aqua, lavender, mint, with coral saved for the block that leads a group. Navy text on every block. - Butter primary button with a 1px
#e8b83eborder and a5px 5px 0navy shadow that shrinks to 3px when pressed. Hovered cards lift with a6px 6px 0shadow. - Display type up to 94px, line-height 0.92, tracking -0.072em, with one word in violet
#7567e8over a tilted butter highlighter bar. - Every section opens with a kicker: an 18x3px coral dash plus a 12px uppercase label tracked 0.13em in coral-ink
#b02a24. - Rounded corners throughout: 8px tags, 11px controls, 18-22px cards, 28px panels and 34px section panels.
- Dark mode moves to a navy
#101527canvas. Solid blocks keep navy text and hard shadows turn paper-colored.
Use this with your AI
Download or copy the design.md and paste it into Claude, Cursor, or v0 — it tells the agent exactly which colors, fonts, radii, and shadows to use, so your site comes out looking like this.
Export tokens
Drop straight into your codebase.
:root {
--radius: 0.6875rem;
--background: #f5f3ed;
--foreground: #12182c;
--card: #ffffff;
--card-foreground: #12182c;
--popover: #ffffff;
--popover-foreground: #12182c;
--primary: #ffd164;
--primary-foreground: #101527;
--secondary: #f1efe9;
--secondary-foreground: #101527;
--muted: #f1efe9;
--muted-foreground: #596279;
--accent: #ece8ff;
--accent-foreground: #101527;
--destructive: #c93b34;
--destructive-foreground: #ffffff;
--border: #d9d8d2;
--input: #858b98;
--ring: #7567e8;
--shadow-sm: 5px 5px 0 #101527;
--shadow-md: 0 12px 28px rgba(29,34,51,0.08);
--shadow-lg: 0 20px 50px rgba(29,34,51,0.10);
--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
--font-serif: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
--ease-standard: ease;
--ease-emphasized: cubic-bezier(0.2,0.8,0.2,1);
--duration-base: 250ms;
}
.dark {
--background: #101527;
--foreground: #f5f3ed;
--card: #1d2233;
--card-foreground: #f5f3ed;
--popover: #1d2233;
--popover-foreground: #f5f3ed;
--primary: #ffd164;
--primary-foreground: #101527;
--secondary: #272b42;
--secondary-foreground: #f5f3ed;
--muted: #202638;
--muted-foreground: #aeb5c4;
--accent: #303547;
--accent-foreground: #f5f3ed;
--destructive: #c93b34;
--destructive-foreground: #ffffff;
--border: #383e51;
--input: #737a8f;
--ring: #bdb1fb;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--radius: 0.6875rem;
--font-sans: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
}More designs
Citrus
An energetic amber-lime theme: golden primary, zesty accents, and bold type for high-energy promos and event pages.
Sunset
A warm sunset theme: burnt-orange primary, peach accents, and confident type for landing pages that feel energetic and human.
Ember
A bold red theme: confident crimson primary, charcoal neutrals, and strong type for high-stakes launches and bold brands.