This is the clearest explanation of design tokens I have read. The color example finally made it click for me.
ULTRAKIT · WIDGET #81
Real WordPress comments and the real comment form, designed ten ways: cards, chat bubbles, collapsible threads, a social feed, forum posts, a guestbook wall, product Q&A and more. Author and team badges, the people in the conversation, oldest/newest switch, “read more” and a form with floating labels.
Sample comments from fictional people. The last section on this page is a real, working comment box.
BLOG ARTICLE · CARDS
Clean cards under an article, with the author’s own replies outlined in a gradient and marked with a badge. Long comments fold after a few lines with a “Read more” link.
layout: cardsauthor badgeread morefloating labels
5 Comments
MA
D
L
4 people in the conversation
ADL4 people in the conversationMaya Collins Aiko Tanaka Thank you, Maya! A follow-up on spacing tokens is coming next week.
Maya Collins Perfect, I will look out for it.
Daniel Okafor We moved our whole product to tokens last year. Two tips from that project:
1. Name tokens by purpose, not by color. "text-muted" survives a rebrand, "grey-500" does not.
2. Keep a changelog. Designers and developers both need to know when a value changes, otherwise small differences creep back in within a month.The hardest part was not the tooling, it was agreeing on names. Budget time for that conversation.
Leo Martins Bookmarked. Would love a version of this for dark mode.
Leave a reply
COMMUNITY · THREAD LINES
Reply lines connect each answer to the comment above, like a forum thread. Any branch can be folded to “Show 3 replies”. The form starts as a small bar and opens when someone wants to write.
layout: threadfold repliesteam badgefolded form
6 Comments
K
DAL4 people in the conversation
DAL4 people in the conversationKofi Mensah How do you all handle on-call handovers? Ours happen in a chat channel and things keep falling through the cracks.
Daniel OkaforTeam We keep a short handover doc per week: open incidents, anything flaky, and one sentence on what to watch. Takes ten minutes to write.
Kofi Mensah Do you read it together or async?
Daniel OkaforTeam Async, plus a five-minute call on Mondays. The call is where the real questions come up.
Aiko Tanaka Same here. A template helps more than anything, people fill in boxes they would never write from scratch.
Leo Martins Adding to this: rotate the person who writes it, not just who is on call.
Your reply
PRODUCT PAGE · QUESTIONS & ANSWERS
Top-level comments become questions, replies become answers, and answers from the shop are ticked and highlighted. The form sits on top as “Ask a question”.
layout: qaform on topanswers ticked
5 questions & answers
N
P
KS
4 people in the conversation
PKS4 people in the conversationAsk a question
Nora Lind Does the battery last a full working day with noise cancelling switched on?
Paige Shaw Yes. In our tests it lasts about 30 hours with noise cancelling on, so roughly four working days between charges.
Kofi Mensah Can confirm, I charge mine once a week.
Sam Rivera Will they connect to a laptop and a phone at the same time?
Paige Shaw They will. You can pair up to two devices at once and switch by pressing the side button twice.
WEDDING SITE · GUESTBOOK WALL
Comments pinned to a wall like notes, each slightly tilted, with a big quote mark. Perfect for guestbooks, testimonials and farewell pages.
layout: wallpill fieldsgradient form box
6 messages from our guests
MLNSP6 people in the conversation
LNSP6 people in the conversationMaya Collins What a beautiful day. Thank you for letting us be part of it, and for the best dance floor we have ever seen!
Leo Martins Congratulations to you both. The speeches had half the room in tears.
Nora Lind Sending so much love. The garden was magical at sunset.
Sam Rivera Best wedding cake in history. I have questions about the recipe.
Paige Shaw Here is to many happy years. See you at the first anniversary!
Kofi Mensah Thank you for a wonderful weekend, and congratulations!
Sign the guestbook
HELP CENTER · TIMELINE
Each comment hangs off a colored line, and team members get a “Team” badge automatically. Shown here on the dark skin.
layout: timelineskin: darkunderline fields
5 Comments
SPN3 people in the conversation
PN3 people in the conversationSam Rivera I cannot find where to change my billing email. Is it under Account or Billing?
Paige ShawTeam It is under Billing → Invoices → Edit details. Changes apply from the next invoice.
Sam Rivera Found it, thank you!
Nora Lind Is there a way to export all my invoices at once?
Paige ShawTeam Yes: Billing → Invoices, then choose Export all. You will get a zip file by email.
Still stuck? Ask here
Social feed · layout: social
6 comments
Kofi Mensah How do you all handle on-call handovers? Ours happen in a chat channel and things keep falling through the cracks.
Daniel OkaforTeam We keep a short handover doc per week: open incidents, anything flaky, and one sentence on what to watch. Takes ten minutes to write.
Kofi Mensah Do you read it together or async?
Daniel OkaforTeam Async, plus a five-minute call on Mondays. The call is where the real questions come up.
Aiko Tanaka Same here. A template helps more than anything, people fill in boxes they would never write from scratch.
Leo Martins Adding to this: rotate the person who writes it, not just who is on call.
Leave a reply
Compact, for sidebars · layout: compact
5 comments
SPN3 people in the conversation
PN3 people in the conversationSam Rivera I cannot find where to change my billing email. Is it under Account or Billing?
Paige ShawTeam It is under Billing → Invoices → Edit details. Changes apply from the next invoice.
Sam Rivera Found it, thank you!
Nora Lind Is there a way to export all my invoices at once?
Paige ShawTeam Yes: Billing → Invoices, then choose Export all. You will get a zip file by email.
DISCUSSION BOARD · FORUM POSTS
A shaded column for the person, a numbered post on the right. Replies stack underneath, the way message boards have always worked.
layout: forumpost numberssquircle avatars
6 Comments
KDAL4 people in the conversation
DAL4 people in the conversationKofi Mensah How do you all handle on-call handovers? Ours happen in a chat channel and things keep falling through the cracks.
Daniel OkaforTeam We keep a short handover doc per week: open incidents, anything flaky, and one sentence on what to watch. Takes ten minutes to write.
Aiko Tanaka Same here. A template helps more than anything, people fill in boxes they would never write from scratch.
Leo Martins Adding to this: rotate the person who writes it, not just who is on call.
Post a reply
MAGAZINE · MINIMAL
Hairline dividers, no boxes and an underlined form. For publications where the writing should do the talking.
layout: minimalno avatarsoutline button
5 Comments
Maya Collins This is the clearest explanation of design tokens I have read. The color example finally made it click for me.
Daniel Okafor We moved our whole product to tokens last year. Two tips from that project:
1. Name tokens by purpose, not by color. "text-muted" survives a rebrand, "grey-500" does not.
2. Keep a changelog. Designers and developers both need to know when a value changes, otherwise small differences creep back in within a month.The hardest part was not the tooling, it was agreeing on names. Budget time for that conversation.
Leo Martins Bookmarked. Would love a version of this for dark mode.
Leave a reply
LIVE ON THIS PAGE
This one is not a sample. It shows the real comments on this page and uses the real WordPress comment form, so what you post here is saved (after approval).
real commentsWordPress formmoderation
201 premium elements, Post Comments included.
5 replies
This is the clearest explanation of design tokens I have read. The color example finally made it click for me.
Thank you, Maya! A follow-up on spacing tokens is coming next week.
Perfect, I will look out for it.
We moved our whole product to tokens last year. Two tips from that project:
1. Name tokens by purpose, not by color. "text-muted" survives a rebrand, "grey-500" does not.
2. Keep a changelog. Designers and developers both need to know when a value changes, otherwise small differences creep back in within a month.
The hardest part was not the tooling, it was agreeing on names. Budget time for that conversation.
Bookmarked. Would love a version of this for dark mode.