> For the complete documentation index, see [llms.txt](https://jordan-7.gitbook.io/jordan-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://jordan-7.gitbook.io/jordan-docs/internal/l2.md).

# L2 reference set: Polished tech company

Lens L2 is the restraint layer: tight type scale, disciplined spacing, one primary action per view, forms that feel engineered. It is what makes a streamer trust MegaChat with money, and it has to carry Create Room, Account, How It Works and every input and settings surface. A page may lead with L2 but must still pass the L1 (arcade) and L3 (Nerve) sniff tests, so each pick below also notes where it would fail those.

Selection rule: same shape as MegaChat (a marketing landing that leads into an in-product app, for a new consumer / creator / entertainment product) AND the site genuinely demonstrates L2 principles today, not by reputation. Ten candidates were captured live on 2026-09-02 with a local Playwright script (Chromium 151, dark color-scheme, viewports 390x844 / 768x1024 / 1440x900, plus the first sign-up or in-product screen at 1440). Four survive.

Screenshot root: `C:/Users/jorda/mc-ui-overhaul/docs/ui-overhaul/references/L2/<site>/` Files per site: `landing-390.png`, `landing-768.png`, `landing-1440.png` (folds), `landing-390-full.png`, `landing-1440-full.png` (full page), `signup-1440.png` (first sign-up / in-product screen), `detail-1440-*.png` (one supporting section crop).

***

## Pick 1: Linear (linear.app)

**One line:** the definitional L2 landing: a six-word headline, a grey one-line lede, a single filled pill in the header, and the product itself as the hero image.

**Principle it serves:** one primary action per view + a tight type scale. Nothing in the fold competes with the product screenshot; the only accent color on the entire login screen is the one button you are supposed to press.

**Verbatim copy (landing, 1440):**

* Headline: `The product development system for teams and agents`
* Subhead: `Purpose-built for planning and building products. Designed for the AI era.`
* Primary CTA: `Sign up` (white filled pill in the header; the hero has no button, only a `New Loops →` text link)
* Header secondary: `Log in` (ghost)

**First in-product screen (`linear.app/login`):** `Log in to Linear` above four equal-width pills: `Continue with Google` (the only colored element, indigo), `Continue with email`, `Continue with SAML SSO`, `Log in with passkey`. Footer line: `Don't have an account? Sign up or learn more`. Centered column about 290px wide on a black-to-charcoal vertical gradient.

**What to learn for MegaChat:**

* Header hierarchy: ghost `Log in` + filled `Create room` pill, nothing else filled above the fold. The current site's multiple competing accents in the header go away.
* Section headlines as one sentence in two weights: white lead clause, grey continuation (see `detail-1440-feature-copy.png`: "A new species of product tool." then the explanation in grey, same size). This is the fix for "marketing copy reads like a Word document" that does not turn into a Red Bull ad: the emphasis is typographic, not exclamatory. Use it on How It Works.
* Engineered texture without noise: mono-font kickers (`FIG 0.1`, `FIG 0.2`) above illustrations, 1px hairline column dividers, illustrations as line art on black. The MegaChat How It Works steps can use the same mono step labels.
* The product frame: 12px radius, 1px border at low-alpha white, top-edge inner glow, content bleeding off the bottom of the fold. This is the frame treatment for the Booth board and for embedded room previews.
* Auth screen: one filled button; everything else is the same neutral pill. Account and Join Room gates follow this: the paid action is the only colored control.

**Sniff test:** fails L1 completely (no hype, no moment) and fails L3 (no motion, no tension). It is the Create Room / Account / settings reference, never the hero reference.

**Screenshots:**

* `L2/linear/landing-390.png`, `L2/linear/landing-768.png`, `L2/linear/landing-1440.png`
* `L2/linear/landing-390-full.png`, `L2/linear/landing-1440-full.png`
* `L2/linear/signup-1440.png` (linear.app/login)
* `L2/linear/detail-1440-feature-copy.png` (two-weight section headline + FIG kickers)

***

## Pick 2: Luma (luma.com)

**One line:** the closest shape match in the set: a consumer events product where the landing goes straight into a create form, on black, with one gradient moment and a real category color system instead of a rainbow.

**Principle it serves:** an accent SYSTEM on black. Twelve pastel hues (purple, yellow, orange, blue, pink, green, teal) are applied only to icons on identical charcoal cards, so the page stays black and still reads colorful. The hero spends its color on exactly two words.

**Verbatim copy (landing, 1440):**

* Headline: `Delightful events start here` (`start here` in a magenta-to-orange gradient)
* Subhead: `From run clubs to launch parties and firework shows, Luma makes every event feel effortless.`
* Primary CTA: `Create Your First Event` (white filled pill)
* Secondary CTA: `Discover Events →` (plain text link with arrow, no border)
* Header: `Sign In` (small grey pill, top right; no nav at all)

**First in-product screen (`luma.com/create`, no login wall):** the Create Event form renders immediately and a sign-in card floats over it. Form fields visible behind the card: cover art tile, `Personal Calendar` dropdown, `Public` visibility dropdown, `Event Name` as a huge placeholder title (the title IS the input), start and end rows with date + time + `GMT-07:00 Los Angeles`, `Theme Minimal` picker, `Tickets Free` (inline editable with a pencil), `Require Approval` toggle, `Capacity Unlimited` (inline editable), then a full-width `Create Event` button. Sign-in card copy: `Welcome to Luma` / `Please sign in or sign up below.` / `Email` + `Use Phone Number` / placeholder `you@email.com` / `Continue with Email` / `Sign in with Google` / `Sign in with Passkey`.

**What to learn for MegaChat:**

* Create Room as a document, not a settings panel: room name as the big title input, price-per-second and cap as inline `Free` / `Unlimited` style values you click to edit, one toggle row for approval, one full-width `Create room` at the bottom. This is the exact analog of MegaChat's create flow and it is one screen with zero tabs.
* Form first, gate second: the create form is visible behind the sign-in card. MegaChat's Join Room and Create Room can show the real surface behind the auth/pay gate instead of a blank login page (also see Stripe below).
* Category icon colors on uniform cards (`detail-1440-category-colors.png`) are the model for the bounty stacked-bar palette and for room-type or tier badges: pastel hue on the glyph or a 10% tint, never a filled card.
* One gradient moment per page. Luma puts it on two words of the headline and repeats it once at the closing CTA (`Your next unforgettable memory awaits.`). MegaChat's violet-to-magenta logo gradient can play the same role: two words in the hero, once more at the bottom, nowhere else.
* CTA verbs name the outcome (`Create Your First Event`, `Discover Events`) instead of `Get started`. Same discipline for `Create a room` / `Send a MegaChat`.
* Mobile fold (390): the poster grid drops below the CTA, the headline stays three lines, the CTA is a single centered pill with the secondary as a text link beneath. Nothing else changes.

**Sniff test:** partially passes L3 (a feed of posters, phone-first hierarchy); weak on L1 (no moment, no bigness). The floating poster field is a starting point for a Booth board that floats live MegaChat thumbnails.

**Screenshots:**

* `L2/luma/landing-390.png`, `L2/luma/landing-768.png`, `L2/luma/landing-1440.png`
* `L2/luma/landing-390-full.png`, `L2/luma/landing-1440-full.png`
* `L2/luma/signup-1440.png` (luma.com/signin)
* `L2/luma/create-1440.png` (luma.com/create: the event form behind the sign-in card)
* `L2/luma/detail-1440-category-colors.png` (community cards + category color system)

***

## Pick 3: Raycast (raycast.com)

**One line:** proof that a warm accent on black does not have to be harsh: red is used as a grainy gradient light field and as hairline glows, never as a flat fill, inside an otherwise Linear-grade layout.

**Principle it serves:** accent as light, not paint. Also the only pick whose copy has arcade energy inside a tech frame (`New Level Unlocked` on the Pro page), which is what MegaChat's L1/L2 blend needs to sound like.

**Verbatim copy (landing, 1440):**

* Headline: `Your shortcut to everything.`
* Subhead: `A collection of powerful productivity tools all within an extendable launcher. Fast, ergonomic and reliable.`
* Primary CTA: `Download for Mac` (light filled pill with Apple glyph, centered under the hero)
* Under the CTA, in mono: `macOS Tahoe and Apple Silicon required` and `Install via Homebrew | Download V1`
* Header: floating rounded nav container with `Log in` (ghost) and `Download` (filled)
* Mobile fold (390): the download button is dropped because a phone cannot act on it; the only button in the fold becomes `The Raycast Keyboard →` (outlined pill). The CTA follows what the device can do.

**First money screen (`raycast.com/pro`, Raycast is a desktop app so this is its upgrade entry):** kicker pill `Raycast Pro`, headline `New Level Unlocked`, subhead `Turn Pro to harness the power of AI, make Raycast your own with custom themes, keep your Macs in sync and more.`, CTA `Compare Plans` (light filled pill), then mono `Starting at $8/month`. Hero art is a cool chrome-blue ribbon field, i.e. the accent hue changes per page while the treatment stays identical.

**What to learn for MegaChat:**

* How to keep an accent on black soft: grain, diagonal gradient bands, glow at the card edge, and the accent hue never appears as a solid button fill (buttons are light neutral). This is the direct answer to "orange on black is harsh". Whatever the new primary is (violet from the logo, or Chargers powder blue), it should live in light and glow, and the primary button can stay near-white.
* Per-card tinting (`detail-1440-accent-cards.png`): each card carries its own hue (indigo, blue, green) as a top-down tint on the same black card shell. That is the model for MegaChat room cards, bounty tiers and the bounty stacked bars: hue as tint on a shared shell, not different colored components.
* Mono micro-copy under CTAs for system facts (`Starting at $8/month`, requirements). MegaChat's `$0.xx USDC per second` and wallet requirements belong in that slot, in mono, under the button.
* Copy tone: `New Level Unlocked` and `Your shortcut to everything.` are short, confident, slightly gamey, and still sit inside a restrained page. That is the ceiling for how loud MegaChat's L2 surfaces can get.
* Nav as a floating bordered container with a subtle inner gradient, 12-16px radius. Softer than a flat bar, not bubbly.

**Sniff test:** passes L1 (a big, cinematic hero and a moment-style Pro headline); partially passes L3 (the gradient field feels live); the actual in-product screen is a native Mac app, so there is no web form to copy from here.

**Screenshots:**

* `L2/raycast/landing-390.png`, `L2/raycast/landing-768.png`, `L2/raycast/landing-1440.png`
* `L2/raycast/landing-390-full.png`, `L2/raycast/landing-1440-full.png`
* `L2/raycast/signup-1440.png` (raycast.com/pro: the upgrade entry; there is no web login page)
* `L2/raycast/detail-1440-accent-cards.png` (per-card hue tinting on a black shell)

***

## Pick 4: Stripe (stripe.com)

**One line:** the reference for forms that feel engineered and for a sign-up gate that shows the real product behind it; it is what "trust it with money" looks like.

**Principle it serves:** engineered inputs and progressive commitment. Labels above fields, a 2px focus ring in the primary hue, the primary button disabled until the form is valid, and the whole modal floats over a blurred real dashboard so you can see what you are signing up for.

**Verbatim copy (landing, 1440):**

* Eyebrow: `Global GDP running on Stripe: 1.70875858%` (a live counter)
* Headline: `Financial infrastructure to grow your revenue.` (dark navy)
* Subhead: `Accept payments, offer financial services, and implement custom revenue models—from your first transaction to your billionth.` (same h1 element, rendered in muted blue as a continuation)
* Primary CTA: `Get started ›` (filled, Stripe purple)
* Secondary CTA: `Sign up with Google` (outlined, same purple)
* Header: `Sign in` (tinted ghost) + `Contact sales ›` (filled)
* Mobile fold (390): the h1 is cut to the first sentence only, both CTAs go full-width and stack, the lede paragraph disappears from the fold.

**First in-product screen (`dashboard.stripe.com/register`):** modal titled `Create your Stripe account` over a blurred live dashboard (sidebar, `Today`, charts). Fields in order: `Email`, `Full name`, `Password`, `Country` (flag + `United States` select). Primary `Create account` rendered disabled (lavender) until valid. Divider `Or sign in with`, then outlined `Sign up with Google`. Footer `Already have an account? Sign in`.

**What to learn for MegaChat:**

* Input spec for Account and Create Room: label 14px above the field, field about 44px tall, 6px radius, 1px neutral border, focus = 2px ring in the primary color, one field per row, no placeholder-as-label. Disabled primary until valid instead of an error toast after submit.
* The gate over the product: blur the room or the Booth behind the wallet/sign-in modal so the streamer sees what they are unlocking. Luma does the same with a form; Stripe does it with the dashboard.
* Headline discipline on mobile: trim the sentence, do not shrink it to fit. The MegaChat hero already has a six-word headline, so this applies to secondary pages (How It Works, Bounties).
* The live-stat eyebrow is a credible way to say "big" without shouting: `USDC paid to streamers this week` above the hero copy is the L2-compatible version of hype.
* Checkout's payment-method list (`detail-1440-section-copy.png`, the ROASTERY checkout mock) is the model for the pay-per-second confirm sheet: amount at the top, method rows with a radio and one line of context, a single `Continue`.
* Do not take the palette. Stripe is a light theme with a big gradient ribbon; MegaChat stays on black. Steal the form and the hierarchy, not the colors.

**Sniff test:** fails L1 and L3 completely. Pure L2. Use it for inputs, gates and money surfaces only.

**Screenshots:**

* `L2/stripe/landing-390.png`, `L2/stripe/landing-768.png`, `L2/stripe/landing-1440.png`
* `L2/stripe/landing-390-full.png`, `L2/stripe/landing-1440-full.png`
* `L2/stripe/signup-1440.png` (dashboard.stripe.com/register over the blurred dashboard)
* `L2/stripe/detail-1440-section-copy.png` (checkout mock + billing card section)

***

## Dropped

* **Vercel (vercel.com):** monochrome by doctrine, white type on pure black with zero accent; it is the "too black, one accent" gripe taken to its endpoint, and its sign-up is five stacked OAuth buttons with nothing to learn for a money form.
* **Cursor (cursor.com):** the restraint is real but it is Linear with a deliberately small h1, and its sign-in is a hosted authenticator screen (WorkOS-style) rather than an in-product surface, so there is nothing to study past the fold.
* **Cal.com (cal.com):** the booking widget is a genuinely engineered form, but the hero stacks a version badge, two sign-up buttons, a "No credit card required" line and Trustpilot/G2/Product Hunt rows; it breaks one-primary-action and reads marketing-SaaS.
* **Polar (polar.sh):** same black-and-white doctrine as Vercel with less craft, `/login` 404s, and it adds nothing Linear does not already demonstrate.
* **Riverside (riverside.com):** the creator shape is right but the fold has an announcement bar, a cookie wall and seven checkbox pills before the CTA; the opposite of restraint.
* **Whop (whop.com):** the closest business shape to MegaChat (creator monetization, checkout, wallet) but it is orange-on-black with a chunky 3D `Get Started`; it is literally the look Jordan flagged as harsh, useful only as a counter-example.

***

## Cross-cutting L2 rules the four picks agree on

1. **Headline budget:** six or seven words (Linear 8, Luma 4, Raycast 4, Stripe 6 after the mobile trim). The lede is one grey sentence under 20 words, or Stripe's pattern of a white lead clause with a muted continuation in the same block.
2. **One filled button per view.** Everything else is a ghost pill, an outlined pill, or a text link with an arrow. Header: ghost `Log in` + one filled pill, and that pill is the same action as the hero CTA.
3. **Radius, not squares:** buttons are full pills (Linear, Luma, Raycast) or 6-8px (Stripe); cards 12-16px with a 1px border at roughly 8% white; nav containers 12-16px. Nobody ships square corners. This is the answer to "too square, rough around the edges" without going bubbly.
4. **Accent budget on black:** one accent hue for the primary action or one gradient moment per page, never both at full strength. Category and data colors are pastel and land on glyphs or 10% tints on a shared charcoal shell (Luma categories, Raycast cards), never on filled components. Warm accents are rendered as light (grain, gradient bands, edge glow), not as flat paint (Raycast).
5. **Mono for system facts:** prices, requirements, step labels, live counters (`FIG 0.1`, `Starting at $8/month`, `Global GDP running on Stripe`). It is how an "engineered" feel is signaled without adding UI.
6. **Sign-up screens:** a centered card under 400px, OAuth first, email second, passkey third, one colored button, and the product visible behind the gate (Stripe blurs the dashboard, Luma shows the create form).
7. **Create flows are documents:** title as the input, inline editable values (`Free`, `Unlimited`), one toggle row, one full-width submit. No tabs, no wizard.
8. **Mobile fold:** the headline trims or reflows to three lines, the CTA goes full-width or single centered pill, the secondary action drops to a text link, decorative content (posters, product frames) moves below the CTA, and a CTA the device cannot act on is replaced (Raycast) rather than left dead.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://jordan-7.gitbook.io/jordan-docs/internal/l2.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.