card-stock-button-treatment

name	card-stock-button-treatment
description	Use when designing primary buttons for editorial brands. Card-stock feel (subtle texture, thick border, slight depth) signals premium without being skeuomorphic.

Card-Stock Button Treatment

Card-stock buttons feel printed: subtle texture, thick border-bottom for depth, restrained color. Different from SaaS flat-button.

Card-stock button anatomy

1. Background: brand accent or cream
2. Border: 1px solid ink-15 OR no border
3. Border-bottom: 3px solid ink (gives stamp/press feel)
4. Padding: 14-20px vertical, 28-40px horizontal
5. Typography: 600 weight, slight letter-spacing
6. Hover: subtle lift (translate-y -1px), inverted color

CSS implementation

.btn-cardstock {
  background: var(--accent);
  color: var(--cream);
  padding: 14px 32px;
  border: none;
  border-bottom: 3px solid var(--ink);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 150ms;
}
.btn-cardstock:hover {
  transform: translateY(-1px);
  border-bottom-width: 4px;
}
.btn-cardstock:active {
  transform: translateY(1px);
  border-bottom-width: 2px;
}

Variations by tier

Primary: solid accent + ink border Secondary: cream + ink border Tertiary: text-only with arrow (→), brand accent color

Maintain visual hierarchy: primary stands out, secondary supports, tertiary minimal.

Where this fits in the X3 empire

Primary button language for CardPrepAI marketing surfaces.