Prism — Design at the speed of thought (Swiss big-type red hero)
Swiss / International-Typographic-Style hero section for an AI design tool: pure white ground, near-black Inter type and one hot signal red. A 12-col grid with a HUGE three-line Inter 800 headline ('Design at / the speed / of thought.') where only the last word is red, an index-rule eyebrow, a single underlined uppercase CTA and a trust row, paired with an angled clip-path 'canvas' panel of floating generated artifacts (red block, component card, swatch chip, prompt tag), a sticky blurred nav and a full-bleed use-case marquee.
Summary
A Swiss / International-Typographic-Style hero section for an AI product-design agent. Pure white (#ffffff) ground, near-black ink (#0a0a0a) type and a single hot 'signal' red (#ff3b30) accent. A two-column 12-col grid: a left big-type column carries a HUGE three-line Inter 800 headline on a strict baseline ('Design at / the speed / of thought.') where only the last word is red, an index-rule eyebrow ('AI Product Design --- 01 / Hero'), a tight subhead, a single underlined uppercase CTA, and a baseline trust row; the right column is an angled (clip-path) light-grey canvas-art panel showing floating 'generated artifacts' (a big red block, a white component card, a 3-swatch chip, and a black prompt-cursor tag) with a 'Generated 0.8s' corner index. A sticky blurred white nav sits on top and a full-bleed auto-scrolling uppercase marquee band closes the section. Strict grid, generous whitespace, no decoration that isn't structural.
Style
Swiss / International Typographic Style, modern SaaS interpretation. Monochrome base (paper white #ffffff ground, ink #0a0a0a text) with exactly one accent: a hot signal red #ff3b30 used for blocks, icons and the single headline accent word, plus an AA-grade darker red #d70015 (5.38:1 on white) reserved for small red text like the eyebrow. Type is all Inter (system fallback), set tight: the display headline is Inter 800 with -0.045em letter-spacing and 0.92 line-height for dense stacked lines; body uses a -0.02em 'grotesk-tight' tracking; labels/eyebrows are uppercase with wide tracking (eyebrow 0.28em, rule 0.18em). Everything snaps to a strict 12-column grid with hairline ink/10 rules and big whitespace. Accents are flat geometric blocks and squares (a rotated red square logo glyph, solid red rectangles, sharp-cornered swatches) with NO rounded corners anywhere and only soft directional drop-shadows on the floating artifacts. A subtle 56px canvas grid texture and an angled clip-path panel add the 'infinite canvas' product cue. Mood: precise, editorial, confident, high-contrast; never soft, gradient-heavy or pastel.
Layout & Structure
A single hero section (not a full page) built on a 12-column grid inside a max-w-[1280px] container, preceded by a sticky blurred white nav and closed by a full-bleed marquee band. The hero splits lg:7 / lg:5: the left big-type column stacks an index-rule eyebrow, a huge three-line headline, a tight subhead, a single underlined CTA, and a bottom-aligned trust row; the right column is an angled clip-path light-grey 'canvas' panel that bleeds slightly off the right edge (lg:right-[-48px]) and holds four absolutely-positioned floating 'generated artifacts' plus a corner index label. Responsive: below lg the grid collapses to one column, the angle flips (clip-path polygon(0 12%,100% 0,100% 100%,0 100%)) and the panel becomes a fixed-height (~280px) stacked block, the nav center links and trust row hide, and the headline clamps down from ~7.8rem to ~3rem.
Sticky nav
Hero left (big type)
Hero right (angled canvas panel)
Marquee band
Special Notes
Single hero SECTION (sticky nav + hero + marquee), not a full page. Font: Inter only, loaded from Google Fonts (weights 400/500/600/700/800/900), system-ui/sans-serif fallback, with font-feature-settings cv02/cv03/cv04/cv11 and -webkit-font-smoothing antialiased. Styled with Tailwind via CDN using a custom theme: colors ink #0a0a0a, paper #ffffff, signal #ff3b30, signal-ink #d70015 (AA 5.38:1 red for small text on white -- blocks/icons keep the brighter signal). Canvas panel base #f4f4f4 with a 56px rgba(10,10,10,0.05) repeating-linear-gradient grid. Keep all corners sharp (no border-radius) and red strictly rare and load-bearing -- it should appear only on the one accent word, the logo square, the big block, the swatch, and small icons. Maintain the strict 12-col grid, generous whitespace and AA contrast (small red text uses signal-ink, not signal). Responsive: collapse to one column below lg, flip the panel clip angle, hide the nav center links and trust row, and clamp the headline down.