DAP

Overview

DAP is a performance-driven landing page agency serving Hebrew-speaking markets, specializing in high-conversion page design that delivers 4x above-average conversion rates. The brand embodies "Conversion-Centric Minimalism"—a design philosophy that strips away visual noise to focus every pixel on user action. The aesthetic combines a deep navy hero backdrop (#0d2a47) with a signature hot-pink CTA accent (#cc3366), creating visual tension that compels engagement. The emotional response is one of professional confidence: users feel they're working with experts who understand the mechanics of persuasion, not just aesthetics.

DAP's voice is direct, results-oriented, and speaks in the language of business impact. The brand avoids flowery language, instead using concrete metrics ("4x above average," "professional landing pages") and action-oriented Hebrew copy. Vocabulary patterns emphasize transformation ("מייצרים וואו"—"create wow"), precision ("מקצועי"—"professional"), and urgency ("קבלו עוד היום"—"get today"). Example sentence in brand voice: "כל מה שמפריד בין המותג שלך לבין אלפי לידים איכותיים, זה בסה״כ דף נחיתה אחד מקצועי שעשוי היטב." ("The only thing separating your brand from thousands of quality leads is one professionally-crafted landing page.") This tone is confident without arrogance, urgent without panic.

Colors

DAP's color system is built on a principle of "Contrast for Conversion." The primary accent, Hot Pink (#cc3366), is deployed exclusively on call-to-action buttons and key interactive elements—it appears infrequently but with maximum impact, creating a visual hierarchy that guides users toward conversion. This color is supported by a deep navy background (#0d2a47) in hero sections, which provides sophisticated contrast and evokes trust and professionalism. The secondary accent, Vivid Blue (#0058e6), is reserved for secondary CTAs, links, and supporting interactive states, allowing primary actions to remain visually dominant. Tertiary Blue (#3a8dc2) is used for informational badges and supporting UI elements. The surface stack uses a clean white (#ffffff) as the primary surface with carefull

Typography

DAP's type system prioritizes clarity and persuasion through a single, versatile typeface family: Open Sans Hebrew paired with Assistant as a fallback. This choice reflects the brand's Israeli market focus and ensures consistent rendering across Hebrew and Latin scripts. The system uses seven distinct scales: Display (60px, 700 weight) for hero headlines that demand attention; Headline-lg (40px, 700 weight) for section titles; Headline-md (28px, 600 weight) for subsections; Title-lg (20px, 600 weight) for card headers; Body-lg (18px, 400 weight) for long-form copy; Body-md (16px, 400 weight) for standard body text; and Label-md/sm (14px/12px, 600/500 weight) for buttons and metadata. Letter-spacing is tightened on display and headline scales (-0.04em to -0.01em) to create visual impact and

Layout

DAP uses a fluid 12-column grid system with a maximum container width of 1024px, allowing the design to breathe on desktop while remaining responsive on mobile. The page rhythm follows a "hero-driven" model: a full-bleed hero section (min-height: 600px, padding: 80px 24px) establishes brand presence and captures attention, followed by modular content sections separated by lg spacing (40px) for visual breathing room. The gutter between columns is set to 24px (md spacing), and section padding uses consistent md (24px) or lg (40px) values to create predictable rhythm. White-space is treated as a design material, not wasted space—generous margins around text blocks and cards reduce cognitive load and guide focus toward CTAs. The spacing scale is semantic: xs (4px) for micro-interactions and ic

Elevation & Depth

DAP's elevation system uses subtle shadows and layering to create visual hierarchy without introducing depth that distracts from conversion goals. The system defines three levels: Level 1 (Base/Cards): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), used on standard cards and containers to separate them from the background without drawing attention. Level 2 (Elevated/Hover): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied on hover states and secondary containers to signal interactivity and encourage engagement. Level 3 (Modal/Hero): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for moda

Shapes

DAP employs a "Precision Rounded" shape philosophy—rounded corners are used strategically to soften the interface while maintaining a professional, technical aesthetic. Buttons use full-pill rounding (border-radius: 9999px) to create a friendly, clickable appearance that contrasts with the sharp typography and draws attention to CTAs. Cards and containers use lg rounding (1rem / 16px) to create visual softness and approachability without appearing playful or casual. Input fields use DEFAULT rounding (0.5rem / 8px) to signal functional purpose—more angular than buttons, but still approachable.

Components

Action Elements Buttons are the primary conversion mechanism and receive the most visual emphasis. The button-primary component uses the signature hot-pink background (#cc3366), white text, full-pill rounding (9999px), and a custom shadow (0 4px 12px rgba(204, 51, 102, 0.25)) to create a focal point. Padding is set to 16px 32px with a fixed height of 48px to ensure touch-friendly sizing (minimum 44px per WCAG guidelines). On hover, the button-primary-hover state darkens the background to #b82a5c, expands the shadow to 0 8px 20px rgba(204, 51, 102, 0.35), and translates up 2px (transform: translateY(-2px)) with a 200ms transition, creating tactile feedback. The button-primary-active state compresses the button (translateY(0px)) and reduces shadow to 0 2px 8px rgba(204, 51, 102, 0.2), si

Do's and Don'ts

**Do**

• Do use the hot-pink primary color (#cc3366) exclusively on CTAs and high-priority interactive elements—never on backgrounds or secondary UI.
• Do maintain generous white-space (lg spacing: 40px) between major sections to reduce cognitive load and guide focus toward conversion points.
• Do apply the full-pill rounding (9999px) to all primary buttons to create visual unity and signal clickability.
• Do use the deep navy hero background (#0d2a47) with subtle gradient for hero sections to establish trust and authority.
• Do apply hover states with shadow expansion and 2px upward translation (transform: translateY(-2px)) to create tactile feedback on interactive elements.
• Do use Open Sans Hebrew as the primary typeface to ensure consistent rendering across Hebrew and Latin scripts.
• Do set body text to warm dark gray (#333333) instead of pure black to reduce eye strain while maintaining legibility.
• Do use the 12-column grid with 1024px max-width to ensure content remains scannable and line lengths stay under 75 characters.

**Don't**

• Don't use the primary pink (#cc3366) on non-interactive elements like backgrounds, borders, or decorative elements—reserve it exclusively for CTAs.
• Don't exceed 3 distinct colors in any single section; visual complexity reduces conversion rates.
• Don't use border-radius values smaller than 0.5rem (8px) on interactive elements—sharp corners reduce perceived clickability.
• Don't apply shadows larger than lg (0 16px 40px rgba(0, 0, 0, 0.12)) on standard cards; excessive depth creates visual noise.
• Don't set line-height below 1.5x font size for body text; tight leading reduces readability and increases cognitive load.
• Don't use pure black (#000000) for text; use warm dark gray (#333333) to reduce eye strain and create a more approachable aesthetic.
• Don't mix typefaces—stick to Open Sans Hebrew + Assistant fallback to maintain visual consistency across Hebrew and Latin scripts.
• Don't use container max-widths larger than 1024px; wide layouts reduce scanability and increase cognitive load, harming conversion rates.