Obsidian glass.
Fiber and wireless, one voice.
A dark, glassmorphic system for Seiretsu's consumer surfaces. One canvas, two product hues, and a strict rule: color means something — blue is fiber, red is wireless, never decoration.
Logo & imagery
The mark is red and blue on white, so it always sits on a white plate on dark surfaces. Brand blue drives Fiber; brand red drives Wireless. Photography is placeholder until real assets arrive.
Canvas & ink
Everything sits on obsidian. Navy midnight tints add depth to section backgrounds and gradients — never as a flat fill for cards. Ink has three steps; stop there.
Product hues
Each product owns one hue at full strength plus a 14–16% dim for fills. Full strength is for text, lines, glows and one CTA per screen. Dim is for backgrounds and badges.
Status
Status colors are reserved for state — connection health, billing, outages. They never brand a product or decorate a hero.
Tight display, calm body
Inter throughout, with stylistic set 01 for the single-storey a. Display sizes tighten tracking; labels loosen it. Mono is for tokens, speeds, account numbers — anything you'd copy.
Glass, border, glow
Cards are 6% white glass with a 14% border and 24px blur. Strong glass (10%) is for hover and the one card that matters. Glow is a product-colored shadow — use it on exactly one focal element per view.
Who gets which color
Five surfaces, two hues. Bundles borrow both; Business and Support stay neutral so the product colors keep their meaning.
Core kit
Primary buttons are ink-on-obsidian; the product hue appears on hover and on the single featured action. Switch the product context to see the kit recolor.
Do / don't
Copy is short, second person, sentence case. Speeds and prices in mono. No exclamation marks, no emoji.