Paycraft Design System

Website Colors

Paycraft's brushwork is anchored by a deep navy (#0a2540) and a vibrant purple accent (#533afd). The system uses subtle gray backgrounds and a sophisticated shadow brushwork with rgba(50,50,93) as the signature shadow color.

Primary & Accent

Navy Scale

Text Colors

Backgrounds

Borders

Semantic Colors

Gradients

Paycraft uses multicolor gradients extensively, especially for product suite differentiation and hero backgrounds. Their signature shadow color rgba(50,50,93) appears in every shadow definition.

Product Suite Colors

Each Paycraft product suite has a distinct gradient identity used in the navigation menu, product pages, and marketing materials.

Typography

Paycraft uses their custom variable font "sohne-var" (weight range 1-1000) with a restrained weight scale: 200 (light), 300 (normal), 425 (semibold), 500 (bold). The monospace font is SourceCodePro.

Spacing Scale

Paycraft uses a 4px base unit with a scale that expands to 128px for section-level spacing. Row gaps and section padding use CSS custom properties with responsive fluid calculations.

Shadow System

Paycraft's signature shadow uses rgba(50,50,93) -- a muted paycraft-gray that complements their navy brushwork. Each shadow uses two layers: the primary spread and a darker, tighter secondary shadow.

Border Radius

Buttons

Paycraft buttons use a 16.5px pill border-radius, 15px font at semibold (425) weight. The primary variant uses #635bff (Paycraft purple-blue), while the dark variant uses #0a2540 navy.

Primary Variants

Secondary Variants

Segmented Control

Cards

Cards use 8px border-radius and Paycraft's layered shadow system. Variants include bordered, shadowed, and accented (colored top border).

Navigation

Paycraft's refreshed navigation is 64px tall with 8px border radius and backdrop blur. It features product mega-menus with gradient line indicators and a 4-column grid layout for product navigation.

Angled Sections

Paycraft's signature angled section backgrounds use CSS skewY transforms. The normal angle is -6deg and the strong angle is -12deg.

Blog Components

Pricing Cards

Animations & Easing

Paycraft uses six distinct easing curves for different interaction contexts. Hover over each demo to see the easing in action.

Code Blocks

Code snippets use the navy (#0a2540) background with SourceCodePro font at 14px/1.714 line-height.

Chat Button

Fixed bottom-right at 24px offset, 64px diameter circle with navy background and typing indicator animation.

Hover Arrow

Paycraft's signature CTA arrow animates 3px to the right on hover with a 150ms cubic-bezier transition.

Dashboard Colors

The Paycraft Dashboard uses a different brushwork from the marketing site -- system fonts, a lighter blue accent (#5469d4), and a cool gray background (#e6ebf1).

Login Card (Dashboard)

The login page features a centered card on a cool gray background. Uses system fonts, not sohne-var.

Form Fields

Paycraft Elements

Pre-built payment UI components with configurable themes. The default form uses a 384px max-width container with grouped fields sharing borders.

Elements Themes

Paycraft Elements supports multiple visual themes. Each can override colors, fonts, and border treatments.

CSS Variables Reference

Class Naming Convention

Paycraft uses a BEM-adjacent naming system with double underscores for elements, double dashes for modifiers, and specific prefix patterns for variants, themes, and states.

Responsive Breakpoints

Layout Grid

Paycraft uses a 12-column CSS Grid system with configurable column patterns via data attributes. Column gap is 20px. Content max-width is 1080px with additional column padding.

Z-Index Scale

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.