Component Specification · 01

Button Component

Built on top of shadcn/ui and tailored for the kohl.design brand identity. Features signature Pine and Crimson palettes, dynamic var(--radius) corner radii, tactile click micro-animations, and integrated loading states.

Project Preset Switcher(Preview how tokens adapt for your other personal projects)

Active Preset: Original kohl.design brand identity with deep forest pine and 8px pebble corners.

1. Brand Style Variants

Core brand variants engineered for primary conversions, dual-register moments, and utility surfaces.

Primary Pinevariant="default"

Signature Pine Green hue with subtle elevation depth for dominant primary conversions and key CTAs.

Brand Editorialvariant="editorial"

Soft blush wash with crimson typography. Pairs with Cooper headlines.

Secondary Surfacevariant="secondary"

Subdued neutral grey-slate fill for lower-emphasis supporting actions.

Crisp Outlinevariant="outline"

Crisp 1px border line for filters, navigation bars, and paired secondary buttons.

Ghost Cleanvariant="ghost"

Zero background until hover. Ideal for data table actions and toolbars.

Destructivevariant="destructive"

High-alert actions like resource deletion, project cancellations, or revocations.

Inline Linkvariant="link"

Underlined link appearance with full button semantics and keyboard accessibility.

2. Size Scale & Touch Targets

Proportional height, padding, gap, and icon sizing based on the 4px design grid with 8px corner radii.

size="sm" · 28px (h-7, Compact)

size="default" · 32px (h-8, 14px font, Primary Base)

size="lg" · 40px (h-10)

size="xl" · 48px (h-12, Hero)

Square Icon Buttons

size="icon-sm" (28px)

size="icon" (32px)

size="icon-lg" (40px)

size="icon-xl" (48px)

3. Iconography & Next.js Link Composition

Composing buttons with leading icons, trailing arrows, counters, or as accessible navigation links.

Leading & Trailing Icons

Automatic optical alignment and scaling for SVG icons.

Next.js Link Integration

Using Radix asChild to render an accessible Next.js Link.

Contact via LinkedIn Return to Home

Tactile Feedback & Accessibility

Built-in active:scale-[0.98] press response with Pine focus rings.

4. Dual-Register Immersion

Verification of button contrast and aesthetics across both brand registers.

Exceeding expectations.

Deep forest canvas with high-character contrast moments and vintage Cooper headlines.

Client Project Portal

Clean grey-slate workspace surfaces for client review tools, dashboards, and data tables.

5. Interactive Playground

Customize props and instantly copy the production React code.

Variant

Size

Label Text

Leading Icon (<Sparkles />)Trailing Icon (<ArrowRight />)

<Button
  variant="default"
  size="default"
>
  Continue Project
  <ArrowRight />
</Button>

Architecture & Reuse

6. Multi-Project Token Customization

How to reuse this design language in other personal projects with custom brand colors and corner radii.

1. Token Abstraction

All components use semantic CSS tokens (var(--primary), var(--radius)) rather than hardcoded colors or pixel values. Changing 2 variables updates all components automatically.

2. Derived Scale Math

Smaller buttons dynamically compute calc(var(--radius) - 2px) while Hero buttons use calc(var(--radius) + 4px), preserving optical proportions whether sharp (2px) or round (18px).

3. Distribution

Use this repository as a GitHub starter template, copy the component bundle, or apply data-theme-variant="blush" to your root HTML element.

CSS Tokens for Active Preset: default

Drop this block into app/globals.css of your other personal project:

/* Kohl Default: Signature Pine Green + 8px pebble corners */
:root {
  --radius: 0.5rem; /* 8px signature pebble */
  --primary: hsla(170, 100%, 16%, 1); /* Signature Pine */
  --primary-hover: hsla(170, 90%, 11%, 1);
  --accent: hsla(354, 34%, 43%, 1); /* Crimson */
}