Skip to content
StrictThemes

Themes / 18

Confetti

A light, cheerful theme for invitations, parties and gift lists. Lilac-white paper, plum ink, and pastel pink, sky and lilac.

Install into a shadcn project
npx shadcn@latest add https://strictthemes.com/r/confetti.json

01 / Preview

Stock shadcn components, this theme.

Confetti

Ship the page, keep the system.

Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.

NewDraftv1.2.0Failed
Invite a reviewer
They get read access to this project.
Colors on token96%
x
Spacing on scale88%
x
Type on scale100%
x

02 / Page prompts

Paste one into your agent. Get that page.

Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page built from the prompt, shown as it came out.

  • Invitation

    The invitation to a summer wedding, with a pastel opening that sets the names and the date large, the time and the place, a short welcome from the couple, the plan for the day in four lines and one action to reply.

    38.0k characters

    Strict Check 100%

    Preview the Invitation pageRead the prompt: Invitation

  • Reply

    The reply form for a summer wedding, with who is replying, a choice of coming or not, the number of guests, a dinner choice and a note, checked in code, with a summary of the day beside it and a confirmation that replaces the form.

    40.7k characters

    Strict Check 100%

    Preview the Reply pageRead the prompt: Reply

  • Gifts

    The gift list of a summer wedding, with a short note, a grid of gifts with drawn pictures, prices and a way to reserve each one, and a shared contribution toward one larger gift with a meter and a form.

    42.7k characters

    Strict Check 100%

    Preview the Gifts pageRead the prompt: Gifts

  • The day

    The plan for a wedding day, with a timeline of the day in rows, the venue with its address and how to get there, where to stay nearby, and questions and answers in an accordion.

    41.7k characters

    Strict Check 100%

    Preview the The day pageRead the prompt: The day

  • Guestbook

    The guestbook of a summer wedding, with messages from guests as cards with a round initials avatar, and a form to leave a message, checked in code, with a confirmation that replaces it.

    38.9k characters

    Strict Check 100%

    Preview the Guestbook pageRead the prompt: Guestbook

03 / Colors

Every color the theme allows.

  • primary

    #4A2A63 / #FFAFCC

  • on-primary

    #FFFFFF / #2E1A3F

  • secondary

    #CDB4DB

  • on-secondary

    #2E1A3F

  • tertiary

    #A2D2FF

  • on-tertiary

    #2E1A3F

  • neutral

    #6B5480 / #BFAACC

  • background

    #FBF7FD / #1E1229

  • surface

    #FFFFFF / #2A1A38

  • foreground

    #2E1A3F / #F7EEFA

  • border

    #DCCBE6 / #4B3460

  • error

    #B3123F / #FF9BB0

  • blush

    #FFC8DD

  • on-blush

    #2E1A3F

  • candy

    #FFAFCC

  • on-candy

    #2E1A3F

  • mist

    #BDE0FE

  • on-mist

    #2E1A3F

Left: light mode. Right: dark mode.

04 / Typography

Five sizes. Nothing in between.

  • display

    Caprasimo · 64px · weight 400 · line 1

    The quick brown fox

  • h1

    Caprasimo · 40px · weight 400 · line 1.1

    The quick brown fox

  • h2

    Caprasimo · 24px · weight 400 · line 1.2

    The quick brown fox

  • body

    Nunito · 17px · weight 400 · line 1.6

    The quick brown fox

  • label

    Ubuntu Sans Mono · 13px · weight 500 · line 1.3

    The quick brown fox

05 / Shape and space

Corners and spacing.

  • sm

    8px

  • md

    14px

  • lg

    24px

  • xs

    4px

  • sm

    8px

  • md

    12px

  • lg

    24px

  • xl

    40px

  • 2xl

    88px

06 / Rules

What the strict block enforces.

Contrast
WCAG AA
Colors
Tokens only, within 0.02 of a token
Spacing
Scale only, plus 0, 1px, 2px
Corners
Scale only, full rounds up to 64px
Type
Scale only, declared fonts only
purple gradient
Not allowed
emoji icons
Not allowed
nested cards
Flagged
glow shadows
Not allowed

07 / Guidance

What your agent reads.

Overview

Confetti is for happy occasions and the pages that organise them: a wedding invitation, a birthday, a baby shower, an RSVP form, a gift list. It should feel like a card that came in the post: soft paper, a fat friendly serif, and blocks of pastel. The pastels are fills. Everything that has to be read is plum ink.

Colors

  • Primary (#4A2A63) is plum, for the one main action: "Reply", "Send", "Add my share". Links in running text use it too. In dark mode the main action is pink with plum text.
  • Secondary (#CDB4DB) is lilac, with ink on it, for every other button.
  • Tertiary (#A2D2FF) is sky blue, with ink on it, for one badge: "Reserved", "Day two", "Plus one".
  • Blush (#FFC8DD), candy (#FFAFCC) and mist (#BDE0FE) fill large blocks: an opening, a date panel, a section band. They are the same in both modes, and text on them is always plum ink (#2E1A3F), in dark mode too, never the mode's text color.
  • Neutral (#6B5480) sets dates, addresses and captions.
  • Background (#FBF7FD) is lilac-white paper. Surface (#FFFFFF) is the white of a card.
  • Error (#B3123F) is used only with a message.

Typography

Caprasimo sets headings in its one weight: a fat, soft serif that is already bold. Never fake a heavier weight or an italic. Set names and dates large. Nunito sets body text at 17px, rounded and easy. Ubuntu Sans Mono sets labels in sentence case: dates, times, addresses, counts of guests, prices.

Layout

A 12-column grid, 1040px at its widest, with 24px gutters. Most pages are one centered column, the way a card is read, with a pastel block at the top. Spacing comes from the scale (4, 8, 12, 24, 40, 88): 24px inside a card, 88px between sections. Blocks of color alternate with white paper; two pastel blocks never touch.

Elevation & Depth

Flat, like printed card. A card is white with a 1px lilac border and no shadow. A pastel block has no border. Menus and dialogs float on one soft, plum-tinted shadow.

Shapes

Soft and generous: 8px for badges and checkboxes, 14px for buttons and inputs, 24px for cards and color blocks. Avatars and switches are fully round.

Components

  • Buttons: plum for the one main action (pink in dark mode), lilac for the rest. Sentence-case mono labels.
  • Cards: white, 24px corners, 24px padding, a 1px lilac border.
  • Badges: sky blue with ink text, one or two words.
  • Color blocks: blush, candy or mist, 24px corners, ink text, one heading and a few facts.
  • Icons: 1.5px stroke line icons with round caps. Never emoji, however festive the page.

Do's and Don'ts

  • Do keep text in plum ink: a pastel is a fill, never a text color.
  • Do keep buttons, links and fields on the paper: a pastel block holds text only.
  • Do use one pastel per block, and white paper between blocks.
  • Do say the date, the time and the place plainly, near the top.
  • Don't scatter decoration: no confetti drawn in code, no gradients, no glows.
  • Don't put a pastel block inside a card or a card inside a card.
  • Don't introduce a color, size or radius that is not a token above.