Off Grid Ninja
Off-grid living, one system at a time: power, water, food, shelter, heat, waste, soil and community, explained for real homesteads.
01Context
Off Grid Ninja covers off-grid living, one system at a time: power, water, food, shelter, heat, waste, soil and community, explained for real homesteads. The live site organizes this into eight pillars: Power, Water, Food, Heat & Cooling, Shelter, Waste, Land & Soil, and Community. I founded it, and I designed and developed it myself.
02The problem
Most off-grid advice is either too vague to plan with or written to sell a product. Off Grid Ninja breaks the whole system into eight pillars, does the math first, names its sources, and takes no paid placements.
03Primary / secondary colors and fonts
#F7F1E4#1A2744#1E3A5F#16325A#E07A2F#FFFCF7#5C6670Aa Bb Cc
The quick brown fox jumps over the lazy dog.
The live CSS sets body type to 17px / 1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif. Headlines use the same stack at heavier weights. There is no separate display family.
04Logo
The live site uses this ninja mark beside the Off Grid Ninja wordmark in the header.
05Visual system
A warm paper background and navy ink, with a single orange accent for actions and calculator cards. The ninja illustration on the homepage sits in that same cream field, next to the calculators and the regenerative library.
06Design decisions
Math-first calculators with every step shown
over round-number product pages, because the about page says every default can be changed, specs and prices come from the seller’s own page, and no brand pays to be listed.
07Final product
08Live site
On a wide screen, scroll the live site inside the laptop. The page, and its animations, run as they do on the real site. On a phone, open the live site with the link under the laptop.
Visit the live site →Open offgridninja.com to scroll the live page and its animations.