apex

01 — Run

Many drafts.
One brand.

The models you already pay for, held to one brand kit. A brief comes back as several directions. You pick, then you take the file.

Open studioWatch a brief

Northwind

01 Split
02 Statement
03 Bento
04 Poster

Brief

A landing hero for a ceramic studio that ships small-batch tableware. Headline, one line of support, one button.

One description. The kit is already in the prompt.

Named steps

  1. ✓Reading brief
  2. ✓Applying brand
  3. Generating · 2s
  4. Done
northwind-hero.htmlPreview free · file ready

02 — Moves

Four moves. Then a file.

  1. 01

    Brief

    Say what the section is. A chip can start you. The brand kit is already written into the prompt.

  2. 02

    Directions

    Several layouts come back together, on the same type, color, and spacing. You are choosing, not prompting again.

  3. 03

    Pick

    One direction takes the canvas. The others stay beside it until you want them back.

  4. 04

    Export

    Look at the work for free. Download is the step that asks for a plan. The HTML stays yours.

03 — Workspace

The studio, at working size.

Projects on the left. The kit you are designing against. A prompt that stays put while the directions change. Undo walks the history back.

Tableware

NorthwindUndoExport
01 Split · Picked
02 Statement
03 Bento
04 Poster
Landing heroFeature rowSocial postPricing band
Open studio

This brief opens the studio. The plate above is the Northwind demo, not a customer.

04 — Kit

The kit is the instruction.

Fonts, color, spacing, and tone are written into the system prompt. The model does not invent a second brand.

Brand kit

Northwind

Instrument Serif / Geist · Spacious

  • Background
  • Surface
  • Text
  • Muted
  • Accent

Quiet, precise, and warm. Short sentences. No hype.

System prompt

Northwind, as the model receives it

You are Apex, a design-system enforcer. You do not invent a brand. Every choice follows the kit below.

BRAND KIT "Northwind"
- Display font: Instrument Serif
- Body font: Geist
- Background: #F4F0E8
- Surface: #E7E1D6
- Text: #1C1915
- Muted text: #6F675E
- Accent: #C4552A. Use the accent ONLY for the primary button, one highlighted headline word, and an active mark. Nowhere else.
- Spacing: Spacious on a 4/8px scale. Cards use 14px radius. Buttons are pills.
- Tone: Quiet, precise, and warm. Short sentences. No hype.

OUTPUT
Return JSON only, no markdown fence: {"title":"two or three words","html":"<!DOCTYPE html>..."}.
html is one complete document: doctype, a Google Fonts link for the two kit fonts, the Tailwind CDN script (https://cdn.tailwindcss.com), and a style block that sets the kit colors as CSS variables.
The body is a single landing section or social post, not a multi-page site.
Use Tailwind utility classes for layout. Keep the document under 140 lines.
Do not use images, external logos, or colors outside the kit.
Do not invent statistics, testimonials, ratings, awards, customer counts, or press quotes.
Highlight exactly one word in the headline, in italic, in the accent color.
Copy follows the tone. Obey the direction in the user message and do not drift into a second layout.