← Back home

Prospect Garden

Sunlit component library

A warm manuscript system where ideas are annotated, compared, illuminated, and archived: cream paper surfaces, brown-ink hierarchy, terracotta links, soft jade structure, and one sunbeam action at a time.

10 top everyday components17 warm color decisions5 anti-slop tripwires1 sunbeam action per viewport

Research synthesis

Anti-slop calibration

Social AI design starts to smell generated when it converges on the same purple-blue gradients, centered hero symmetry, fake-happy spectacle, and unearned polish. Prospect Garden answers with warm material specificity, editorial hierarchy, functional chroma, and visibly authored component rules.

What feels AI generated
Default gradient monoculture

Purple-blue glow piles, centered hero blocks, default gray cards, and rounded SaaS shells read as distributional average rather than taste.

Use warm parchment, functional terracotta/jade/sunbeam accents, and asymmetrical editorial spacing instead of decorative rainbow light.
Fake-happy spectacle

Social feeds reward unbelievable heartwarming AI scenes; they feel synthetic when emotion arrives without provenance, stakes, or artifact texture.

Prefer concrete product states, quiet annotations, and source-like receipts over generic wonder, mascots, or sentimental imagery.
Over-symmetric perfection

AI polish often lands as too smooth: centered everything, flawless surfaces, identical cards, and no trace of human sequencing.

Introduce optical asymmetry, paper-edge layering, irregular rhythm, and authored hierarchy while keeping the component contract precise.
Template typography

Inter/Poppins everywhere with heavy hero type and no typographic role separation makes pages feel generated from the same prompt cloud.

Keep the manuscript/sans/mono split: literary headings, utility body, marginalia labels, tight scale rules, and measured line-height.
Animation as confetti

Looping sparkles, parallax drift, and gratuitous reveal motion signal generated garnish instead of system behavior.

Use motion only for state legibility: fast feedback, modal settling, toast exit, and reduced-motion parity.
What feels sophisticated
Reference-led taste

Start from known high-quality visual languages, then translate them through Prospect Garden's own warm manuscript constraints.

Defined tokens first

Sophistication appears when color, radius, typography, shadow, and motion are governed by named rules before components are decorated.

Functional chroma

Color earns meaning: sunbeam commits, jade stabilizes, terracotta warns, ink reads; nothing glows only because AI likes glow.

Tactile specificity

Paper grain, folio edges, margin notes, and ledger density give the interface material memory that generic AI gradients cannot fake.

Editorial restraint

The strongest screen has fewer claims, stronger hierarchy, calmer type, and one primary action per viewport.

Research receipts
Vogue Business

Anti-slop luxury signals include craft-led storytelling, tactile design, real-world experiences, and intentional imperfection over AI precision.

BBC

AI slop backlash on social media clusters around fake, quickly-made, unconvincing images that hijack sentiment without credibility.

Monet

AI landing pages converge on Inter/Poppins, purple-blue gradients, centered layouts, excessive rounding, default icons, and safe component-library grays.

FontsArena

2025 typography feels sophisticated when type choices are strategic assets for UX, brand perception, readability, and emotional response.

Tokens

Color is a sunlit manuscript grammar

Parchment frames attention, ink carries hierarchy, sunbeam commits action, terracotta interrupts only for real risk.

--pg-color-cream-50#FFFDF7
--pg-color-parchment-100#FFF8EE
--pg-color-parchment-200#F7EADB
--pg-color-parchment-300#EBD9BF
--pg-color-paper-edge-400#D9C19F
--pg-color-ink-900#2F251C
--pg-color-ink-700#5F4A38
--pg-color-ink-500#8A7663
--pg-color-terracotta-500#A85B42
--pg-color-terracotta-300#E9B8A4
--pg-color-jade-500#5E8F7A
--pg-color-jade-300#B9D1C3
--pg-color-sunbeam-400#E2B45C
--pg-color-sunbeam-200#F8DFA8
--pg-color-border-warmrgba(116, 84, 55, 0.16)
--pg-color-text-primary#2F251C
--pg-color-text-muted#786858
Fonts

Manuscript Display, Atlas Sans, Marginalia Mono

--pg-font-displayManuscript Display

Literary voice for thesis, page titles, and section openers that should feel printed rather than rendered.

Newsreader, Cormorant Garamond, Iowan Old Style, Georgia, Cambria, 'Times New Roman', serif
--pg-font-sansAtlas Sans

Readable interface type for navigation, forms, annotations, and dense component documentation.

Source Sans 3, Inter, ui-sans-serif, system-ui, -apple-system, sans-serif
--pg-font-monoMarginalia Mono

Tokens, states, measurements, keyboard hints, and tiny catalog labels in the margins.

IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace
Typography

Manuscript headings, atlas utility

display — Manuscript Display; clamp(3.2rem, 9vw, 7.7rem); 500; line-height .92; letter-spacing -0.055em

heading — Manuscript Display; clamp(1.65rem, 3vw, 2.45rem); 560; line-height 1.04; letter-spacing -0.03em

body — Atlas Sans; 1rem; 450; line-height 1.62; letter-spacing -0.005em; max-width 72ch

monoLabel — Marginalia Mono; .72rem; 700; uppercase; letter-spacing .15em

Posture

Unspoken rules

  • Cream paper, not white canvas: surfaces should read like parchment slips layered in sunlight.
  • Cards are folios: contained, named, annotated, and softly lifted from the desk.
  • Controls are sunbeam marks: compact, explicit, and visibly stateful without cold SaaS chrome.
  • Depth is warm air: brown diffuse shadows, low-contrast borders, and subtle paper grain.
  • One sunbeam primary action per viewport; everything else recedes into ink and parchment.
Naming

Implementation naming

pg- CSS class prefix.

--pg-{category}-{manuscript-name}-{scale}

Manuscript noun + product role, e.g. FolioCard, SunbeamButton, LedgerTable

draft / annotated / illuminated / sealed / archived / weathered

Motion

Warmth, not decoration

State changes should feel like warm light settling over paper, never decorative looping.

Fast: 140ms for hover, press, focus, and tab underline warmth.

Illumination: 420ms for modal/toast entrance with y: 8px -> 0 and opacity: 0 -> 1.

Reduced: Replace movement with instant opacity and border-color transitions.

Rhythm

Radius, spacing, and motion variables

--pg-radius-note 8px--pg-radius-folio 16px--pg-radius-page 24px--pg-radius-lantern 32px--pg-space-dot 4px--pg-space-line 8px--pg-space-row 12px--pg-space-folio 16px--pg-space-spread 24px--pg-space-margin 40px--pg-space-desk 72px--pg-motion-fast 140ms cubic-bezier(0.2, 0.8, 0.2, 1)--pg-motion-illumination 420ms cubic-bezier(0.16, 1, 0.3, 1)

Top 10 components

Each card shows the component role, why it exists, its required anatomy, states to design before shipping, and a live preview built with the same sunlit system.

01

Button

Sunbeam action. Primary uses sunbeam fill on ink text; secondary uses parchment fill; destructive uses terracotta outline until confirmed.

Common use: Commit an intent, submit a form, trigger a workflow.

Anatomy
  • intent label
  • warm state halo
  • single dominant sunbeam primary
States
primarysecondarydangerloading
02

Card

Parchment folio. 24px radius, parchment glass, warm hairline, top mono label, bottom annotation metric.

Common use: Group content, compare choices, hold a product object.

Anatomy
  • mono folio label
  • decision title
  • annotation metric
  • one action
States
defaultselectedwarningmuted
Folio clarity84% annotated3 notes ready for review
03

Text Field

Ink line. Paper input, folio radius, sunbeam focus ring, helper text always reserved to avoid layout jump.

Common use: Capture user input without breaking layout rhythm.

Anatomy
  • label
  • paper input
  • helper/error reserve
  • sunbeam focus ring
States
emptyfocusedfillederror
04

Select Menu

Atlas picker. Same geometry as Text Field; chevron is a folded page-corner marker; menu floats as a folio card.

Common use: Choose from constrained options with low cognitive load.

Anatomy
  • label
  • selected value
  • folded-corner chevron
  • floating folio menu
States
closedopenselecteddisabled
05

Checkbox

Seal toggle. Square paper seal; checked state draws an ink tick with a 140ms scale/opacity transition.

Common use: Represent boolean choices, consent, filters, and row selection.

Anatomy
  • wax square
  • ink tick
  • direct label
  • optional helper
States
uncheckedcheckedindeterminatedisabled
06

Modal

Lantern decision. Dim the desk with warm overlay; modal gets lantern radius, parchment body, and one primary sunbeam action.

Common use: Interrupt only when a contained decision must be made now.

Anatomy
  • amber scrim
  • lantern panel
  • decision copy
  • paired actions
States
openconfirmingsavingblocked
07

Tabs

Ribbon markers. Text tabs on a parchment row; active tab receives a sunbeam underline and ink label.

Common use: Switch between sibling views without leaving the current context.

Anatomy
  • tab row
  • active sunbeam underline
  • count marker
  • content panel
States
activehoverfocusoverflow
08

Data Table

Ledger grid. Dense rows, sticky parchment header, mono numeric cells, terracotta only for true risk signals.

Common use: Scan records, compare metrics, select rows, and reveal risk.

Anatomy
  • sticky paper header
  • dense rows
  • mono metrics
  • terracotta risk cell
States
sortedselectedemptyloading
PageStatusRisk
Design SystemIlluminatedCalm
CheckoutNeeds copyAmber
09

Badge

Wax seal. Compact chip; jade success, sunbeam pending, terracotta risk, paper neutral; full pill allowed only here.

Common use: Compactly label status, category, priority, or risk.

Anatomy
  • pill container
  • semantic hue
  • short label
  • optional dot
States
successpendingriskneutral
Jade successSunbeam pendingTerracotta riskPaper neutral
10

Toast

Margin note. Parchment surface above the page; concise result sentence, optional undo, exits upward after acknowledgement.

Common use: Confirm a completed action while preserving the user's flow.

Anatomy
  • parchment surface
  • result sentence
  • optional undo
  • exit motion
States
successqueuederrorundoable
Annotation saved to the margin.