PulseMind UI Button Catalog B&W Foundation

Structural Geometry • Tactile Springs • Dual-Stage Specular Rims

Accent:

Form & Geometry First: The Monochrome Foundation

PulseMind UI buttons are engineered around geometry, continuous superellipse curvature, specular highlights, and tactile spring physics rather than arbitrary color fills. In this catalog, every button archetype is showcased stripped of color distraction. Use the top palette bar to verify how each structural form dynamically accepts brand accents.

0.972x Press Spring Dual-Stage Specular Rim G2 Superellipse Radii High-Contrast Focus Ring 8ms Haptic Tap Sync
Spring Stiffness (k): 380 N/m
Damping Ratio (ζ): 0.82 (Sub-critical)
Press Compression: 0.972x scale in 80ms
Spring Recovery: 160ms fast fluid
13 Signature Button & Interactive Archetypes Tap any button or toggle to test tactile spring compression & async states

1. PulsePrimaryButton

High-impact hero action with illuminated top specular rim.

Idle
Active
Focus
Disabled
radius: 12px press: 0.972x specular: inset 1px

2. PulseSecondaryButton

Frosted glass backdrop with dual-stage illuminated specular rim.

Idle
Active
Focus
Disabled
blur: 20px border: 1px medium saturate: 180%

3. PulseGhostButton

Minimalist zero-fill outline with tactile interactive gleam.

Idle
Hover
Active
Disabled
fill: none hover-reveal: 160ms

4. PulseSquircleIconButton

Compact 44px and 34px G2 superellipse squircle for toolbars.

Squircle
44x44
Radius
14px
Compact
34x34
Radius
10px
superellipse: n=4.2 shadow: specular edge

5. PulseDynamicIslandButton

Fluid morphing pill displaying live engine telemetry.

PulseCore 144.2 FPS Sync
Idle
Compact
Telemetry
FPS / MS
Expanded
Dashboard
Morph
200ms
morph: 200ms spring: --spring-snappy

6. PulseSegmentedPillButton

Rubber-band sliding control with tactile pill glide.

Track
Interactive
Pill
Elevated
Glider
180ms
Rubber
1.10x scaleX
spring: --spring-bounce-fast recoil: 180ms

7. PulseBentoActionButton

Bento card-level action with icon badge and trailing chevron.

Border
Subtle
Hover
-1px Y
Chevron
+3px X
Radius
16px
layout: flex-split elevation: specular

8. PulseFloatingActionButton

Floating squircle FAB with elevated drop shadow and radial popover.

Size
52x52
Radius
18px
Hover
1.08x scale
Shadow
0 8px 24px
squircle: 18px elevation: float-24

9. PulseDestructiveButton

Safety-critical action with tactile confirmation lock.

Idle
Active
Focus
Disabled
border: 1px warning hover-glow: 16px

10. PulseLoadingShimmerButton

Kinetic skeleton shimmer sweep during background compilation.

Sweep
1.4s loop
Angle
90deg linear
Cursor
wait
Radius
12px
keyframe: skeleton-shimmer timing: 1.4s ease-in-out

11. PulseClipboardCopyButton

Code and token copy pill with instant checkmark morph.

Idle
Icon + Label
Morph
Checkmark
Reset
1800ms timer
Radius
8px pill-box
feedback: haptic 8ms morph: SVG swap

12. PulseWorkbenchToolButton

Compact 32px tool button with micro-LED status dot.

Size
32x32
LED Dot
4x4px
Active
Glow Pip
Radius
8px
rail-mode: 68px pip: absolute-top-right

13. PulseAsyncProcessToggle

Asynchronous process switches with anti-hang loading feedback.

System Telemetry Service Idle Option 1: Leading spinner in front of switch
SurfaceFlinger FPS Hook Idle Option 2: Embedded spinner inside the toggle knob
Style 1
Leading Front
Style 2
Thumb Inside
Anti-Hang
aria-busy
Latency
1200ms Sim
track: 48x28px thumb: 20px spring: 0.16, 1, 0.3, 1
Action Triggered