Eco Firestarters

Overview

Eco Firestarters embodies a 'Warm Naturalism' aesthetic—merging the earthy authenticity of natural firestarters with the vibrant energy of outdoor lifestyle culture. The brand serves eco-conscious consumers who value both performance and environmental responsibility, transforming the mundane act of starting a fire into a moment of connection with nature. The visual language celebrates the interplay between organic materials (wood, charcoal) and modern design clarity, evoking warmth, reliability, and adventure. The brand personality is approachable yet authoritative: knowledgeable without being pedantic, energetic without being frantic. Voice example: 'Light it once, enjoy it all night—no chemicals, no guilt.'

Colors

The color system balances warmth with environmental consciousness. Primary (#ff8c42, a vibrant burnt-orange) is the signature accent used on CTAs, active navigation, and key interactive elements—it evokes the flame itself and commands attention on white backgrounds. Secondary (#7cb342, a natural sage-green) reinforces the eco-friendly positioning and appears in supporting UI, badges, and secondary actions. Tertiary (#3a8dc2, a sky-blue) provides a cool counterpoint for informational elements and secondary content. The surface stack is anchored in clean white (#ffffff) with subtle grays (surface-container-high: #e0e0e0, surface-container-low: #f0f0f0) for layering and depth without visual noise. Error red (#cf2e2e) is reserved for destructive actions and validation states. All text on prima

Typography

The type system uses Open Sans Hebrew as the primary family, with Arial and system sans-serif as fallbacks, ensuring consistent rendering across Hebrew and English content. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure page sections and product categories. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) form the reading layer, with generous line-height (1.5x) to support readability in outdoor contexts. Label-md (14px, 600 weight, 0.01em tracking) and label-sm (12px, 500 weight, 0.05em tracking) handle UI labels, buttons, and metadata. When small labels appear over busy photographic backgrounds (e.g.,

Layout

The layout follows a 12-column grid with a max-width of 1280px (850px for content-constrained sections), ensuring readability on desktop while maintaining mobile responsiveness. The spacing scale is semantic: unit (8px) as the base, with sm (12px) for tight component spacing, md (24px) for section gutters and card padding, lg (40px) for major section separation, and xl (64px) for hero/footer breathing room. The gutter (24px) is applied consistently to horizontal padding on all container elements. White-space is generous—sections are separated by lg spacing (40px) to create visual rhythm and prevent cognitive overload. Cards and containers use md padding (24px) internally, with sm (12px) padding for nested elements. The hero section spans full-width with a background image and overlay, foll

Elevation & Depth

Depth is conveyed through subtle shadows and layering rather than dramatic effects. Level 1 (Base): clean white surface (#ffffff) with no shadow. Level 2 (Cards & Containers): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) with a 1px border in outline-variant (#b3b3b3), creating a soft separation from the background. Level 3 (Modals, Dropdowns, Hover States): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) with a 2px lift (transform: translateY(-4px)) on hover. Interactive elements (buttons, inputs) use a primary-tinted shadow on hover: box-shadow: 0 8px 20px rgba(255, 140, 66, 0.25) to reinforce the

Shapes

The shape philosophy is 'Approachable Clarity'—rounded corners are used strategically to soften the interface while maintaining a modern, professional feel. Buttons use lg radius (1rem / 16px) for a friendly, inviting appearance. Cards and containers use md radius (0.75rem / 12px) to balance softness with definition. Input fields use DEFAULT radius (0.5rem / 8px) for a compact, functional look. Badges and pills use full radius (9999px) for a playful, badge-like appearance. The rationale: larger radii (lg) on primary CTAs signal importance and approachability; medium radii (md) on content conta

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (button-primary) use the brand orange (#ff8c42) background with white text, 48px height, 12px 24px padding, and lg radius (16px). On hover, the background shifts to #ff6900 with a 0.25 opacity shadow (0 8px 20px rgba(255, 105, 0, 0.25)) and a -2px vertical lift (transform: translateY(-2px)). Active state darkens to #e67e00 with a reduced shadow (0 2px 8px). Secondary buttons use a transparent background with a 2px primary-colored border and the same text color; on hover, they fill with primary-container (#ffe8d6). All button transitions use 200ms timing with cubic-bezier(0.2, 0, 0.2, 1) easing. ### Containers & Surfaces Cards (card) have a surface-container-lowest background (#fafafa), md radius (12px), md p

Do's and Don'ts

**Do**

• Do use primary orange (#ff8c42) exclusively on CTAs, active states, and brand-critical moments—it's the visual anchor of the system.
• Do maintain md spacing (24px) between major sections and lg spacing (40px) for hero/footer areas to create breathing room and guide the eye.
• Do apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to small labels over photographic backgrounds to ensure accessibility.
• Do use 200ms cubic-bezier(0.2, 0, 0.2, 1) transitions on all interactive elements for a cohesive, polished feel.
• Do pair Open Sans Hebrew with generous line-height (1.5x) for body copy to support readability in outdoor/mobile contexts.

**Don't**

• Don't use primary orange on non-interactive elements or backgrounds—it must remain reserved for actions and focus states.
• Don't apply shadows deeper than lg elevation (0 16px 40px rgba(0, 0, 0, 0.12)) on standard components; reserve deep shadows for modals and overlays only.
• Don't mix rounded radii arbitrarily; buttons use lg (16px), cards use md (12px), inputs use DEFAULT (8px)—consistency is key.
• Don't use system fonts or generic sans-serif fallbacks in display/headline sizes; always specify Open Sans Hebrew first.
• Don't reduce spacing below sm (12px) in component padding or section gutters; the system relies on generous white-space for clarity.