Rayon

Item: Rayon
Rating: 7.7

Browser-based collaborative CAD for interior designers and architects.

rayon.design Save page

7.7/10MABTU rating

DESKTOP · 1440 × 14,696/ ↗

MOBILE · 390

Section outline · Home

01heroDark blueprint grid, centred headline, app video frame1,378
02logosTwo-row gridded logo strip
03featureElectric blue slab with drafting screenshot812
04featureOrange slab, screenshot left812
05featureYellow slab with export UI812
06featureWhite and orange collaboration screenshot812
07bentoDark navy tile grid of tools213
08benefitsUI collage and four benefit points855
09testimonialsEight quote cards in a grid1,367
10resourcesYellow, lilac, orange resource cards1,537
11ctaBlue slab with app screenshot1,792
12footerLink columns and giant RAYON wordmark

Rating · Home

Visual design8.2

UX & clarity7.6

Originality8.4

Craft & consistency7.8

Motion6.5

Performance & a11y7.7

This page scores 7.8; the site score weights the home page double.

Main colours

Mixed sections·white background·vivid

Typography

Geist Sansheading · sans · self-hosted Geist Sansbody · sans · self-hosted

Stack & style

Next.js React Sanity Tailwind CSS

Bold typography Bento Sharp / geometric Product-UI-led Bento grid Hero video Logo cloud Sticky header

Also: Meta Pixel, Vercel, Amazon CloudFront, Google Analytics

Design DNA

Near-black hero with a thin red blueprint grid, a tight bold centred headline, a floor-plan app screenshot and a two-row gridded customer logo strip. Feature bands switch to full-bleed electric blue, orange and yellow panels with curved lilac and white cut shapes, heavy tight headlines with a second line in orange, and large drafting UI screenshots. A dark navy bento of tool tiles (AI visualisation, libraries, markup, BIM, material swatches, versioning) follows, then white benefits, a testimonial grid, resource cards and a footer ending in a huge stencil-like RAYON wordmark over blueprint lines.

Worth borrowing

Run each feature as a full-bleed flat colour slab with a curved cut shape framing the screenshot.
Use a faint red architectural grid behind a dark hero to signal a drafting tool.
End the footer with an oversized custom-geometry wordmark sitting on the brand's line motif.