Buttons
A button is where four foundations intersect: the CRAFTSMAN+ GRADIENT for the fill, Inter at 500 in Title Case for the label, --radius-sm from the space system, and the standard easing from motion. The system below is the one shipping on craftsmanplus.com, tokenized.
The system, live
These are live. Hover for the lift, press for the settle, and note the disabled state at 40% opacity.
Primary
One per view. The CRAFTSMAN+ GRADIENT fill with an inset top highlight and a soft orange glow.
Ghost
The secondary action beside a primary, or any action on its own.
Intelligence
AI surfaces only. The three-stop gradient marks the action as INTELLIGENCE.
One primary, one ghost, on a solid dark ground.
Never a gradient button on a gradient ground, and never the INTELLIGENCE variant off an AI surface. Use solid CRAFTSMAN WHITE or BLACK fills there instead.
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.
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.
| 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:
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: 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.
- 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.