# Components

> Where the foundations meet the interface: the button system and the card surface from craftsmanplus.com.

Canonical: https://brand.craftsmanplus.com/foundations/components

## Buttons

A button is where four foundations intersect: the [CRAFTSMAN+ GRADIENT](/foundations/color#gradients) for the fill, [Inter at 500](/foundations/typography#weights--styles) in [Title Case](/foundations/typography#text-casing) for the label, `--radius-sm` from the [space system](/foundations/space), and the standard easing from [motion](/foundations/motion). The system below is the one shipping on [craftsmanplus.com](https://craftsmanplus.com), tokenized.

> Interactive ButtonLab component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Button generator

For decks, statics, and mockups outside the browser: type the label, pick the variant and size, and export a transparent or black-ground PNG at up to 8x. The render follows the spec exactly, gradient, radius, highlight, and glow included. Labels are Title Case, per the [casing rules](/foundations/typography#text-casing).

> Interactive ButtonGenerator component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## The spec

| Property | Default | Compact |
| --- | --- | --- |
| Height | 40px | 33px |
| Padding | 0 20px | 0 17px |
| Radius | `--radius-sm` (6px) | same |
| Type | Inter 500, 13px, 0.01em tracking | same |
| Icon gap | 10px | 6px |
| Transition | 150ms `--ease-standard` on transform, filter, background, color | same |

**States.** Hover lifts 1px (primary also brightens 8%); press settles 1px down; disabled drops to 40% opacity with no pointer. Focus uses the browser ring; do not remove it.

## Cards

The card is the raised surface everywhere on CRAFTSMAN+ properties, this page included: a vertical near-black gradient, a 20px radius, a hairline border, and an inset top highlight. On hover it lifts with the deep shadow and faint orange glow from the [elevation system](/foundations/space).

| Property | Value |
| --- | --- |
| Fill | Vertical gradient, `--card-grad` (near-black, top lighter) |
| Radius | `--radius-card` (20px) |
| Border | 1px at 7% white; 16% on hover |
| Edge | Inset top highlight at 5% white |
| Hover | `--shadow-card-lift`, translate up 2px on links |
| Nesting | Inner elements step down to 10px radius; never 20px inside 20px |

Every card on this site is a live example. For decks and statics, export an empty card as a transparent PNG and place content on it in your tool:

> Interactive CardLab component; see the token data at https://brand.craftsmanplus.com/api/tokens.json.

## Rules

- **One primary per view.** The primary is where the brand shows up; two of them is none of them.
- **Labels are Title Case**, per the [casing rules](/foundations/typography#text-casing): Book a Demo, View Case Studies. Never all caps, never a trailing exclamation mark.
- **The INTELLIGENCE variant appears only on AI surfaces**, the same reservation Purple carries everywhere else.
- **Gradient buttons need solid grounds.** On a gradient ground, use solid CRAFTSMAN WHITE or CRAFTSMAN BLACK fills, the same logic as [gradient text](/foundations/typography#color-in-text).
- **No new variants.** No outlined gradient buttons, no product-palette fills outside their product, no pill radii. If a surface seems to need a fourth variant, the surface has too many actions.