Skins

One content file.
6 finished looks.

Every page below renders the exact same object from src/lib/content.ts. Swap that file for a real project and you have 6 deployable landing pages before you have written a line of CSS. Design DNA lifted from swipe.neilb.app.

Astro 5 static No runtime JS framework No external assets Google Fonts only
Dark SaaS Every client, every deadline, in one place. Client operations, one system. Start free

Linear Dark

App and product launches. The default for anything with a UI.

swipe ref · linear-dark View →

Clean Corporate Every client, every deadline, in one place. Client operations, one system. Start free

Stripe Corporate

B2B services, client sites, anything that has to look trustworthy.

swipe ref · stripe-corporate View →

Editorial Luxury Every client, every deadline, in one place. Client operations, one system. Start free

Aesop Editorial

Personal brand, high ticket, luxury. Calm and expensive.

swipe ref · aesop-editorial View →

Bold Type-Driven Every client, every deadline, in one place. Client operations, one system. Start free

Gumroad Bold

Offers, productized services, anything that should shout.

swipe ref · gumroad-bold-type View →

Long-Form Sales Every client, every deadline, in one place. Client operations, one system. Start free

AG1 Longform

Long-form sales and VSL pages. Quiz entry, proof stack, sticky CTA.

swipe ref · ag1-longform View →

Structure Only Every client, every deadline, in one place. Client operations, one system. Start free

Wireframe

Drop copy in, see the skeleton. Decide the look after the structure works.

no reference · structural only View →

Reusing one on a real project

  1. 01

    Wireframe it first

    Drop the real copy into src/lib/content.ts and open /s/wire/. Greyscale, annotated, no visual opinion. Argue about the structure and the words there, not on a page that already looks finished.

  2. 02

    Pick the skin by job, not by taste

    Product launch takes Linear. Client and B2B work takes Stripe. Personal brand and high ticket takes Aesop. A loud offer takes Gumroad. Anything that needs a full argument before the ask takes Longform.

  3. 03

    Copy two files out

    src/skins/<id>/Page.astro and src/lib/content.ts are the whole skin. Every selector is prefixed, every visual is CSS or inline SVG, so it drops into any Astro project without collisions. Then recolour the custom properties at the top of the style block to the client palette.