Krepling

Overview

Krepling is a no-code commerce platform designed for entrepreneurs who want to build, scale, and grow their online stores without technical barriers. The design system embodies a philosophy of "Accessible Modernism"—combining clean, geometric forms with vibrant accent colors that signal energy and possibility. The brand personality is confident yet approachable: it speaks to business builders in direct, action-oriented language. The UI prioritizes clarity and usability, with generous whitespace (40px lg spacing between sections), a restrained color palette anchored by the signature Krepling Purple (#b154f9), and typography that balances personality with legibility. The emotional response is one of empowerment: users should feel capable, supported, and ready to launch.

Krepling's voice is conversational and outcome-focused. It avoids jargon and instead uses concrete, benefit-driven language. Example sentence: "Your online store should be a sales channel, not an engineering challenge." The brand celebrates the non-technical founder and speaks to their ambitions without condescension. Every interaction—from button labels to error messages—reinforces the core promise: commerce building made simple.

Colors

The color system is built on a foundation of clean neutrals (white #ffffff, light gray #f1f1f1, dark gray #171717) that provide a calm, professional canvas. The primary accent is Krepling Purple (#b154f9), a vibrant, saturated violet used exclusively for call-to-action buttons, interactive focus states, and brand-critical UI elements. This color appears at 100% opacity on white backgrounds and is never diluted or desaturated. Secondary accent colors support specific use cases: Secondary Blue (#635bff) is reserved for secondary actions and informational elements; Tertiary Yellow (#ffe01b) highlights promotional badges and success states; Error Red (#f22f46) signals validation failures and destructive actions. The surface stack progresses from bright (#ffffff) through container layers (surfa

Typography

The type system uses PP Radio Grotesk, a geometric sans-serif that conveys both approachability and technical competence. Display sizes (56.89px) are reserved for hero headlines and set at 400 weight with -0.01em letter-spacing to create visual impact without appearing heavy. Headline levels (40px, 28px) maintain the same tight tracking and are used for section titles and card headers. Body text (16px–18px) is set at 400 weight with 0.02em letter-spacing and 1.3–1.7 line-height to ensure comfortable reading at all sizes. Labels and buttons use 600 weight at 14px with 0.01em tracking, creating visual distinction for interactive elements. When small labels (12px) appear over busy backgrounds or colorful cards, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to maintain legibility. The type

Layout

The page layout uses a 12-column grid system at desktop (1000px+), collapsing to 8 columns at tablet (600px–999px) and 6 columns on mobile. Container max-width is fixed at 1280px, centered with symmetric margins. The spacing scale is semantic: unit (8px) is the baseline; xs (4px) is used for micro-spacing within components; sm (12px) separates inline elements; md (24px) is the default padding inside cards and sections; lg (40px) separates major sections vertically; xl (64px) is reserved for hero spacing and top-level section breaks. Gutters between grid columns are max(0.625rem, 0.6944vw), providing responsive flexibility. White-space is generous and intentional: the hero section uses 71.11px vertical padding (approximately 9 × unit), creating breathing room around the headline "The world'

Elevation & Depth

Elevation is conveyed through a subtle shadow system rather than color shifts or borders. The base level (Level 1) has no shadow and sits flush on the surface (#ffffff). Level 2 (standard cards, dropdowns) uses box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft, diffused shadow that suggests a card lifted 4–8px above the surface. Level 3 (modals, popovers, hover states) uses box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), a larger, more dispersed shadow indicating elevation of 16–24px. Transitions between levels are smooth: when a card is hovered, the shadow animates from Level 2 to Level

Shapes

The shape philosophy is "Geometric Approachability"—using consistent, moderate border-radius values that feel modern and friendly without sacrificing usability. Buttons and primary interactive elements use rounded.lg (1rem / 16px), creating a soft but defined corner that signals clickability. Cards and containers use rounded.xl (1.5rem / 24px), a more generous radius that makes surfaces feel less rigid and more inviting. Input fields and form elements use rounded.DEFAULT (0.5rem / 8px), a tighter radius that maintains visual distinction from buttons while remaining approachable. Badges and pil

Components

Action Elements Buttons are the primary interactive element and come in two variants: primary (solid purple background, white text) and secondary (transparent background, purple text, purple border). Primary buttons use backgroundColor: {colors.primary} (#b154f9), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.lg} (16px), padding: 14px 16px, and height: 48px. On hover, the background transitions to #9d3dd9 (a darker purple) over 0.3s using var(--ease-quad-out). On focus, a 4px halo of rgba(177, 84, 249, 0.2) appears around the button without changing the background. Secondary buttons mirror the primary structure but use transparent background, purple text, and a 2px purple border; on hover, they gain a light gray background (surface-container-high, #e9ecef). Both variants

Do's and Don'ts

**Do**

• Do use Krepling Purple (#b154f9) exclusively for primary CTAs and interactive focus states—never dilute it with opacity or desaturate it.
• Do maintain 40px (lg spacing) between major sections to create visual breathing room and improve scannability.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) to small labels (12px) that appear over colored backgrounds to ensure legibility.
• Do use rounded.lg (16px) for buttons and rounded.xl (24px) for cards to create a clear visual hierarchy between interactive and passive elements.
• Do transition all interactive states (hover, focus, active) over 0.3s using var(--ease-quad-out) for a consistent, polished feel.
• Do set body text at 16px with 0.02em letter-spacing and 1.3 line-height for comfortable reading on all screen sizes.

**Don't**

• Don't use secondary or tertiary colors as primary CTAs—reserve purple (#b154f9) for the most important actions.
• Don't apply rounded.full (9999px) to buttons or inputs; use it only for badges and status pills.
• Don't mix font weights within a single line of text; instead, use size and color to create emphasis.
• Don't use shadows alone to create hierarchy; pair them with color, size, and spacing for clarity.
• Don't set body text smaller than 16px or with line-height less than 1.3; prioritize readability over density.
• Don't animate border-radius or padding on interactive elements; only animate background-color, box-shadow, and opacity.