Svelte

An original Lissom page: a fixed 60px white navigation with a ribbon-L mark, five Fira Sans links, a Fog search pill, three line icons and two raised buttons; a misty hero with the lowercase two-line serif headline web interfaces / for the rest of us, an uppercase ember GET STARTED arrow link and a full-width isometric conveyor carrying loose interface parts into a rounded ember compiler block that sends out packed parcels; then a dictionary definition with an ember pronunciation and ADJECTIVE tag beside two lifted survey cards, a teams strip, a playground code frame, a community collage, a backers wall, a one-line footer and a fixed ember event banner.

• Best forOpen-source libraries, frameworks and developer tools that want a warm, literary homepage — serif voice, white canvas, one accent colour — instead of a dark dashboard look.
• Tech stack- Next.js (App Router) - React - TypeScript - CSS custom properties Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius, spacing and type token. Render the page as server components; only the event-banner dismiss, the dark-mode toggle and the mobile menu need small client islands holding state in memory. Self-host DM Serif Display, Fira Sans, Fira Mono, EB Garamond and Gelasio (the Georgia stand-in on systems without it) as woff2 files through next/font/local — no remote font request. Draw the ribbon-L mark, every icon, the isometric conveyor-and-compiler illustration, the survey cards, the wordmarks, the poster tiles and the avatars as inline SVG, CSS and HTML built from committed sample arrays — never bitmap photos, stock imagery or video — so the markup is identical on every render. Provide page metadata. Build and run the production page before capturing its preview.

Build the "Svelte" kickstart — A bright, editorial open-source framework homepage: a lowercase serif headline, one ember arrow link and an isometric conveyor feeding a rounded ember compiler.

## Design
Build a rebrandable landing page for an open-source UI framework that compiles components ahead of time into small, fast web interfaces, written for developers who want them in the HTML, CSS and JavaScript they already know.

Create a complete landing page for Lissom, a fictional open-source UI framework. This is a concept presentation, not a real project — no real framework, company, person or logo. Use original branding, artwork and copy throughout.

Color: a bright, almost monochrome page with one ember accent. Paper #FFFFFF is the canvas, the navigation bar and every card. Fog #F2F2F2 fills the search pill, inputs and hover washes. Ink #262626 is body copy, navigation links, icons and the dark tag; Carbon #141414 is every display headline. Slate #666666 is helper text and captions, Ash #808080 tertiary metadata, and Rule #E0E0E0 hairline dividers and the raised-button rim. Ember #D43008 is the wordmark mark, the pronunciation, uppercase arrow calls to action, inline links and the event banner — never a button or card fill anywhere else. The hero sits on a soft mist that runs from #DEE5EA under the navigation to #F6F8FA at its foot and then into Paper.

Typography: "DM Serif Display", Georgia, serif for display headlines only — 54px/64.8px, weight 400, no tracking, lowercase sentence copy. Body copy is Georgia, Gelasio, serif at 18px/27px. Interface chrome — navigation, calls to action, tags, the search field, the banner — is "Fira Sans", -apple-system, "Segoe UI", sans-serif: navigation links 16px/24px, the hero call to action 20px/30px uppercase, the search placeholder 14px, the wordmark 18px with 0.24em tracking, tags 12px uppercase. The pronunciation is EB Garamond at 60px/54px in Ember. Code samples use Fira Mono 14px/22px. All five faces are SIL Open Font License.

Layout: a 1440px canvas; content sits on a 168px left edge (a 1104px column), the navigation has 48px side padding. Radii are 4px on cards, tags, raised buttons and code frames; 56px only on the search pill. No drop shadows on content except the faint 8px glow under the navigation and the lifted survey cards; separation comes from whitespace — about 100px between major sections.

Navigation: a fixed 60px white bar. At x 48 a 132px home link: a 26px ember ribbon-L mark and LISSOM in Fira Sans with wide tracking. From x 180, Docs and Playground (each with a 20px chevron), Tutorial, Packages and Blog, 16px Ink, 8px side padding, underline on hover. Right: a 190×34px Fog search pill with a magnifier, the placeholder search and a CTRL K hint; three 22px Ink line icons (chat, feed, source); then two 32px raised buttons with a 4px radius — a text-size A and a crescent dark-mode toggle.

Hero (id top): 528px tall on the mist. At x 168, y 155, a 486px headline on two lines — web interfaces / for the rest of us — and 37px below it the uppercase Ember link GET STARTED with a 20px arrow that nudges right on hover. Across the full width an original isometric illustration drawn in SVG: a long grey conveyor belt with a dark vented side runs in from the lower left carrying loose grey interface parts (a knob, a cart, a cube, a slider, a slab, a toggle) and one ember part into a rounded ember block — the Lissom compiler — whose top deck holds a raised white L and two thin antennae and whose right face reads LISSOM in spaced letters; a second, narrower belt leaves its far side toward the upper right carrying four small packed ember parcels. A soft blurred shadow sits under the block.

Definition: at y 588 the Ember pronunciation /ˈlɪsəm/, a dark Ink ADJECTIVE tag with white 12px text, and lithe, supple and easy in motion in 16px Fira Sans. Below, a 532px column of two 18px/27px Georgia paragraphs; to its right two lifted survey cards — a light 537×296px card with a Frameworks people enjoy note and a dot-range chart of ten invented frameworks, overlapped by a 428×228px Ink card ranking Lissom #1 for seven years in a line chart.

Teams strip (id teams): the 54px headline used by teams you've heard of centred between two rows of seven invented grey wordmarks.

Playground (id repl): a 1104px #262626 code frame split into a Fira Mono counter component and a white live-result pane, with an Ember Open this example in the playground link beneath.

Community (id community): the centred headline join our friendly community, a 504px centred lede with Ember links, and a collage of six drawn meetup-poster tiles in Ember, Ink, Fog and mist.

Backers (id donors): a centred lede and three rows of 36px greyscale initial avatars.

Footer (id footer): one centred 16px line — © 2026 Lissom contributors · a fictional sample, not a real project — with an Ember link.

Event banner: a 42px Ember bar fixed to the bottom of the viewport with centred 16px white Fira Sans — Lissom Summit Porto and online, Nov 19-20: Tickets now available! and an arrow — and a 32px raised dismiss button at the right.

## Tech stack
- Next.js (App Router)
- React
- TypeScript
- CSS custom properties

Use Next.js App Router, React and TypeScript with plain CSS custom properties for every colour, radius, spacing and type token. Render the page as server components; only the event-banner dismiss, the dark-mode toggle and the mobile menu need small client islands holding state in memory. Self-host DM Serif Display, Fira Sans, Fira Mono, EB Garamond and Gelasio (the Georgia stand-in on systems without it) as woff2 files through next/font/local — no remote font request. Draw the ribbon-L mark, every icon, the isometric conveyor-and-compiler illustration, the survey cards, the wordmarks, the poster tiles and the avatars as inline SVG, CSS and HTML built from committed sample arrays — never bitmap photos, stock imagery or video — so the markup is identical on every render. Provide page metadata. Build and run the production page before capturing its preview.
Where the repo you are working in already has an equivalent in place, keep the repo's choice and say which one you kept.

## Everything else
Keep Lissom clearly fictional and rebrandable: no real framework, company, person or logo, and no source illustration, photograph, survey screenshot or copy. The page reads as a calm white broadsheet with one ember spark: #D43008 colours only the mark, the pronunciation, uppercase arrow links, inline links and the event banner, and no button or card is ever filled with it except that banner. Headlines are always DM Serif Display, lowercase, centred below the hero and left-aligned in it; body copy is always serif; interface chrome is always Fira Sans. Radii stay at 4px (56px search pill only) and content casts no shadow beyond the navigation glow and the lifted survey cards. Text pairs clear WCAG AA: #262626 and #141414 on #FFFFFF and #F2F2F2, #666666 on #FFFFFF, #FFFFFF on #D43008 and #262626. Every link leads to a real section on the page; nothing submits. The page loads no analytics or tracking script and shows no cookie banner or chat bubble. Content is initially visible: no counters, typing effects, parallax or scroll reveal; the only motion is the 150ms arrow nudge and hover underlines, and it stops for prefers-reduced-motion. Every control shows a 2px #D43008 focus ring with a 2px offset. The illustration and survey cards are labelled images; the decorative icons are hidden from assistive technology. At 360px the navigation collapses to the mark, the search icon and a Menu button, the headline drops to 40px/46px, the illustration crops to the compiler block and its belts, the definition stacks above the survey cards, the wordmark rows wrap into a grid, the code frame stacks its panes, and the page never overflows horizontally.

### Non-negotiables
- Responsive from 360px through desktop — no horizontal page overflow at any width. Deliberately scrollable regions stay within the viewport and remain keyboard and touch accessible.
- Every text/background pair clears WCAG AA (4.5:1 for body, 3:1 for large text); adjust a tint rather than shipping a failing pair.
- Fully keyboard operable, with a visible focus ring drawn in the accent colour.
- Honour `prefers-reduced-motion` — swap every transition for an instant state change.
- Write real copy in the voice described above; no lorem ipsum and no TODO placeholders.
- Use system or self-hosted fonts and CSS/SVG-drawn graphics — do not depend on a remote image or icon service.

Build the whole page end to end and show me the result running — not a description of it.