Core, marketing and invitation families
Hero through RSVP, each one observed in the live product
Observed across ivory, paper, ink, slate, mist and gold
Gratuito, Premium Mensual, Premium Anual
Casamiento.App is an Argentine wedding SaaS. A couple signs up, fills in the event from a panel, and the page publishes itself: a cover image with their names and the date, a live countdown, ceremony and party cards with map links, the gift arrangements, the gallery, a song. There is no template to pick apart and no builder to learn — the data is the page.
What separates it from a wedding-website template is the second half: the guest list. Guests are typed in or imported from a CSV, and each one gets a personal link carrying a token, so the RSVP form arrives with their name already filled and the platform — not the couple — decides how many places they hold. The confirmed list comes back out as a PDF or a CSV, and at the door a QR code checks people in.
It is sold freemium — Plan Gratuito, Premium Mensual, Premium Anual — billed in ARS for Argentina and USD for the rest of LATAM, and the free plan is genuinely free: one landing page for life on the "Moderno" theme, with unlimited RSVP confirmations. Every string is Spanish in Río de la Plata voseo, and the whole thing runs on WordPress and Elementor. That last part is the point: it is our own WordPress practice, on our own product, with our own name on the support queue.
Every item below is a block that ships, taken from the design system’s own component list and plan tables — not a roadmap.
The page guests actually open: one scroll that answers every question they would otherwise ask by message.
Two modes, because a wedding is not a mailing list: a personal link per guest, or an open form when the couple has no list yet.
The list is the product. It is built before the event, exported for the venue, and scanned on the night.
Three modes behind one switch, because how couples ask for gifts differs by family and by country.
casamiento.app shipped before it had a written system. The one documented here was reconstructed afterwards — colours sampled pixel by pixel from two full-page captures, sizes measured off a 2× capture, copy read from the live pages — and then tightened until it passed WCAG 2.1 AA. What follows is the result: one serif family doing nearly all the work, two grounds that alternate down the page, and a short list of rules that stop a warm palette from quietly failing contrast.
#FCF8F3
The warm ground — marketing chrome and invitation paper. #F8F3EF drops one shade for CTA bands; #F1E9DF is the deepest it goes.
#F8F8F8
The neutral section ground, with #FFFFFF cards on top. Sections alternate ivory and paper so hairlines, not boxes, do the dividing.
#12100F
Warm near-black for headings — 17–19:1 on both grounds. Body steps down to #333333 at 11.8:1; placeholders stop at #5F5F5F rather than the browser default.
#3C4860
The single chromatic accent: primary buttons and links. #2C3A4F is both the invitation heading colour and the button hover, so hover reads as the page’s own blue getting darker.
#9FC0D6
Lifted from the watercolour leaf art. #EDF3F7 tints the countdown panel and nothing else — it exists so the countdown can differ from the page without inventing a third ground.
#C8952A
Ornament and premium contexts only — the laurel wreath around the couple’s song, the checkmarks in pricing lists. It measures 2.7:1, so it is a fill, never a word.
#8F6B18
Gold when it has to be read: 4.9:1. The "Más Popular" badge is this on #F6EBD2 with a #A87E1F hairline — three tokens to say one thing legibly.
These are Casamiento.App’s colours, printed here as documentation. Nothing on werun.dev is drawn from them.
68px display at weight 400 and zero tracking, 44px section headings, 17px body at 1.7 line-height. Nothing is condensed, nothing is italic. The only bold usage in the system is the 28px invitation venue name. The identification is an informed read of the letterforms, not a confirmed spec.
The sans that carries micro-labels at 14px with .14em tracking — raised from 12px/.18em because Cormorant’s small x-height makes uppercase micro-labels hard to read at the smaller size. It is a stand-in: the real label face was too small in the capture to identify.
Named, not loaded — this page sets every family above in werun.dev’s own type.
#C8952A measures 2.7:1 on ivory. It fills the laurel wreath and the pricing checkmarks and stops there. Icons and borders step down to #A87E1F (3.7:1) and gold text to #8F6B18 (4.9:1). The rule is written down because the wreath is the warmest gesture in the brand and the pull to set a price in it never goes away.
#E7E7E7 through #C9C9C9 are decorative only — FAQ rows, footer lists, step rules. Anything interactive (inputs, outline buttons, unselected RSVP choices) uses #8A8A8A, which clears WCAG 1.4.11’s 3:1 floor for non-text contrast. Two greys that look the same to the eye do different jobs, so the token names carry the difference rather than the swatch.
Ivory and paper alternate down the page, and a section separates itself by changing ground — not by a box, a border or a shadow. There is no third background and no gradient used as decoration anywhere; the only gradient in the system is the protection overlay under text on photography.
White copy never goes on a bare photo. It goes over a 0.50 → 0.62 black gradient that holds white above 6.9:1 on mid-tone imagery, and on-photo buttons carry their own rgba(18,16,15,.45) scrim behind the label. Hero copy is full-opacity white, never alpha-faded — fading it is the fastest way to lose the ratio that the overlay was added to buy.
casamiento.app was live before it had a written system. The tokens were sampled pixel by pixel from two full-page captures with the live pages read as text for verbatim copy — no Figma file, no CSS, no font binaries. Writing it down is what turned a set of Elementor pages into something a second person can extend without guessing.
27 components, and each family corresponds to a block observed in the captures or on the live pages. Exactly three are additions: Icon, a thin wrapper that normalises size and colour over Font Awesome; and Eyebrow and SectionHeading, extracted from a label-plus-heading pattern that repeated in every section rather than re-declared each time.
Every heading, paragraph, venue name, itinerary item and bank field is content the couple loads; what is written into the template is example text. Thirteen-plus image slots carry stable ids so an image can be recropped without losing its place, and the gift mode, RSVP mode, companion limit and decorative pattern are all props, not forks of the template.
The couple’s dashboard appears in the source material only as a thumbnail inside a blog card, so it is documented as a surface and left unbuilt. The watercolour leaf ornaments straddle the cover photo and could not be cropped free of it — rather than redraw them, Countdown takes optional leafLeft and leafRight paths and renders nothing at all without them.
