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.
Pages
- 22 production-ready pages: Home, Products, Product detail (3 products), Technology, Company, Team, Careers, Contact, Journal (blog with categories), Privacy, Terms, 404
- Product detail pages with spec tables, performance metrics, and feature grids
- Technology page with 6 data visualization components (segmented bars, radial gauges, line chart, bar chart, donut chart, data table)
- Journal system with category filtering and per-article SEO
Design & Animation
- Nothing-inspired monochrome system — OLED black, flat surfaces, 1px border separation
- Doto (dot-matrix) display font for hero numbers
- Space Grotesk body + Space Mono labels
- Full dark/light mode toggle with system preference detection
- Dot-grid backgrounds via CSS radial-gradient
- Nav: floating pill, frosted on scroll, bento menu icon
- 3 button variants: primary (text→arrow swap), secondary (vertical roll), link
- Reveal-on-scroll animations with IntersectionObserver
- Full prefers-reduced-motion support
Components
- Button (3 variants with morphing hover animations)
- SegmentedBars — instrument-style discrete progress
- RadialGauges — circular instrument readouts with count-up
- LineChart — Chart.js powered, log scale, smooth spline
- BarChart — animated vertical bars
- DonutChart — SVG donut with staggered segments
- DataTable — spec comparison grids
- CTA, Stats, Timeline, SectionHeading
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 + WebSite + BlogPosting)
- llms.txt for AI/GEO discoverability
- Pagefind full-text search
- Security headers via _headers