Crafto Marketing Strategy

Overview

Crafto Marketing Strategy is a premium B2B template designed for modern marketing agencies and consultancies seeking to communicate data-driven results with visual confidence. The design language embraces 'Architectural Minimalism'—a movement that prioritizes clean geometry, generous whitespace, and strategic color placement to guide user attention toward high-impact messaging. The aesthetic is deliberately restrained: a warm, neutral beige canvas (rgb(237, 236, 227)) serves as the breathing room, while a vibrant burnt-orange accent (rgb(245, 86, 8)) punctuates CTAs, metrics, and key visual elements, creating an immediate sense of energy and forward momentum.

The brand voice is confident, data-centric, and conversational—never corporate-speak, always human. Vocabulary leans toward action verbs ('drive', 'grow', 'build') and concrete outcomes ('95% success rate', 'measurable results'). The tone assumes the audience is intelligent, time-constrained, and motivated by proof. Example sentence in brand voice: 'We use strategies, creative campaigns and data-driven insights to grow your brand and drive measurable success.'

Colors

The color system is built on a high-contrast, minimalist foundation. Primary (rgb(245, 86, 8) / #f55608) is the brand's signature accent—a warm, energetic orange deployed exclusively on CTAs, key metrics, and interactive hover states. It commands attention without aggression, evoking trust and forward momentum. Secondary (rgb(108, 117, 125) / #6c757d) is a neutral gray used for supporting text, borders, and disabled states, ensuring the primary color remains the focal point. Tertiary (rgb(255, 193, 7) / #ffc107) is a soft yellow reserved for badges, highlights, and success indicators, providing a secondary accent for status communication.

The surface stack is anchored in a warm beige palette: surface (rgb(237, 236, 227)) is the primary background, surface-container-low (rgb(240, 239, 230)

Typography

The type system pairs two distinct families to create visual hierarchy and emotional resonance. Funnel Display (used for display, headline-lg, headline-md) is a geometric, modern serif that conveys authority and sophistication—deployed at sizes 40px–100px with tight letter-spacing (-0.02em to -0.05em) to create visual compression and impact. Inter (used for body, label, and supporting text) is a humanist sans-serif that ensures readability and approachability at smaller scales. The system uses four weights: 400 (regular) for body copy and headlines, 500 (medium) for labels and secondary emphasis, 600 (semibold) for interactive elements and tertiary headings, and 700 (bold) reserved for rare, high-impact moments. Line-height is set generously: 110px for display (1.1x), 68px for headline-lg

Layout

The layout follows a 12-column Bootstrap grid with a max-width of 1320px, adapting fluidly to breakpoints at 576px (sm), 768px (md), 992px (lg), 1200px (xl), and 1400px (xxl). The hero section uses asymmetric column splits (8/4 on desktop, stacking on mobile) to balance large typography with supporting metrics and CTAs. Horizontal gutters are set to 24px (md spacing), creating consistent breathing room between columns. Vertical rhythm is enforced through lg spacing (40px) for section separation and md spacing (24px) for card-to-card margins. Container padding is 65px on desktop (xl-ps-45px, xl-pe-45px in the codebase), reducing to 15px on tablet and 0px on mobile to maximize screen real estate. The design favors generous whitespace: no section should feel crowded, and every CTA should have

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background shifts rather than aggressive layering. Level 1 (Base): the surface background (rgb(237, 236, 227)) with no shadow, establishing the foundation. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), background: rgb(240, 239, 230), used for cards, input fields, and standard containers. Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), background: rgb(226, 225, 215), reserved for modals, dropdowns, and highest-priority overlays. Hover states on interactive elements apply a shadow boost: 0

Shapes

The shape philosophy is 'Soft-Technical'—balancing geometric precision with human warmth. Buttons and CTAs use rounded: xl (50px), creating pill-shaped forms that feel approachable and modern, never sharp. Cards and input fields use rounded: DEFAULT (4px), a subtle radius that defines edges without softness, maintaining architectural clarity. Badges and accent elements use rounded: full (9999px) for maximum softness and visual distinction. The reasoning: large, rounded buttons (50px) signal primary actions and invite interaction; small, sharp corners (4px) on containers maintain visual order a

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses backgroundColor: rgb(245, 86, 8), textColor: rgb(255, 255, 255), padding: 12px 28px, height: 48px, rounded: 50px, and fontFamily: Funnel Display at 16px weight 400. On hover, the background shifts to rgb(200, 90, 0) with a subtle shadow boost (0 3px 8px rgba(245, 86, 8, 0.25)) over 200ms. On active/pressed, the background darkens further to rgb(168, 70, 0). Secondary buttons use a transparent background with a 1px border in the primary color, inverting on hover to a filled state with primary-container background. All button text uses letter-spacing: 0em for tight, confident typography.

Containers & Surfaces Cards are the primary content container. The card component uses backgroundColo

Do's and Don'ts

**Do**

• Do use the primary orange (rgb(245, 86, 8)) exclusively on CTAs, hover states, and key metrics—never on body text or backgrounds.
• Do maintain at least 40px of whitespace around all interactive elements to ensure clarity and prevent accidental clicks.
• Do pair Funnel Display headlines with Inter body copy to create visual contrast and guide the eye through content hierarchy.
• Do apply the md spacing (24px) consistently between sections and cards to establish a predictable, professional rhythm.
• Do use the shadow system (0 3px 8px for standard, 0 8px 24px for elevated) to create depth without visual noise.

**Don't**

• Don't use secondary gray (rgb(108, 117, 125)) on primary CTAs—reserve it for supporting text and disabled states only.
• Don't apply border-radius greater than 4px on cards or input fields; the 50px radius is reserved for buttons and badges.
• Don't mix Funnel Display and Inter at the same size; use Funnel Display for headlines (40px+) and Inter for body (16px or smaller).
• Don't reduce padding below 12px on buttons or below 12px on input fields; the 48px height is the minimum interactive target size.
• Don't layer more than two shadows on a single element; the elevation system uses only three levels (none, md, lg).