Skip to content
staqd

Elegant

Glides through generous whitespace with delicate type and smooth transitions.

$9
Version
v1.0.0 · Updated Jul 18, 2026
Context
1,321 tokens
Security
✓ scanned
License
Single seat
Works with
Claude Code, Cursor, Codex
Get notified at launch

Checkout opens soon · launches at $9

staqd.ai/previews/elegant
Open

≈1,321 tokens · v1.0.0

Live demo — an original page built in the Elegant style. Open in new tab

About this skill

A graceful and polished design system with generous whitespace, delicate typography, and smooth transitions. Its live demo renders an e-commerce storefront — collection hero, product cards, lookbook strip, and reviews.

The skill file

Elegant is a calm, refined design language defined by space, restraint, and quiet sophistication. It leans on a warm off-white canvas, delicate serif headlines, and a single muted gold accent to create interfaces that feel curated and unhurried. Reach for Elegant when you want a sense of luxury, craft, and editorial polish: fashion houses, premium services, and content that deserves room to breathe.

Design principles

  • Let whitespace do the work. Generous margins and airy spacing communicate quality more than any decoration.
  • Pair a graceful serif for headings with a clean sans for body to balance character and clarity.
  • Keep color whisper-quiet: warm neutrals carry the page, and a soft gold appears only as a refined punctuation.
  • Favor thin lines, light weights, and gentle curves; nothing should feel heavy or loud.
  • Maintain a strict reading measure so long text stays comfortable and composed.
  • Choose subtlety in every interaction; transitions should be felt, not noticed.

Color

The background is a warm off-white #FBFAF7 that softens the entire interface, with pure #FFFFFF surfaces for cards and panels to create the faintest layering. Text sits in a near-black warm charcoal #1C1B19 rather than harsh pure black, keeping the tone gentle. Secondary and supporting copy uses #8A877F, a muted warm gray. The accent is a soft antique gold #9C7A4A, used for links, small CTAs, prices, and active states. Borders and dividers are a delicate #E8E4DC. For dark mode, shift to a deep #1C1B19 background, #242220 surfaces, #FBFAF7 foreground, and a slightly brighter gold #B89360 so the accent retains warmth. Avoid saturated color entirely; elegance lives in the spaces between hues, not in their intensity.

Typography

Headings use Cormorant Garamond (or a comparable high-contrast serif) at light-to-regular weights, set large at 40-80px with neutral 0em tracking so the letterforms keep their natural grace. Body copy uses Inter at 400, 17-18px, with a relaxed 1.7 line-height and a hint of 0.01em tracking for an open, breathable texture. The type scale follows a gentle major-third ratio (1.25) so steps feel smooth and harmonious. Italic serif is welcome for pull quotes and emphasis. Use the mono stack only for fine print, captions, or metadata, kept small and unobtrusive.

  • Layout & spacing
  • Components
  • Motion
  • Accessibility
  • Use it with your AI tool

Preview ends here

Layout & spacing, Components, Motion, Accessibility & Use it with your AI tool unlock when checkout opens. Get notified

What's inside

  • SKILL.md5.2 KB
v1.0.0Jul 18, 2026sha256: a91496941594
staqdMember since Jul 2026 · 69 listings · 5 installsView profile →