Reading a card

Batch 004: People

Batch 004 is twenty-four cards about people, and they fall into six kinds. Contact cards are for reaching someone: the Contact card and the Business card put phone, email and place first. Identity cards say who someone is: the Team member, Speaker, Author, Mentor, Host and Profile header cards lead with a face and a role, then add the proof that matters where they sit, a talk, a rate, a rating or a follower count. Social-move cards exist for one action between two people: the Follow suggestion, Invite, Match and Celebration cards each carry a single main button. List rows are built to repeat: the User row, Presence, Chat message, Comment and Leaderboard row cards stack in a column and keep their actions small or out of sight until the pointer arrives. Record cards hold working detail about someone you are handling: the Candidate, Client, Directory and Org node cards. Badges are shown rather than read: the Achievement, ID badge and Avatar stack cards.

The conventions are shared. Avatar size follows the role, not the card: 24px for faces inside a group or a row of reports, 32px for list rows, 40px for a request or an org node, 48px for contact and record headers, 64px for a centred card that is mostly the person, and 88px only for a profile header, where it overlaps the cover with a 4px background ring. Text runs in one order everywhere: the name first in the heading face, then the role, then a muted meta line for company, place, local time or mutual connections. Status is a small dot with a 2px background ring: green for online or active, muted for away, hollow for offline or deactivated, always with a word beside it or a hidden label so colour never carries it alone. The follow button has two states and is undone by the same button: filled with Follow at rest, a ghost with a check and Following when selected.

Reach for the Contact card first when someone needs to get in touch, the User row card for any admin list, and the Directory card for a staff grid. For one person on their own page pick the Profile header card; for a single face in a strip of suggestions, the Follow suggestion card. The Profile card from batch 001 still suits a general summary, and the Seller card from batch 002 is the right choice when the person is really a shop.

Batch 005: Data tiles

Batch 005 is twenty-four dashboard tiles, and each answers one kind of question. The one number: the KPI tile when there is a target, the Comparison tile when the question is "better than last month", the Hero number tile for the single figure the room should see. The trend: the Trend tile for a path over a month, the Bar tile for seven days, the Heatmap tile for half a year of days, the Stock tile for a price. The share: the Donut tile for three parts of a whole, the Usage tile for a quota and what fills it, the Gauge tile and the Progress ring tile for one reading against a scale or a goal. The rank: the Ranked bars tile and the Funnel tile. The table: the Table tile for exact records, the Delta list tile for metrics with their changes, the Activity tile for who did what. The state: the Status tile, the Alert tile and the Empty tile, with the Timeline, Calendar, Weather, Clock and Countdown tiles for time and place.

The chart rules hold in every tile. One hue per measure: a single series is the accent, a second is muted, a third is line colour, and rank is shown by tint, never by a new hue. Thin marks: 2px lines, bars with 4px rounded tops standing on the baseline, round caps on arcs, tracks and empty cells in line colour, no gridlines. Adjacent fills and stacked segments are split by 2px gaps in the background colour. Text wears text colours, fg and muted, never the series colour, and a legend appears once there are two series. Status colours are reserved: good, warning and critical are defined on each card as mixes toward the foreground, and always arrive with a glyph and a word. No dual axes: a comparison is two numbers or two tiles. The hero number is tabular, in the heading face, sized by clamp on the container width.

Reach for the KPI tile first for a number, the Trend tile for a number with a history, the Ranked bars tile for anything ranked and the Status tile for anything that can break. The Stat tile and the Sparkline tile from batch 001 stay the lightest choices when nothing else is needed.

Batch 006: Content

Batch 006 is for the written and taught word. Six kinds share it. Editorial items carry a story: the Magazine card, the Numbered card for list articles, the Pull quote card and the Continue reading card. Reference entries hold something you look up: the Definition card, the Citation card, the Changelog card and the Callout card. Learning steps move someone forward: the Step card, the Lesson row card and the Flashcard. Participation asks the reader to act: the Poll card, the Quiz card and the Newsletter card. Developer content is the Code card and the Docs card. The navigators sit around a text rather than inside it: the Table of contents card, the Series card, the Related card, the Link preview card, the History entry card, the Social post card and the Announcement card.

A few conventions run through the batch. Most cards open with a kicker line, 11px caps in accent or muted, that says what kind of thing this is (Long read, Lesson 4, Question 3 of 10, Reference 12) before the title says which one. Numerals that matter, such as the listicle rank or the year in a history entry, are set in the heading face so they read as part of the typography, not as data. The Flashcard reveals its answer below the prompt instead of flipping, so the question stays in view while you check yourself; reach for the Flip card from batch 001 only when the back should replace the front. Every form has three states: ready, wrong and done. The Newsletter card shows a field with a help line in the critical mix, then a success panel in place of the form. Status always travels as a glyph and a word as well as a colour: Warning with a triangle, Deprecated with a minus and a struck title, Correct with a check, Not quite with a cross, Completed and Locked on a lesson.

Which to reach for first: the Magazine card or the Numbered card for an editorial index, the Callout card for documentation, the Step card for any how-to, and the Accordion card for an FAQ. Add the Table of contents card or the Series card once a text is long enough to need finding your way around.

Batch 007: System

Batch 007 is the app's own furniture, the cards every product needs and nobody draws until the last week. Feedback tells you what just happened: the Toast card, the Sync status card, the Offline card and the Error state card. Decisions stop you before something matters: the Confirm dialog card, the Permission card and the Cookie card. Settings hold the switches: the Settings section card, the Integration card and the Feature flag card. Files come in through the Dropzone card and the Upload progress card. Access and trust are the Session card, the API key card, the Two-factor card and the Password strength card. Recovery and notice cover the rest: the Maintenance card, the Update card, the Onboarding card, the Shortcut card, the Command item card and the Search result card. Work items close the batch: the Task card, the Kanban card and the Calendar event card.

The conventions are strict because these cards carry state. Every state has a glyph and a word as well as a colour: Success with a check, Error with a triangle, Revoked with a cross, Archived with a minus, Overdue in the due chip, Synced after Back online. Good, warning and critical are mixes toward the foreground defined on each card, so they stay readable on dark palettes. The destructive button is filled in the critical mix and never stands alone: Delete always has Cancel beside it, Revoke is a text link, and the current device cannot revoke itself. A spinner is a 16px ring with one accent side, it only ever appears in a glyph's place, never beside one, and it stops under reduced motion. Shortcuts are key caps with a heavier bottom edge. Secrets are masked down to their last four, with reveal and copy as icon buttons, and copy answers with a check and the word Copied.

Reach for the Toast card first for any passing message, the Confirm dialog card for anything that cannot be undone, the Settings section card for a preferences page and the Error state card for a panel that failed. Use the Notification card from batch 001 when a message should wait to be read, and the Callout card from batch 006 when the warning belongs to a page rather than to an action.

Batch 008: Bento and tiles

Batch 008 is for cells that live in a grid rather than in a list. Three families share it. Bento cells build a marketing or feature grid: the Feature tile, the Headline tile, the Number tile, the Image tile, the Split tile, the Mosaic tile, the Quote tile, the Logo wall tile and the CTA tile. Home-screen tiles and widgets are the furniture of a launcher or a personal dashboard: the App tile, the Folder tile, the Shortcut tile, the Live tile, the Reminders widget, the Calendar widget, the Memories widget, the Now playing tile, the Activity rings tile, the Battery tile and the Streak tile. Device controls change something in the room: the Smart home tile, the Thermostat tile, the Timer tile and the Quick actions tile.

The conventions follow from one rule: a cell is sized by the grid, not by its content. A square is as tall as it is wide whatever it holds, so the type scales with the container, in cqw clamped between a floor for 280px and a ceiling for 640px, and a headline or a number fills the cell at both sizes. Widgets are rounder and quieter than cards, radius 20 with no border; bento cells take radius 16 and a hairline on the palette background; launcher icons have no box at all, because the icon is the shape. Each cell holds one idea: one feature, one figure, one picture, one action. Pictures fill their cell edge to edge with object-fit cover, so an image never floats in a frame of empty panel. Device controls are real buttons and switches, and their on state is a fill, a word and a tint together.

To compose a wall, start with the Headline tile as the 2x2 at the top left. Put two Feature tiles beside it, then a Number tile for the proof, an Image tile or a Split tile for the picture, and close the row with the CTA tile set wide. A Quote tile or a Logo wall tile fills a wide gap below. For a home screen, set App and Folder tiles in a row of four, then one or two widgets at 2x2 and square below them. Keep to one palette per wall and let the CTA tile, inverted, be the one cell that shouts.

Batch 009: Playful

Batch 009 collects cards whose point is the move they make, in five groups. Deck and swipe, one item at a time: the Deck card, the Swipe card and the Peek stack card. Reveal and transform, hiding something until asked: the Scratch card, the Peel card, the Envelope card, the Fold card and the Postcard. Game pieces: the Playing card, the Collectible card, the Tarot card, the Dice tile, the Bingo tile, the Lottery card and the Spin wheel tile. Motion-led: the Tilt card, the Parallax card, the Liquid card and the Confetti card. Toy UI, information dressed as a thing on a desk: the Sticker card, the Polaroid card, the Ticket stub card, the Receipt card, the Sticky note card and the Odometer card.

The motion follows five rules. A transition takes 250 to 400ms and eases out; only the wheel spin (2.5s), the flip (600ms) and the liquid wave (a 4s loop) run longer, and the wave is the only thing that loops. Under reduced motion every transition drops to zero, the settled state shows at once and the loop is removed. The rest state must read as a still, so a thumbnail makes sense with nothing moving: the foil is visibly a foil, the fold shows its corner, the die shows a face. Motion animates transform and opacity only, never layout. Anything that would need a drag or pointer tracking, such as scratching, swiping, peeling or tilting toward the pointer, is replaced by hover or a toggle button, and each recipe says in one line what the real interaction would be.

Frames and surfaces earn their place here more than anywhere else in the catalogue, because these cards imitate printed objects. The Scratch card wears the foil surface, the Collectible card a hologram over its art window with a gilt bevel corner, the Tarot card a tarot corner and the Ticket stub card a ticket corner around it; the Sticky note card takes linen. Frames set the radius to zero, so those cards are designed square.

Do not use any of it for information needed at a glance, for anything that must be compared, or more than once or twice on a screen. Each rationale names the quieter neighbour to reach for instead.

Batch 010: Forms and input

Batch 010 draws the controls of a form as cards, in six groups. Single fields hold one value: the Text field card, the Textarea card, the Select card, the Combobox card, the Search field card and the Inline edit card. Choices pick from a short list: the Checkbox group card, the Radio group card, the Segmented control card, the Switch list card and the Toggle tile card. Pickers set a value you would rather not type: the Slider card, the Rating input card, the Date picker card, the Time picker card, the Quantity field card and the File input card. Secure entry covers the Code field card and the Password field card. Composite forms are several fields that belong together: the Address form card and the Card form card. Shells hold a form rather than being one: the Wizard step card, the Consent card and the Form summary card.

A field has four looks and every card styles all four, whichever states it lists. Rest is a 1px border at 24% foreground on the palette background. Focus is an accent border with a 3px accent halo, and the keyboard ring is always 2px accent at a 2px offset on :focus-visible. Error is the critical mix on the border with a warning glyph and a message. Success is the good mix with a check. Colour never works alone: each look has a glyph and a word as well.

Labels sit above the field, never inside it as a placeholder that vanishes when typing starts. A help line under the field says what is expected before anyone gets it wrong, and the error message takes its place rather than stacking under it, so the card does not jump. Error copy says what to do, not what went wrong: Choose at least one, Check the number, You need to agree to continue, Display names need at least 3 characters.

The rule under all of it: every control is the real element. Text is an input or a textarea, choices are radios and checkboxes inside a label, switches are checkboxes with role switch, steppers and day cells are buttons, and the select and combobox panels open from a button with aria-expanded. Where the design shows no label, a visually hidden one is there, so a copied card takes the keyboard and reads aloud as what it looks like.

Batch 011: Navigation and wayfinding

Batch 011 is the navigation kit: twenty-four cards for getting around, sorted into five groups. Global navigation moves between the big places: the Sidebar item card, the Tab bar cell, the Mega menu card, the App switcher card and the Site map card. Local navigation moves around one section: the Breadcrumb card, the Back link card, the Tab strip card, the Hub card and the Menu tile. In-page navigation moves around one page: the Contents rail, the Jump links card, the Anchor nav card, the Next and previous card, the Pagination card and the Skip link card. Menus open from a button: the Sort menu card, the Language menu card, the User menu card, the Notification menu card, the Filter bar card and the Drawer handle card. Position and orientation say where you are: the Stepper card and the Wayfinding card.

Most of the batch sits on paper with one sans pairing on purpose, because navigation should recede. The content is the point, and the way to it should be quiet, always in the same place and never louder than what it leads to. Only three cards take another register (a dark sidebar, a sky stepper and wayfinding card, a cream chapter pager) to show that the shapes carry a palette well.

Each level has one active item, marked twice: in the code with aria-current (page for pages, location for sections of the page you are on) or aria-selected for tabs, and on screen with a single cue. That cue is an accent underline for tabs and anchor bars, a filled square for the current page number, a wash for the active sidebar row and a rail segment for the active section. Never stack a wash, a rail and bold on one item. Counts are small chips beside the label, not part of it. Overflow has rules: under 400px breadcrumbs collapse their middle crumbs into one ellipsis button, pagination keeps only previous, current and next, and tab strips and anchor bars scroll sideways with the scrollbar hidden and a fade at the edge, rather than wrapping onto a second line.

Which to reach for first: a Sidebar item card or a Tab bar cell for an app's main places, a Breadcrumb card above any page three levels deep, a Tab strip card for sibling views, and a Contents rail beside any long read. Add the Skip link card to every page with a header. When someone lands on a 404 or an empty search, give them the Wayfinding card.

Batch 012: Travel and places

Batch 012 is the travel kit: twenty-four cards that follow a journey in five steps. Choosing is the Destination card, the Neighbourhood card, the Destination weather card and the Visa requirement card, which answer where to go and whether you can. Booking is the Flight card, the Train card, the Hotel card, the Room card, the Car hire card, the Tour card and the Booking summary card. Carrying is what goes in the bag or the wallet: the Boarding pass card, the Luggage tag card, the Travel document card, the Loyalty card, the Packing list card and the Currency card. Being there is the Trip summary card, the Itinerary day card, the Map pin card, the Transit card and the Gate change card. Coming back is the Stay review card and the Passport stamp card.

A few conventions hold across the batch. Airport codes and times are the biggest type on any card that has them, in the heading face, tabular and never wrapped, because they are read at arm's length in a queue. A route is always the same shape: departure on the left, arrival on the right, and a line between them carrying a glyph, the duration above and the stops or changes below. Passes have a stub: a dashed tear line with notches cut by a mask, the stub on the right from 480px and underneath below that, as on the Ticket stub card from batch 009. Maps are never pictures of real places; the Map pin card and the Neighbourhood card use the kit's code-only street map at 2:1 and 16:9. Status is a glyph and a word in the good, warn or crit mix: visa free, eVisa needed, visa required; valid or expiring soon; scheduled, live or disrupted. Two cards wear frames from the Ornaments travel and maps batches by default (strap corner on the luggage tag, graticule corner on the map pin), and two wear surfaces (deckle on the passport stamp, pearlescent on the loyalty card).

Which to reach for first: the Flight card or the Train card for search results, the Hotel card for stays, the Booking summary card beside any checkout form, and the Trip summary card as the home of a booked trip. Add the Gate change card when something changes, and the Boarding pass card when it is time to go.

Batch 013: Finance

Batch 013 is money as cards, in five groups. Accounts and movement: the Balance card, the Transaction row card, the Bank card, the Transfer card and the Payout card. Plans and obligations: the Budget envelope card, the Bill due card, the Savings goal card, the Subscription row card, the Loan card and the Credit score card. Holdings: the Holding card, the Portfolio card, the Exchange rate card, the Cashflow card and the Price alert card. Paperwork: the Invoice card, the Expense card, the Receipt scan card, the Tax summary card and the Statement card. People and money: the Split bill card, the Payment request card and the Donation card.

The conventions are the same on every card. Every figure is set in tabular numbers so columns of money line up digit for digit. A debit keeps its leading minus and stays in the ink colour; red is kept for errors, never for spending. A credit carries a plus and takes the green good mix. Charts follow batch 005: one hue per measure, so in is accent and out is muted on the cashflow bars, with a legend whenever there are two. Status is always a glyph and a word (a clock and Pending, a warning and Overdue, a check and Paid), so a list reads correctly in greyscale.

Account numbers are masked to the last four digits in a monospace face, and the Balance card's eye button turns the balance itself to dots for use in public. The Bank card keeps the plastic card ratio of 1.586 to 1 at every width, with a chip, the number in fours and the network mark as two overlapping discs. Its default frame is the Ornaments guilloche border, and the Invoice card wears the banknote rail; both set the radius to zero, and their badges and buttons square up with them.

Reach for the Balance card and the Transaction row card first: together they are an account screen. Add the Bill due card and the Budget envelope card for a home tab, the Portfolio card over a grid of Holding cards for investing, and the Invoice card when the reader is the one being paid.

Batch 014: Messaging and inbox

Batch 014 covers the two ways people write to each other. Mail is slow and filed: the Email row card, the Email thread card, the Compose card, the Contact chip card, the Draft card, the Scheduled send card, the Snooze card and the Inbox zero card. Chat is fast and spoken: the Chat bubble card, the Typing indicator card, the Image message card, the Voice note card, the Reaction bar card, the Conversation row card and the two headers, Group and Direct message. Between them sit the channel cards (the Channel card, the Thread summary card, the Mention card, the Announcement post card and the Notification settings card) and the Call card.

Each side has its own basic unit. Mail is a row: sender, subject and the start of the message on one line, the time at the right, repeated with no border, only a hairline under each. Chat is a bubble: mine on the right in the accent, theirs on the left in the line colour, each with one corner squared off on the side of the speaker so the bubble points at them. The row is for scanning a pile; the bubble is for following a conversation.

Presence and receipts answer the questions asked while waiting. A green dot on an avatar with the word Online says someone is around. Three rising dots say a reply is coming. They move by transform only and stand still under reduced motion. Two checks, then Seen and a small face, say the message was read. In a group, the Read receipt card lists who.

Unread is weight: bold sender, subject and time, regular once read, and the read row is never dimmed. The preview line is one line, clamped, in muted after the subject. The time sits on the right, in tabular figures. Reactions are chips with a glyph and a count, each a real toggle button. Status is a glyph and a word: a clock and Scheduled, a check and Sent, a warning and Unknown address, an arrow and Missed video call.

Reach first for the Email row card or the Conversation row card for the list, the Chat bubble card for the conversation, and the Compose card for writing. Add the Direct message header card or the Group header card above a conversation, and the Inbox zero card for when the list is empty.

Batch 015: Admin tables and lists

Batch 015 is the back office: twenty-four quiet cards for the screens where people manage records, access, limits and jobs. They sit on paper with one sans by design, so the data, not the chrome, carries the page.

The table itself. Table row, Table header, Inline edit row, Expandable row and Group header row share one eight-column grid, so a header laid over a stack of rows lines up cell for cell. Its chrome. The Bulk action bar appears when rows are checked; the Empty filter result, Column picker and Saved view cards handle the moments around the table. Access and roles. Permissions matrix, Role, Team invite and SSO config. Limits and usage. Seat usage, Plan usage, Quota alert and the Admin stat row. Operations. Audit log row, Webhook, Job status, Import, Export and Environment. The danger zone. One fenced card for the actions that cannot be undone.

The conventions repeat across all of them. Rows have no radius and a bottom hairline, so they stack into a table instead of floating as cards. Status is a chip with a glyph and a word (Active, Failing, Paused, Blocked), never a colour alone. Every figure is tabular, and figure columns are right-aligned so digits line up. Row actions appear on hover but exist always: the overflow button stays focusable and shows on touch screens. Destructive buttons are red with a glyph and a word, and each one opens a confirm (pair it with the Confirm dialog card from batch 007). Environments are named as well as coloured: production in red, staging in amber, development in green, the word always printed.

Reach for the Table row card and the Table header card first; most admin screens are those two plus the Bulk action bar. Add the Admin stat row above the table for an overview, the Plan usage card on a billing page, and the Danger zone card at the foot of settings.

Batch 016: Real estate and property

Batch 016 is six cards for buying, renting and selling a home, and the first batch written on the world tokens from the start: every radius, hairline, shadow, duration, button weight and control height is a variable, so a world restyles these cards without a retrofit. They are calm on purpose: generous whitespace, one serif for the price and the address, tabular figures, and the accent spent on one thing per card.

The home. The Listing card is the results-grid card: a 4:3 photo with a save heart, then the price before anything else, the address, the suburb and a row of bed, bath, parking and area glyphs; from 560px it turns media-left for list views. Its plan. The Floor plan card puts the kit's new code-only plan in a media well that takes the surface (graph paper by default, like drafting paper), with a level switch and the rooms on dotted leaders beside it. The viewing. The Open house card is one inspection time with a date block, Register and Add to calendar; registered turns the button into a good chip, and a past time greys out as Held. The people and the money. The Agent card is the seller's face, record and rating; the Mortgage estimate card is the monthly figure, the editable assumptions, a stacked bar of what the payment is made of and a deposit slider. The place. The Neighbourhood stats card is the median price and its change, the commute and four score tiles with bars.

Two kit additions came with the batch. {floorplan} (and {floorplan:16x10}) draws a seeded plan of four to six rooms in palette tones only: a 2px outer wall, lighter inner walls, a door with a swing arc in every partition, accent windows and the wet area hatched, with no text, so the same set always shows the same plan. Eight glyphs joined the icon set on the same 24 grid at 1.75 stroke: bed, bath, area, garage, ruler, walk, school and train. A {features} item's third part now carries the bar when it is a bare 0 to 100 number, so Schools|8.4|84 prints 8.4 and draws an 84 bar.

Reach for the Listing card first, with the Floor plan card as its second row and the Agent card and the Mortgage estimate card in the sidebar of the listing page. Stack Open house cards for a home with several times, and put the Neighbourhood stats card in the location section; for the descriptive travel version of a neighbourhood use the Neighbourhood card from batch 012.

Batch 017: Health and fitness

Batch 017 is ten cards for the body: a workout, last night's sleep, the heart rate, a medication due, the appointment, the meal log, hydration, the step goal, a logged symptom and the prescription to refill. Like batch 016 it is written on the world tokens from the start. Two rules run through it: one number big and tabular per card, and one hue per card for the body metric (good for sleep and steps, crit for the heart, warn for a dose due or a supply running low, accent elsewhere), with no alarm red unless something is wrong. The medical cards are quieter than the fitness cards: no resting shadow, the accent spent only on the well, the bar and the primary button.

Fitness. The Workout card is a finished session: the distance, three stat cells and the splits as eight pill bars, slower kilometres standing taller and the fastest in good; from 600px the splits move beside the stats. The Step goal card is today against the goal with the week beside it; days at or over the goal fill good and stop at a dashed goal line, so a big day reads as met rather than as a taller bar. The Hydration card is a quick-add bento tile with a glass drawn in CSS that fills to the day's share and scales with the tile. The body. The Sleep card is the night as a stage band with its legend, navy by default because it reads as night. The Heart rate card is the live number with a beating heart and an ECG-like trace, the one place crit is a hue rather than a warning. Care. The Medication card is one dose due, with Mark taken toggling the taken state. The Appointment card is the next visit with the doctor's name, a date block and Check in; a past visit greys to Completed with a summary link. The Prescription card is the script and its supply, the bar turning warn under 20% in CSS alone. The Symptom card logs a symptom on a ten-segment severity scale made of real radio inputs, coloured good, warn and crit by band, with the score counted in CSS and the chip following the choice. The Meal log card is one row of a food diary with three macro bars and the day's total.

Two chart kinds joined the kit. {chart:trace} draws an ECG-like sweep from the seed: P, QRS and T shapes about every 90px at a typical width, the live line running to a head dot at 78% and the older trace fading out beyond a small gap; its paths carry data-p (line, old, ring, dot) so a card can recolour them, which is how the Heart rate card paints it in crit. {chart:band} draws a 12px row of segments from Name|percent features, Awake in the line colour and REM, Core and Deep in rising tones of the accent, with 1px gaps and 2px rounded ends. Nine glyphs joined the icon set on the same 24 grid at 1.75 stroke: pill, stethoscope, droplet, footprints, activity, scale, bandage, utensils and run. Workout splits are written km|pace|bar, with a bare 0 to 100 third part, so CSS can draw the pace without parsing it.

Reach for the Step goal, Sleep and Heart rate cards for a health home, with the Hydration card as the small bento cell; stack Medication cards for today's doses and Appointment cards for upcoming visits. For a single number toward a goal without a week or a night behind it, the Progress ring tile and Gauge tile from batch 005 and the Activity rings tile from batch 008 are the general versions.

Batch 018: Marketing and landing

Batch 018 is nine cards that are really page sections: the hero, the pricing comparison, the feature list, a testimonial wall, the FAQ, a logo bar and the newsletter band, plus the two strips that sit above and below everything, the announcement bar and the cookie banner. They are wide or large, and their container queries are the real responsive behaviour of a landing section, so the 640px view is the desktop and 280px is the phone. Like batches 016 and 017 they are written on the world tokens from the start. The taste is optimistic and warm: paper grounds where the palette allows, one accent per card, generous type on the hero and the band, quiet type on the strips, and no fake brand marks; logos are monogram discs.

The top of the page. The Hero card is the headline, the sub, a primary and a secondary button, a proof row of monogram discs with a rating, and a product visual drawn in CSS as a fanned stack of blank cards on an accent glow; under 520px the visual moves above the text and the buttons stack. The Announcement bar card is the 44px strip above the navigation, a New chip, one truncating line, a link and a dismiss button, on an accent tint that reads as a glow on navy and a tint on paper. The Logo bar card is the strip under the hero: eight monograms on a slow marquee with faded edges, paused on hover, and under reduced motion the copy hides and the row wraps. The middle. The Feature list card is six capabilities on a grid whose hairlines are the grid gap, one, two and three columns. The Pricing comparison card is three tiers with a real billing switch that rewrites every price with :has(), the featured tier first when they stack. The Testimonial wall card is five voices in CSS columns, a masonry with no script. The FAQ card is six questions with the first opening in place. The end and the edge. The Newsletter band card is one field joined to one button, an error state in crit and a subscribed state that swaps the form for a good chip. The Cookie banner card is honest consent: Reject and Accept the same size and weight, and Manage preferences opening three real switches in place, Necessary checked and disabled.

The kit grew nine content sets (hero, pricing, featurelist, testimonials, faqs, logobar, signup, announcebar and cookieprefs, the last named so because consent is the batch 010 form set) and two glyphs on the same 24 grid at 1.75 stroke: sparkle, a four-point star, and cookie, a disc with a bite and three crumbs. A {features} item with more than three parts now writes every part as its own span, which is how a pricing tier carries Name|monthly|yearly|tagline|note and its feature lines; items of one to three parts behave as before. The pricing footnote and the sign-up error message ride in the {quote} slot, the way the field set from batch 010 carries its error.

Stack them in page order: Announcement bar, Hero, Logo bar, Feature list, Testimonial wall, Pricing comparison, FAQ, Newsletter band, with the Cookie banner floating over the bottom. For the single versions inside a layout of your own, use the Pricing card and Testimonial card from batch 001, the Feature tile, Quote tile, Logo wall tile and Headline tile from batch 008, and the Accordion, Newsletter and Announcement cards from batch 006.

Batch 019: Events and tickets

Batch 019 is seven cards that follow one event from announcement to afterwards: the programme, the lineup, the venue, the tickets, the invitation, the countdown and the recap. Every content set describes the same invented day, Shapes 2026, a design conference on Saturday 14 November at The Linden Hall in Sydney, so the seven cards read as one event page when they are laid together on the wall. Like batches 016 to 018 they are written on the world tokens from the start. The taste is festival warmth without noise: the event's accent runs through every card, type is generous on the countdown and the lineup and tabular on the schedule and the tiers, and there are no fake photographs; speakers are initials discs and the venue is the kit's code-only map with pins drawn in CSS.

Before the day. The Schedule block card is the programme of one day on a time rail, each session with a 3px track bar coloured from its track, the doors, breaks and lunch set back as quiet rows, and the two parallel sessions at 10:15 and 12:00 side by side from 560px and stacked under a shared time below it. The Speaker lineup card is six faces and their sessions on a bright poster ground, one, two and three columns, the discs a pale tone of the accent with the letters in a darkened accent so they read on sky blue, paper and night alike. The Venue map card is the map with the entrance pin pulsing and parking and the station marked, the address, the doors time and each way of arriving, with the map moving to the left at 600px. Saying yes. The Ticket tiers card is the checkout step: four tiers with availability, a stepper per tier, perforated dividers and a running total; each row is a real radio, so the whole row picks the tier, the sold-out row is struck through with its steppers disabled, and the disabled state reads as a closed sale. The RSVP card is the invitation and its answer, three real radios in a segmented control, and choosing Going opens a confirmation line. The week before and the morning after. The Countdown card is the days, hours, minutes and seconds in accent wells with the event and an Add to calendar button; only the seconds blink, the card itself is static. The Recap card is the thank-you: four numbers, the highlights as play chips, a photo strip and the recordings and survey buttons.

The kit grew seven content sets (schedule, lineup, venuemap, tiertickets, rsvp, eventcountdown and recap, the countdown named so because launch is the batch 005 countdown set) and one glyph on the same 24 grid at 1.75 stroke: ticket, a stub notched on both sides with a dashed tear line. A {features} item with more than three parts now also carries data-p4, its fourth part slugged, since CSS cannot read the text of a span: the schedule's time|session|room|track items colour their bar from data-p4="main", "studio" or "both", and the ticket tiers carry their quantity the same way. Parallel sessions are written main first and studio second, so a studio item that follows a main item shares its row. Repeated {img:1x1} slots in one template are seeded one after another, which is how the recap's four thumbnails differ.

Lay them in the order a ticket holder meets them: Countdown, Venue map and Schedule block at the top of the event page, the Speaker lineup under them, Ticket tiers (or the RSVP card for a free event) in the sidebar, and the Recap card replacing the Countdown once it is over. For the general versions use the Event card from batch 001, the Calendar event card from batch 007, the Speaker card from batch 004, the Map card from batch 003, the Ticket stub card from batch 009 and the Countdown tile from batch 005.