Button System

Requirement

Buttons define actions in INTO Consulting collateral, web apps, interactive workshops, and review surfaces. They should feel decisive, readable, and operational without becoming SaaS landing-page decoration.

Constraints

• Buttons use Lexend 500.
• Canonical CTA copy uses Title Case.
• Radius stays compact unless a platform-native control requires otherwise.
• Buttons must work on Warm Light, Blueprint Dark, and approved editorial photo surfaces.
• Icons are allowed when they clarify action, state, navigation, or tool use. Use the brand icon system.
• CSS owns routine hover, active, disabled, loading, and focus-visible states. GSAP is not used for routine button hover.
• Browser-facing button dimensions use rem tokens. Horizontal padding should exceed vertical padding so controls read as horizontal commands, not badges.

Bet

The button system should expose product-grade states and implementation props, not only static CTA styles. This adds more contract surface, but it prevents future apps and workshops from inventing split actions, loading states, permission-denied controls, and icon-only accessibility from scratch.

Failure Modes

• Oversized CTAs make serious collateral feel like a product funnel.
• Pill buttons conflict with the brand’s compact radius language.
• All-caps CTA copy creates unnecessary noise.
• Decorative fills make low-priority actions look primary.
• Current items, tabs, thumbnails, and pager controls look like extra primary buttons.
• Saffron or semantic colors get used on ordinary actions.
• Glass effects become generic frosted SaaS chrome.
• Loading, current, destructive, or permission-denied states get improvised.
• Icon-only buttons ship without labels or tooltips.
• Disabled controls hide why an action is unavailable.
• Icon-plus-label buttons stack vertically or center like decorative badges.
• Button text is shrunk below legibility floors to fit a decorative width.

Variants

Variant	Use	Visual Rule
Primary	Main action or one commercial next step.	Petrol fill, light text, compact radius, optional trailing Lucide icon.
Secondary	Supporting action or alternate route.	Hairline outline or pale raised surface. No heavy fill.
Quiet / Text	Low-emphasis action, inline action, document route.	Text-only or icon plus text. No button box unless the platform needs it.
Glass / btn-glass	Dark or photo editorial surfaces only.	Subtle translucent surface, controlled blur/saturation, hairline border, inset top highlight.
Icon	Familiar compact command.	Square control, accessible label, tooltip, visible focus.
Split	Default action with alternate actions.	Primary/secondary main segment plus a separate menu segment.
Destructive	Reset, delete, revoke, void, or irreversible change.	Critical text or outline first; high-risk actions need confirmation.
Loading	Export, save, import, generation, or sync in progress.	Spinner or progress cue, disabled activation, aria-busy.
Permission Disabled	Visible action blocked by role, owner, or prerequisite.	Muted but present, with reason via inline copy or tooltip.

Sizes

Size	Height	Use
Compact	2rem	Dense desktop toolbars and table-row commands.
Default	2.5rem	Standard app and document controls.
Touch	2.75rem	Mobile, presenter controls, and likely touch contexts.
Large	3rem	Workshop slide controls and high-visibility review actions.
Icon	Square, at least 2.5rem; 2.75rem when touch is likely.	Icon-only commands.

Use --into-button-height-* and --into-button-padding-x-* tokens rather than new arbitrary dimensions.

States

Every variant needs default, hover, active, disabled, loading, and focus-visible states. Product and workshop surfaces also need current, pending-approval, destructive-confirmation, and permission-denied states when the behavior exists.

State	Visual Rule	Behavior
Default	Clear variant hierarchy.	Ready for interaction.
Hover	Clarify affordance without new decoration.	Pointer feedback only.
Active	Compress by roughly 0.0625rem or equivalent pressed state.	Confirms invocation.
Focus-visible	Use a clear ring across Warm Light, Blueprint Dark, and photo surfaces.	Keyboard users can locate the active control.
Disabled	Visible, muted, and non-selected.	Prevent activation. Explain why when blocking matters.
Loading	Show progress cue and prevent duplicate activation.	aria-busy and disabled activation.
Current / Selected	Petrol rule, fill, or text treatment.	Marks current path, slide, or selected option.
Pending Approval	Secondary or quiet surface with owner/reviewer context.	Signals action cannot execute yet.
Destructive Confirmation	Critical color plus consequence copy.	High-risk actions require confirmation.
Permission Denied	Disabled appearance with reason.	User understands the missing role, owner, or prerequisite.

React / Tailwind Contract

Starters should expose this API:

Prop	Type	Default	Rule
variant	`primary	secondary	quiet
size	`compact	default	touch
isLoading	boolean	false	Disables activation and announces loading.
isCurrent	boolean	false	Marks current slide, path, or selection.
permissionReason	string	undefined	Required for permission-disabled.
destructiveLevel	`low	high`	low
iconOnlyLabel	string	undefined	Required for icon-only controls.
menuItems	array	undefined	Creates a split action menu.

Use shadcn/ui and Radix anatomy for Button, ButtonGroup, Tooltip, Dialog, Sheet, and Command behavior when helpful, but restyle everything through INTO tokens, typography, density, radius, icon, and state rules.

Copy

• Use Title Case for canonical button labels.
• Keep labels concrete: Book A Working Session, Send Proposal, View Scope, Open Appendix, Export Decisions.
• Avoid generic labels like Learn More unless the target medium has no room for a better verb.
• Avoid all-caps CTA copy in canonical collateral. If a website handoff uses uppercase for an existing Webflow class, treat it as a site-specific reconciliation note, not a global button rule.

Shape And Spacing

• Radius: use --into-radius-small for buttons.
• Padding: use button padding tokens; do not inflate buttons to fill a hero.
• Vertical padding stays modest and baseline-aware. Horizontal padding should be greater than vertical padding for normal buttons.
• Compact: 0.375rem vertical and 0.75rem horizontal.
• Default: 0.625rem vertical and 1rem horizontal.
• Touch: 0.75rem vertical and 1.125rem horizontal.
• Large: 0.875rem vertical and 1.375rem horizontal.
• Icon gap: --into-space-2 in review and app contexts.
• Button anatomy: normal buttons use inline-flex, row direction, align-items: center, and justify-content: flex-start. Do not stack icon and text.
• Label order: text first, optional trailing icon second. Icon-only buttons are the only centered icon button pattern.
• Button labels keep text-align: left so wide or split actions do not read as centered badges.
• Minimum label size: 0.875rem default, 0.8125rem compact. Split or shorten the label before reducing type.
• Button groups: primary action first, then secondary, then quiet.
• Split actions: default action and alternate-action menu are separate focus stops.
• Icon-only commands: use a familiar icon, accessible label, and tooltip.

Color Discipline

Buttons and selectable items must not compete with each other.

• Use petrol fill for the one primary action.
• Use secondary hairline, pale surface, or quiet text for supporting actions.
• Use petrol text, rail, underline, outline, or soft surface for current tabs, slide thumbnails, pager controls, shortlist options, and agenda rows.
• Do not give every selected or important item a petrol fill.
• Do not use Saffron for ordinary actions, selected items, tabs, or CTA buttons. It is a warning, milestone, comparison, and chart signal.
• Semantic green/red are state colors, not CTA palettes.

Glass Rule

Glass is allowed only on dark, photo overlay, or Blueprint editorial surfaces. It uses:

• --into-button-glass-surface.
• --into-button-glass-surface-hover.
• --into-button-glass-border.
• --into-button-glass-border-hover.
• --into-button-glass-highlight.

Do not use broad frosted panels, heavy shadows, or decorative blur around ordinary Warm Light controls.

Canonical Variant: btn-glass

btn-glass is the named glass-button implementation for secondary CTAs on dark or photographic editorial surfaces: Webflow heroes, Blueprint Dark covers, dark slide sections, and atmospheric section breaks. It is not for documents, proposals, invoices, ordinary app work surfaces, table rows, or dense web-app UI.

Token-bound recipe. Consume the named tokens; do not inline raw rgba values. The tokens are theme-aware and INTO-tuned — INTO off-white at slightly higher opacity reads as the same visual contrast over dark photographic surfaces as generic pure-white at lower opacity, while preserving INTO color identity. Do not substitute pure white.

Property	Token	Warm Light resolves to	Blueprint Dark resolves to
Backdrop	--into-blur-glass-button	blur(0.875rem) saturate(160%)	blur(0.875rem) saturate(160%)
Background	--into-button-glass-surface	rgba(251, 250, 247, 0.08)	rgba(236, 238, 240, 0.09)
Background (hover)	--into-button-glass-surface-hover	rgba(251, 250, 247, 0.13)	rgba(236, 238, 240, 0.15)
Border	--into-button-glass-border	1px solid rgba(251, 250, 247, 0.18)	1px solid rgba(236, 238, 240, 0.28)
Border (hover)	--into-button-glass-border-hover	1px solid rgba(251, 250, 247, 0.28)	1px solid rgba(236, 238, 240, 0.42)
Highlight	--into-button-glass-highlight	inset 0 1px 0 rgba(251, 250, 247, 0.16)	inset 0 1px 0 rgba(236, 238, 240, 0.12)
Motion	--into-motion-quick + --into-ease-standard	Hover transitions color, border, opacity, background only.	Same.
Active	--into-motion-instant + --into-ease-standard	Pressed transform may compress by roughly 0.0625rem.	Same.

The Blueprint Dark border opacity is higher than Warm Light’s because dark photographic backdrops can absorb thin edges; the surface opacity is only fractionally higher because off-white reads more present on dark than near-white on light at the same alpha. If a downstream surface looks under-defined or over-fogged, adjust the token in tokens/into-consulting.theme.css rather than overriding inline.

State matrix:

State	Visual Rule	Behavior
Default	Translucent surface, hairline border, inset highlight, readable light text.	Secondary action on a dark/photo editorial surface.
Hover	Background moves to --into-button-glass-surface-hover; border moves to --into-button-glass-border-hover.	Affordance only; no glow, scale-up, or blur increase.
Active	Slight press, no new color.	Confirms invocation with --into-motion-instant.
Focus-visible	Clear tokenized focus ring outside the glass edge.	Keyboard focus must remain visible over photography.
Disabled	Muted opacity, no hover, no blur change.	Non-interactive; include reason when blocking matters.
Loading	Spinner or progress cue plus aria-busy; activation blocked.	Prevent duplicate action while retaining label.

Anti-patterns:

• Glass on Warm Light document, proposal, invoice, or body reading surfaces.
• Glass on dense UI controls, tables, filters, ordinary cards, or repeated dashboard items.
• Glass without the inset specular highlight. That is frosted, not glass.
• Glass over solid teal or flat color with nothing behind it to refract.
• Broad frosted nav or panel chrome used to make a generic SaaS surface feel premium.

Nav Glass On Scroll

Navigation can use a heavier glass treatment only when it elevates over a photographic hero on scroll. Use --into-blur-nav-glass-min to --into-blur-nav-glass-max (18-24px) and a near-black teal translucent surface. The nav still needs readable links, visible focus, and a hard stop before light sections; it does not authorize glass as a default app shell.

Agent Rule

Use one primary action per surface. Use secondary and quiet variants to preserve hierarchy. Use icon buttons only for familiar commands and label them. Use permission-disabled controls when a blocked action still teaches the user what is missing. Normal buttons are inline-flex rows with left-aligned labels and optional trailing icons; never stack icon over text. Always define default, hover, active, disabled, loading, and focus-visible states before treating a button pattern as complete.