PRISM — Tech & Hardware
A Nothing-inspired Astro theme for consumer electronics and hardware brands. Monochrome, dot-matrix typography, instrument-style data layouts. Dark and light mode as first-class citizens.
PRISM is built for companies that make physical products and want a website that reflects their engineering rigor. The design language draws from Nothing's industrial aesthetic — OLED black backgrounds, Space Grotesk + Space Mono typography, dot-matrix display fonts, and data layouts that look like instrument panels.
Every element is designed to feel precise and mechanical: pill buttons in monospace ALL CAPS, underline-only form inputs, segmented progress bars, spec tables with monospace values. No shadows, no gradients, no blur — flat surfaces separated by 1px borders. Confidence through emptiness.
What's included
Pages
- 12 production-ready pages: Home, Products, Product detail (3 products), Technology, Company, Team, Careers, Contact, Privacy, Terms, 404
- Product listing with full-bleed row layout and hover slide effect
- Product detail pages with spec tables, feature grids, and dot-matrix data layouts
- Technology page with engineering process timeline
- Careers page with open positions and company culture section
Design & Animation
- Nothing-inspired monochrome system — OLED black, flat surfaces, 1px border separation
- Doto (dot-matrix) display font for hero numbers and large data — zero JS, Google Fonts
- Space Grotesk body + Space Mono labels — Swiss typography discipline
- Full dark/light mode toggle with cookie persistence — both modes are first-class
- Dot-grid backgrounds via CSS radial-gradient — zero images, zero JS
- Nav: transparent on hero, frosted on scroll, with [BRACKET] active state
- Product card hover: border brightens + image scale — no shadows
- Full prefers-reduced-motion support
Components
- Pill buttons (primary, secondary, ghost) in Space Mono ALL CAPS
- Spec tables with monospace values, right-aligned numbers
- Data rows — label left, value right, 1px dividers
- Tags and chips — pill or technical radius, border-only
- Segmented progress bars — instrument-style discrete blocks
- Underline-only form inputs — no boxes, no shadows
SEO & Performance
- Static output — zero server, zero hydration, instant load
- Auto-generated sitemap, robots.txt, canonical URLs
- Open Graph + Twitter Card metadata on every page
- JSON-LD structured data (Organization)
- Security headers via _headers
- Trailing slash routing — no 301 redirects
- Zero npm dependencies beyond Astro + sitemap
Best used for
- Consumer electronics brands
- Audio and headphone companies
- Tech hardware startups
- Wearable and IoT products
- Dev tool companies (terminal aesthetic)
- Smart home brands
- Camera and optics companies
- Industrial design studios
Deploy anywhere
Static output means zero config on any host. Run npm run build and deploy the dist/ folder to Cloudflare Pages, Vercel, Netlify, or GitHub Pages. No environment variables, no server, no database.