Pagenue v0.6.0
skills/apple-minimal-landing/SKILL.md9 sectionsProprietary

Apple-minimal landing page style

The agent loads it when

A calm, premium, Apple-like look for landing pages: a Swiss grotesk with one italic serif accent, two-tone lowercase headlines, soft gray cards with big radii and no borders, a single warm accent, and quiet motion (a split-flap word rotator, blur-and-spring reveals, a sliding tab pill). Gives exact type sizes, color tokens for light and dark, component recipes in Tailwind v4 and Framer Motion with plain-CSS fallbacks, a page skeleton and a list of don'ts. Use this whenever someone wants a landing page, product site or homepage that looks Apple-like, minimal, classy, clean or premium, even if they don't name the skill.

npx @codesudee/web-skills -s apple-minimal-landing
Download .zip

Try it

01 · A page in the style

Calm, gray, one warm accent

A small hero built from the skill's tokens and recipes. The second headline line flips like a split-flap, the tab pill slides, and the cards fade up with a little blur. Switch the theme or replay the entrance.

log in

support that helps youincrease conversion 💸, lower churn 📉, get more reviews ⭐️

in-app chat that feels native, answers fast and asks happy users for a review at the right moment.

one line in your app delegate. native chat that looks like you built it.

don't take our wordtake theirs

2,456chats answered
563extra reviews
$7.9kmore revenue
does it work in dark mode?

yes. every token has a dark value, and the gray panels step up instead of going black.

can i change the accent?

swap one variable. keep it to one accent outside product mockups.

what about reduced motion?

the flip and the reveals turn into plain fades.

Apple-minimal landing page style

The look was first matched against the reception.sh landing page. Use this whenever building or restyling a marketing/landing page, product site, or utility-site homepage that should feel calm, premium and Apple-like. Default stack: Next.js/React + Tailwind v4 + Framer Motion (motion). For plain HTML, use the CSS fallbacks given below.

1. Design philosophy

  • White page, near-black text, ONE warm accent (red-orange). Everything else is grayscale.
  • No borders, no heavy shadows. Separation comes from soft gray panels (#f7f7f7) with big radii, and from whitespace.
  • Product is shown, not described: realistic device mockups (iPhone frame, laptop) with real UI inside, plus one bold photographic prop (e.g. crumpled dollar bills, a car headlight) for personality.
  • Copy is lowercase, short, casual, slightly cheeky (“no bulls**t pricing”, “reply from the beach or the gym”).
  • Motion is subtle and physical: springs, small blur, small translate. Nothing bounces wildly or loops loudly.

8 more sections

  • Typography
  • Color tokens
  • Layout & spacing
  • Components
  • Motion & interactivity (the “classy” part)
  • Copy voice
  • Page skeleton (in order)
  • Don’ts

Create a free Pagenue account to read the whole skill, download it, and install it.

Sign in free to read the rest