Inside the Oura Ring 5 website design
Oura Ring 5 is a health website built with custom code, Next.js, and Tailwind CSS. Its pages are built from navbar, hero, stats, gallery, other, features, and footer sections, shown here in full-page captures and a scroll recording. Typography: Editorial New (display text and headings) and Akkurat LL (body text). Colours: background #F3F1F0, text #19191C, main buttons #2A72DE, surface #F7F1E8.
Meet Oura Ring 5. Now 40% smaller with a titanium design and up to 9 days of battery for sleep, activity, stress, heart health, and recovery. Explore the collection. Its visual style is editorial, minimal, and soft, with navigation bar, hero with background imagery, and primary button among its components.
Why we picked it
Oversized macro shots of the ring's curved metal band fill the opening screen, letting the product's finish and shape sell itself before any copy appears. Big bold stats like 40% and 1 week break up the page into easy, scannable chapters, while a worn-on-hand shot and muted neutral tones keep the mood calm and trustworthy.
What to look for
- Navbar: a short menu: only the destinations visitors actually look for
- Hero: a specific headline instead of a generic slogan
- Stats: three or four numbers that matter to the buyer
- Gallery: minimal interface around the images
Sections from Oura Ring 5
Questions designers ask
What fonts does Oura Ring 5 use?
Oura Ring 5 uses Editorial New for display text and headings, and Akkurat LL for body text, measured from the captured page's CSS.
What is the Oura Ring 5 website built with?
The Oura Ring 5 website is built with custom code, Next.js, and Tailwind CSS, detected when the page was captured.
What colours does the Oura Ring 5 website use?
Measured from the captured page's CSS, the Oura Ring 5 website uses #F3F1F0 for the background, #19191C for text, #2A72DE for main buttons, and #F7F1E8 for surfaces.
What sections does the Oura Ring 5 website have?
The Oura Ring 5 website includes navbar, hero, stats, gallery, other, features, and footer sections. Each one opens on its own page, so you can compare it with the same section on other websites.
