Design teardown
Arc
A cream and violet homepage with scalloped bands, tight display headlines, and large product pictures.
arc.net
Design character
Soft, picture-led, and playful
The page is a single centered column of full-bleed bands. A violet bar sits on top, then a pale wash, a violet quote band, white feature sections, a cream quote row, and a violet footer. Headlines are one or two short lines, centered, with a single quieter sentence under them. Buttons are a few words with an icon. Navigation is single words. Footer groups use tiny tracked labels over one- or two-word links. The tone is warm, second-person, and lightly playful. One word in a closing line is italic.
Typography
Display lines use a soft rounded face and a high-contrast display face, both tight and heavy. Support copy is a smaller humanist sans in gray. Labels and chips are a small mono, often uppercase with positive tracking.
Color system
The stage is warm cream. Full-bleed bands are a vivid violet with a light noise image, so the violet photographs a little lighter and grainier than the flat fill. Text on violet is cream. Actions are near-black, white, or deep indigo.
Spacing and geometry
An 8px rhythm with wide 32px page insets. Bands are tall because each feature is mostly a picture. Corners stay in a small set: 8, 10, 18, and 22.
Layout
Full-bleed horizontal bands, content centered. A sticky violet header keeps a shortened title and the dark pill after scroll. Feature sections are a title, one sentence, then a wide product picture.
Motion
Motion is short and functional, plus one slow loop. Hover fades are under a quarter second. A quote line travels sideways for more than a minute. Product sections are silent autoplay videos.
UI fingerprint
- Scalloped bands Cream, white, and violet sections meet on a repeating wave instead of a straight rule.
- Violet noise The violet fill is #3139fb with a light noise image, so the bands look soft and slightly grainy.
- Tight display Large titles are heavy, tightly tracked, and almost the same height as their line box.
- Picture then type After a short centered title and one sentence, the section is mostly a product picture.