DINK // NEXT
Setup Guide
One-time setup for using DINK // NEXT components. Add these to your project, then copy any component from the theme.
1
Install dependencies
The cn() utility combines clsx and tailwind-merge for conditional class names. Install both packages.
BASH
npm install clsx tailwind-merge2
Add utility function
Create lib/utils.ts with the cn() helper. Every component imports this for class name merging.
TS
import { type ClassValue, clsx } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]): string {
return twMerge(clsx(inputs))
}3
Add design tokens
Add the DINK // NEXT design tokens to your globals.css. These define colors, fonts, and animation tokens used by every component in the theme.
CSS
@theme {
/* ── Colors ─────────────────────────────────────────── */
--color-dink-yellow: #FACC15;
--color-dink-yellow-dark: #E6B800;
--color-dink-cobalt: #2563EB;
--color-dink-cobalt-dark: #1D4ED8;
--color-dink-coral: #F05A4F;
--color-dink-coral-dark: #D94539;
--color-dink-cream: #FFFBEC;
--color-dink-cream-dark: #FFF3C4;
--color-dink-ink: #0D0D0D;
--color-dink-ink-soft: #1A1A1A;
--color-dink-muted: #4A4030;
--color-dink-green: #22c55e;
--color-dink-green-dark: #16a34a;
--color-dink-white: #FFFFFF;
/* ── Fonts ──────────────────────────────────────────── */
--font-display: var(--font-fredoka);
--font-body: var(--font-dm-sans);
/* ── Animations ─────────────────────────────────────── */
--animate-blink: blink-cursor 0.8s step-end infinite;
--animate-float: gentle-float 4s ease-in-out infinite;
--animate-pulse-soft: pulse-soft 2.5s ease-in-out infinite;
}4
Add component styles
Each component may need its own CSS classes in your globals.css. Copy the styles for the components you use.
CSS
/* ─── Buttons ────────────────────────────────────────── */
.btn-base {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 700;
border: 3px solid var(--color-dink-ink);
border-radius: 10px;
cursor: pointer;
text-decoration: none;
line-height: 1;
letter-spacing: 0.02em;
transition: transform 0.1s, box-shadow 0.1s;
white-space: nowrap;
}
.btn-base:hover { transform: translate(-2px, -2px); text-decoration: none; }
.btn-base:active { transform: translate(2px, 2px) !important; }
.btn-sm { font-size: 0.8rem; padding: 7px 16px; }
.btn-md { font-size: 0.9rem; padding: 12px 24px; }
.btn-lg { font-size: 1rem; padding: 15px 32px; }
.btn-primary {
background: var(--color-dink-yellow);
color: var(--color-dink-ink);
box-shadow: 6px 6px 0px var(--color-dink-ink);
}
.btn-primary:hover {
box-shadow: 8px 8px 0px var(--color-dink-ink);
color: var(--color-dink-ink);
}
.btn-secondary {
background: var(--color-dink-cobalt);
color: #fff;
box-shadow: 6px 6px 0px var(--color-dink-ink);
}
.btn-secondary:hover {
box-shadow: 8px 8px 0px var(--color-dink-ink);
color: #fff;
}
.btn-ghost {
background: transparent;
color: var(--color-dink-ink);
border-color: rgba(13, 13, 13, 0.3);
box-shadow: none;
}
.btn-ghost:hover {
background: var(--color-dink-cream-dark);
box-shadow: none;
transform: none;
}
/* ─── Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
.hero-inner { padding: 60px 20px 48px; }
.hero-buttons { flex-direction: column; align-items: center; }
.hero-buttons .btn-base,
.hero-buttons .btn-hero-ghost { width: 100%; max-width: 280px; justify-content: center; }
.section-pad { padding: clamp(48px, 7vw, 64px) 0; }
.section-sub { margin-bottom: 36px; }
}CSS
/* ─── Badges ─────────────────────────────────────────── */
.badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-weight: 700;
font-size: 0.65rem;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 100px;
border: 2px solid transparent;
}
.badge--yellow { background: rgba(250,204,21,0.15); color: var(--color-dink-yellow-dark); border-color: rgba(250,204,21,0.35); }
.badge--cobalt { background: rgba(37,99,235,0.10); color: var(--color-dink-cobalt); border-color: rgba(37,99,235,0.25); }
.badge--coral { background: rgba(240,90,79,0.10); color: var(--color-dink-coral-dark); border-color: rgba(240,90,79,0.25); }
.badge--green { background: rgba(34,197,94,0.10); color: var(--color-dink-green-dark); border-color: rgba(34,197,94,0.25); }CSS
/* ─── Text Variants ──────────────────────────────────── */
.text-body { font-size: 0.95rem; line-height: 1.75; font-weight: 500; color: var(--color-dink-muted); }
.text-caption { font-size: 0.8rem; font-weight: 500; color: var(--color-dink-muted); }
.text-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.text-code { font-family: 'Courier New', monospace; font-size: 0.85rem; }CSS
/* ─── Features Section ───────────────────────────────── */
.dink-feature-card {
background: var(--color-dink-cream);
padding: 32px 28px;
border-right: 3px solid var(--color-dink-ink);
border-bottom: 3px solid var(--color-dink-ink);
transition: background 0.15s;
position: relative;
}
.dink-feature-card:hover { background: #fff; }
.dink-feature-card:nth-child(3n) { border-right: none; }
.dink-feature-card:nth-child(n+4) { border-bottom: none; }
.feature-title {
font-family: var(--font-display);
font-weight: 700;
font-size: 18px;
color: var(--color-dink-ink);
margin-bottom: 8px;
}
.feature-desc {
font-size: 14px;
color: var(--color-dink-muted);
line-height: 1.55;
}
@media (max-width: 768px) {
.features-grid { grid-template-columns: 1fr; }
.dink-feature-card:nth-child(3n) { border-right: none; }
.dink-feature-card:nth-child(n) { border-right: none; }
.dink-feature-card:last-child { border-bottom: none; }
.dink-feature-card:nth-child(n+4) { border-bottom: 3px solid var(--color-dink-ink); }
.dink-feature-card:last-child { border-bottom: none; }
}DINK // NEXT Components
Button
Retro-toy button with bold 3px borders and flat offset shadows. Solid, outline, and ghost variants in a playful cream and cobalt palette.
Badge
Pill badge with bold borders and color variants. Yellow, cobalt, coral, and green options for retro-toy labeling.
Text
Typography utility with heading, body, caption, and code variants. Fredoka display font for headings, DM Sans for body text.
Card
Feature card with icon, badge, title, and description. Bold borders and flat offset shadow on a cream background.