Surfaces & Cards
The physical containers, elevation layers, and concentric corner geometry of the Kohl Design System. Engineered around semantic CSS tokens that adapt automatically across Pine and Blush themes in light and dark modes.
Deep forest pine canvas and elevated dark green cards with 8px pebble corners.
1. Five Elevation Layers
Every interface view stacks from Level 0 to Level 4. In dark mode, surfaces are tinted with either Midnight Pine Green or Midnight Berry, never cold gray.
Canvas
The primary viewport surface and page foundation.
Surface / Card
Elevated content blocks, cards, and grid sections.
Popover / Menu
Floating menus, dropdowns, tooltips, and flyouts.
Sunken Well
Recessed areas, code snippets, and nested forms.
Frosted Glass
Sticky headers, navigation overlays, floating bars.
2. Card Variants
Production ready variants of components/ui/card.tsx conforming to the Emil Kowalski philosophy: shadows for elevation, borders for structure.
variant="default"Flat Structural Card
Clean 1px border line for dense dashboards, settings, and tables where low visual noise is paramount.
variant="elevated"Elevated Depth Card
Multi-layered ambient depth shadow for featured products, announcements, and hero marketing moments.
variant="interactive"Interactive Click Card
Micro-press feedback, hover -translate-y-0.5 lift, and border glow. Built for links and catalog cards.
variant="sunken"Recessed Container
Muted background surface for code viewports, terminal logs, or subordinate settings options.
npm install @kohl/surfaces
export { Card, Surface }variant="glass"Frosted Glass Overlay Card
Translucent background with backdrop-blur-md for heads-up displays, floating docks, and sticky action strips.
Dynamic Theme Preservation
Translucent surfaces automatically absorb the ambient tint of the active preset.
3. Concentric Radius Scale
When nesting rounded elements, visual tension occurs if outer and inner radii don't account for padding: outerRadius = innerRadius + padding.
In Kohl Design, child components consume derived tokens (var(--radius-sm) for buttons, var(--radius) for cards), keeping the curves parallel:
var(--radius)Padding: 24px@theme inline {
--radius-sm: calc(var(--radius) - 2px); /* Buttons sm, tags */
--radius-md: var(--radius); /* Cards, standard buttons */
--radius-lg: calc(var(--radius) + 4px); /* Hero buttons, modal containers */
--radius-xl: calc(var(--radius) + 8px); /* Outer frame wrappers */
}Whether you select Pine Base (8px), Blush (14px), or Sharp (2px), all nested elements scale proportionately with zero manual overrides.
4. Surface Playground
Customize surface variants, padding sizes, and content to test how cards adapt in real-time.
Configure Card
Founder Strategy Session
High-touch interface direction, brand architecture, and tactile digital craft.
<Card variant="default" size="default">
<CardHeader>
<CardTitle>Founder Strategy Session</CardTitle>
<CardDescription>
High-touch interface direction, brand architecture, and tactile digital craft.
</CardDescription>
</CardHeader>
<CardContent>
<p className="text-xs text-muted-foreground">
Content slot supporting flexible layout, metrics, or media.
</p>
</CardContent>
<CardFooter>
<span className="text-xs font-mono text-muted-foreground">Active</span>
<Button size="sm">Continue</Button>
</CardFooter>
</Card>5. Quick Start & Bundle Export
How to import Card in your Next.js features or share it with other personal projects.
Standard React Import
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button"
export default function DeliverableCard() {
return (
<Card variant="interactive">
<CardHeader>
<CardTitle>Client Portal Design</CardTitle>
<CardDescription>Design engineering & typography systems.</CardDescription>
</CardHeader>
<CardContent>
<p className="text-xs text-muted-foreground">Status: Review</p>
</CardContent>
<CardFooter>
<Button size="sm">Open Workspace</Button>
</CardFooter>
</Card>
)
}