KrafterPRO

Typography establishes the visual voice of the interface. It guides attention, sets reading rhythm, and creates a predictable information hierarchy. Use these presets consistently to maintain clarity across all content.

Headlines & Hooks

k-heading-display-lg / md / sm — High-impact display headings used to break visual patterns and capture attention.

Usage:
• Display LG: Primary hero hook (e.g., major promise or sales angle).
• Display SM: Secondary promotional headlines or landing page sub-heroes.

k-heading-h1 — The main outcome or promise of the page.
Usage: Use once per page to communicate the core benefit or objective.

k-heading-h2 — Section headers that introduce new blocks of information.
Usage: Use to start major sections or “chapters” in your narrative (e.g., benefit frameworks, feature groups).

k-heading-h3 — Sub-headers for supporting points.
Usage: Ideal for grid item titles, supporting benefits, or nested content inside an H2 section.

Specialized UI & Labels

k-text-eyebrow — Small, bold, uppercase label.
Usage: Place above H1 or H2 to categorize or frame the content (e.g., “FREE MASTERCLASS”).

k-text-badge — High-contrast pill indicators.
Usage: Use for quick status tags such as “NEW,” “SALE,” or “LIVE.”

k-text-label — Functional micro text.
Usage: Place above form inputs, filters, or metadata such as dates.

k-text-body / k-text-body-l — Core content text.

Usage:

• Body L: First lead paragraph in a section to bridge the headline and body content.

• Body: Standard paragraph text for long-form reading.

KrafterPRO uses a functional color hierarchy where every color has a purpose. Colors are divided into two groups: Information and Action.

The 60-30-10 Framework

- 60% Primary Surface — Your main background foundation (white, light gray, or deep dark). This establishes the overall atmosphere of the UI.

- 30% Secondary Surface — Used for cards, section breaks, and structural grouping. This should be a subtle variation of the primary surface to organize content visually.

- 10% Accent Color — Your action color. This is reserved for CTAs only. Because it appears sparingly, it creates a strong visual contrast and draws immediate attention.

Grayscale Usage

Dark Grays — Use for body text to improve legibility without the stiffness of pure black.

Medium Grays — Use for labels, eyebrows, and secondary text to reduce their visual priority.

Light Grays — Use for borders, dividers, subtle backgrounds, and surface layers to separate content without adding visual noise.

The KrafterPRO spacing system is built on a Fluid-First Philosophy.
Every value uses clamp() to scale mathematically across all screen sizes, ensuring your layout feels deliberate on both mobile and desktop (1280px max width).

Micro Spacing (XS & S)

Goal: Create tightly related visual units.
Strategy:
• Use for elements that must feel connected.
• Labels, badges, icons, and microcopy rely on these values to avoid feeling “floaty.”

Structural Spacing (M, L, XL)

Goal: Build narrative flow and consistent layout rhythm.
Strategy:
• Use M for all horizontal gutters and structural spacing.
• Use L or XL to separate meaningful content clusters, such as features or testimonial sections.
• These sizes tell the user when one idea ends and another begins.

Section Padding (2XL & 3XL)

Goal: Create authority, luxury, and visual breathing room.
Strategy:
• 3XL → Hero sections, major callouts, high-ticket offer intros.
• 2XL → Standard vertical padding between major “chapters” of your landing pages.
• Larger spacing signals confidence and premium value.

Row Width & Reading Flow
The width of your content determines how users read, process, and stay focused. Use row widths intentionally to guide attention and create predictable visual rhythm across the page.

Narrow Text Row — 800px
Purpose: Long-form reading.
Usage: Ideal for sales letters, VSL pages, and narrative content. Shorter line lengths improve comprehension and reduce eye fatigue, making users more likely to read longer sections.

Wide Text Row — 1000px
Purpose: Informational depth.
Usage: Best for documentation, feature explanations, and detailed text blocks that need extra room. Still narrow enough to keep attention centered while allowing more complex content to breathe.

Standard Row — 1280px
Purpose: Default layout width.
Usage: Use for hero split layouts, 2-column structures, 3-column feature grids, testimonials, and general site content. This creates the modern “balanced canvas” used in most premium SaaS websites.

Wide Content Row — 1440px+
Purpose: High-impact visual storytelling.
Usage: Use for product showcases, large imagery, wide galleries, and immersive display sections. Ideal when visuals need to dominate the screen and create emotional impact.

Full Width
Purpose: Edge-to-edge experience.
Usage: Reserved only for logo marquees, sliders, image reveals, or background-bleed sections. This creates contrast against your narrower content rows and strengthens visual rhythm.

Buttons are high-signal elements. They guide intent, drive conversions, and visually communicate priority. Their impact depends not just on color, but on grayscale discipline—the foundation of premium UI design. Use both deliberately and consistently.

k-button-primary — Primary Action
Purpose: The main action you want users to take.
Examples: “Join Now”, “Buy Now”, “Get Started”.

Best Practices:
• Use one primary button per view to maintain clear direction.
• Ensure strong contrast between the button and its background—this is where grayscale mastery matters. Light surfaces require bold color; dark surfaces require a bright, high-contrast accent.
• Pair with the light-sweep microinteraction to create forward energy and subtle curiosity.
• Use action-focused verbs to reinforce intent.

k-button-secondary — Secondary Action

Purpose: Supportive actions that are important but not primary.

Examples: “Learn More”, “View Gallery”, “Read Details”.

Best Practices:

• Use when the user needs an alternative path or additional context before committing.

• Works best as an outline, soft-fill, or ghost style—this is where neutrals and grays shine.

• Always position after the primary action to maintain hierarchy.

Grayscale Guidance for Primary Buttons:
• On light backgrounds, use dark neutrals around the button (borders, text areas) to make the CTA stand out even more.
• On dark backgrounds, avoid heavy shadows behind the button—use softer grayscale values to create depth without overwhelming the action color.
• Never place a primary CTA on a mid-gray surface; it weakens visual urgency.

Use these grid presets on rows to control column behavior. Each grid automatically stacks on mobile, maintains readable column widths, and prevents overcrowding.

Column Grid — Min 350px
Purpose: Two-column hero and feature splits.
Usage: Ideal for layouts where text and imagery need equal visual weight (e.g., hero sections, text-and-image splits).

Column Grid — Min 280px
Purpose: Structured triads.
Usage: Use for benefit clusters, pricing tables, “How It Works” steps, or any three-part storytelling pattern.

Column Grid — Min 220px
Purpose: Medium-density visual grids.
Usage: Best for feature icons, service lists, team member grids, or product category layouts.

Column / 8-Column Grid — Min 110px–150px
Purpose: Ultra-compact visual grids.
Usage: Reserved for trust logos, partner marquees, badge strips, or any repeating, low-detail visual elements.

Vertical rhythm controls pacing, readability, and the overall “premium feel” of the scroll. Use these section sizes intentionally to guide the user through the narrative of the page.

Extra Small

Purpose: Compact utility areas.

Usage: Ideal for notification bars, slim headers, and footers where content is minimal and should not compete with main sections.

Small

Purpose: Higher-density content.

Usage: Best for FAQs, contact forms, or supporting sections that contain multiple small elements and require tighter spacing.

Medium

Purpose: Standard content spacing.

Usage: Use for the majority of your sections. This is the default rhythm that keeps the page balanced and readable.

Large

Purpose: High-importance sections.

Usage: Use for heroes, key benefits, major calls to action, and offer reveals. The increased spacing signals importance and authority.

Full

Purpose: Visual reset between major chapters.

Usage: Use when transitioning between different themes, background colors, or shifting from education to persuasion (e.g., moving from the “story” to the “offer”).