Skip to content
Rechaj Design

Website design guidance

Design guidance for the public website redesign. See the project brief and page inventory for working scope and source context.

Rationale

Section titled “Rationale”

Help visitors understand Rechaj’s offering and reach a clear next action through a responsive marketing website. The first direction uses an editorial marketing layout informed by Wunder Power, with an oversized footer name informed by Base Power. Rechaj’s own palette, General Sans and angular brand shapes remain the visual foundation.

Redesign canvas

Section titled “Redesign canvas”
  • Design desktop pages at 1440px and mobile pages at 390px, with responsive behavior between them.
  • Use the existing marketing layout vocabulary for navigation, hero, content sections and footer. This public website is already a separate product in the design system.
  • Keep page-specific classes under web-* and reuse shared component styles and generated tokens where applicable.
  • Use flat palette fills, General Sans and the exact Rechaj brand mark. Follow the global button, typography, icon and spacing rules.
  • Maintain one main heading per page, visible focus states and reduced-motion behavior.
  • Put completed page designs in screens/ and cross-page interaction prototypes in prototypes/; register their actual HTML URLs in the product catalog after creation.

Inherits from global DESIGN.md

Section titled “Inherits from global DESIGN.md”

This is a marketing web product (1440px desktop + responsive), not an internal-tool mobile app — so the .phone shell and rsm-* scaffold don’t apply directly. The token and brand foundations still do. Before adding a new page, read these sections of the master DESIGN.md:

The mobile-specific patterns (page-head, body, nav, bottom-sheet) are explicitly out of scope for the marketing site — don’t import them. The marketing site has its own layout vocabulary (hero sections, feature grids, footer) that should follow the global tokens but not the rsm-* scaffold.

Class-name prefix

Section titled “Class-name prefix”

web-* for marketing-site components (hero, feature card, pricing tile, footer). Register in the global class-name ownership table.

Cards — no strokes

Section titled “Cards — no strokes”

Restating the global rule because every product CSS extension tries to drift back into single-side accent stripes:

  • ❌ border: 1px solid var(--grey3) (or any colour) on any card, readonly tile, sheet, row, or grouping container.
  • ❌ Single-side accent stripes — no border-left, border-top, border-right, or border-bottom to colour-code state.
  • ✅ background: <neutral or tinted bg> + box-shadow: var(--sh-card) + border-radius: 14px.

Screens

Section titled “Screens”

screens/ is ready for the first responsive homepage design. No screens have been completed yet; track their status in the page inventory.

Prototypes

Section titled “Prototypes”

The Website redesign flow is the starting canvas, stored in flows/website-redesign/index.html with a companion design.md. It contains the first responsive homepage frame with working navigation, solution tabs and video controls. See the companion flow design document for reference interpretation and content status.

prototypes/ is ready for clickable visitor journeys. The first proposed journey is homepage to contact, pending the primary action decision in the brief.

Brand reference guardrails

Section titled “Brand reference guardrails”

The user supplied the Rechaj brand boards on 13 September 2026. Use primary green #01E46F, forest #0F1D13, electric yellow #E5FF03, cream #FDFFEC and General Sans. Keep the exact brand mark. Cropped angular bolts and faceted image treatments are the distinctive graphic vocabulary; generous space gives them room to work. Local marketing colors use --web-* names without overriding generated system tokens.

Wunder Power informs the spacious split hero, fine grid, panoramic media and editorial section rhythm. Base Power informs only the large footer wordmark. Apply these ideas through Rechaj’s identity. The reference sites’ logos, copy and media are not assets for this project.

Copy direction

Section titled “Copy direction”

Use the supplied Rechaj Positioning Memo (2026) as the messaging guide. Lead with “Powering Africa at work.” Describe a distributed energy network for Africa’s productive economy, starting with commercial mobility and building toward broader productive uses. Make reliability and customer economics concrete. Describe solar as central to a mixed energy system, with a cleaner mix as a direction of travel. Keep outcome claims grounded in supplied evidence and the public story at the network level.

Public website copy excludes retrofitting and vehicle-conversion messaging. Describe the customer energy service and its economic purpose.