1. Design Tokens & Visual Foundation
Centralized semantic CSS variables powered by OKLCH colors for optimal contrast and warmth across light and dark modes.
Core Brand & Base
Aa
Primary (Coral/Red)var(--primary)Aa
Secondaryvar(--secondary)Aa
Backgroundvar(--background)Aa
Cardvar(--card)Aa
Mutedvar(--muted)Aa
Accentvar(--accent)Aa
Destructivevar(--destructive)Semantic Status Tokens
Aa
Successvar(--success)Aa
Warningvar(--warning)Aa
Informationvar(--info)Aa
Destructive / Errorvar(--destructive)99x Deal & Creator Semantics
Aa
Deal Discount Highlightvar(--deal-discount)Aa
Deal Active Offervar(--deal-active)Aa
Deal Expired / Inactivevar(--deal-expired)Aa
Verified Creator / Merchantvar(--verified)Typography Scale & Hierarchy
Editorial type scale tailored for high-legibility social reading, note cards, and deal metadata.
Display2rem (32px) • Bold 700
Discover Authentic Notes & Deals
Page Title1.5rem (24px) • SemiBold 600
Espresso Gear Dial-in Guide
Section Heading1.125rem (18px) • SemiBold 600
Trending In Your City
Card Heading0.9375rem (15px) • SemiBold 600
Baratza Encore Conical Burr Grinder
Body0.875rem (14px) • Regular 400
I spent weeks comparing machines before making my first purchase. Temperature stability matters most.
Small Body0.8125rem (13px) • Regular 400
Exclusive creator profile discount code for 99x community members.
Caption / Metadata0.6875rem (11px) • Medium 500
Published 3 hours ago • Verified Creator • 14.2k views
Corner Radii Tokens
Small (sm)0.375rem
Medium (md)0.5rem
Card (lg)0.625rem
Dialog (xl)0.875rem
Profile (2xl)1.125rem
Pill (full)9999px
Motion & Transitions
Interactive Hover150ms cubic-bezier(0.16, 1, 0.3, 1)
Dialog & Drawer Entrance200ms ease-out
Heart / Like Micro-interactionScale 1.25 on active, 150ms spring
Accessibility Supportprefers-reduced-motion respected
2. Core UI Primitives & Badges
Production-tested accessible primitives powered by Base UI and class-variance-authority.
Buttons & Interactive Controls
Variants, sizes, loading states, accessible icon buttons, and button groups.
Variants
Sizes
Specialized Button Behaviors
Badges, Statuses & Indicators
Semantic badges, deal discount indicators, verified badges, live indicators, and RedNote-style hashtags.
Semantic Badge Variants
PrimarySecondarySuccessWarningInfoDestructiveOutline24% OFFVerified CreatorExpired
Status Badges (Notes & Deals)
ActivePublishedExpiredDraftPendingRejectedArchived
Deal & Identity Badges
24% OFFFREE50% OFF
Verified:
Counters:7991.4kNEW
Live Flash SaleOnline
Hashtag Badges (Interactive Content Tagging)
Avatars, Creators & Identity Compositions
User representation across cards, headers, follow graph buttons, and multi-avatar stacks.
AC
Alex Chen
@alexchenSpecialty coffee reviewer, gear dial-in tips, and exclusive community discounts.
Inline Compact Creator:
ACAlex Chen@alexchen
Community Avatar Stack:
JDSKAC
3. Form Controls & Note Composer
Accessible form inputs, search fields, validation states, character counters, and the full note creation experience.
Inputs & Search Fields
Text inputs, search inputs with keyboard shortcuts, and character limits.
Must be a valid currency number
61/120
Interactive Note Composer
Product ComponentCreate Social Note
Tip: You can attach a profile deal below132/800
#coffee#homebarista
Reference a Profile Deal
4. Overlays, Dialogs & Menus
Accessible modals, destructive alert dialogs, responsive sheets, popovers, tooltips, and Base UI-compliant dropdown menus.
Dialogs & Alert Dialogs
Modal interactions for confirmations, destructive deletions, reporting, and auth gates.
Side Sheets & Drawers
Mobile bottom drawers and desktop sliding panels for comments, filters, and details.
Dropdown Menus (Base UI Structure)
Follows mandatory @base-ui/react structure: labels must be grouped in DropdownMenuGroup.
Popovers & Tooltips
Contextual guidance, helper explanations, and interactive popover previews.
5. Feedback, Alerts & States
Inline alerts, interactive toast notifications, empty states, error fallbacks with retry, and loading skeletons.
Inline Alert Notifications
Inline notices for success, information, warnings, and system errors.
Deal Verified
This discount link has been verified directly with the merchant partner.
Profile Deal Notice
This deal is maintained exclusively on the creator's profile and is not broadcast to the public discovery feed.
Expiring Soon
This limited-quantity coffee gear promotion will expire at midnight tonight.
Connection Error
Failed to sync offline draft notes. Please verify your internet connection.
Toast Notifications (Base UI Toaster)
Dispatches non-blocking notifications for common user and social interactions.
No Profile Deals Yet
This creator has not listed any exclusive deals or offers on their profile.
Could not load feed
We encountered an unexpected timeout connecting to the feed discovery service.
Error: ERR_FEED_TIMEOUTRef: req-99x-coffee-404
Loading Skeletons
Smooth pulse loading skeletons matching the actual note card layout.
7. Deal Components & Availability States
Distinguishing between public feed deal publication and creator profile-only deal availability.
Product Distinction: Feed Publication vs. Profile Deal Availability
In 99x, a deal can exist on a creator's profile without ever appearing as a feed post. A creator can maintain ongoing deals, perks, and partner codes in their profile Deals tab. Feed notes may independently reference profile deals without altering the deal's standalone profile availability.
Compact Deal Previews (Inside Notes)
Visually integrated preview embedded inside social notes without overpowering the text content.
Active Deal Preview
Baratza Encore Conical Burr Coffee Grinder
Coffee Specialty Depot
$129$169
24% OFFProfile-Only Deal Preview (Referenced by Note)
Fellow Ode Brew Grinder Gen 2 (Matte Black)
Fellow Drops•Profile offer
$289$345
16% OFFExpired Deal Preview (Historical Preservation)
AeroPress XL Coffee Maker Complete Kit
Roast & Grind Club
$59$79
ExpiredRemoved / Unavailable Deal State
The associated deal referenced in this note is no longer available on the creator's profile.
Standalone Deal Card Variations
24% OFFFeed Listed
Baratza Encore Conical Burr Coffee Grinder
The gold standard entry-level burr grinder with 40 individual grind settings for drip and espresso.
$129$169Save 24%
Coffee Specialty Depot
Valid until Nov 30
ACAlex Chen@alexchen
16% OFFProfile Only
Fellow Ode Brew Grinder Gen 2 (Matte Black)
Exclusive creator profile discount code for 99x followers. Direct checkout discount.
$289$345Save 16%
Fellow Drops
Exclusive Profile Perk
ACAlex Chen@alexchen
24% OFFFeed ListedFeatured
Baratza Encore Conical Burr Coffee Grinder
The gold standard entry-level burr grinder with 40 individual grind settings for drip and espresso.
$129$169Save 24%
Coffee Specialty Depot
Valid until Nov 30
ACAlex Chen@alexchen
ExpiredFeed Listed
AeroPress XL Coffee Maker Complete Kit
Double capacity AeroPress brewer with 20oz carafe and 100 microfilters.
$59$79
Roast & Grind Club
Expired yesterday
ACAlex Chen@alexchen
DraftFeed Listed
Hario V60 Ceramic Pour Over Kit with Server
Upcoming flash sale arrangement with Hario official retail.
$32$48Save 33%
Hario Official
Draft - Unpublished
ACAlex Chen@alexchen
8. Text Notes & Deal Attachment Compositions
Realistic RedNote-inspired social notes demonstrating editorial typography, deal attachments, and lifecycle states.
A. Pure Text-Only NoteNo Deals Attached
AC
Alex Chen
@alexchen•
Three things I wish I knew before buying my first espresso machine
I spent weeks comparing espresso machines before making my first purchase. These are the three things that actually made a difference for me:
1. Consistent temperature matters more than flashy features.
2. A good grinder can make a bigger difference than upgrading the machine.
3. Always calculate the ongoing cost of b...
3,420 views
B. Note with Tagged DealActive Deal Attached
AC
Alex Chen
@alexchen•
Finally found a good deal on this coffee grinder
I have been looking for a reliable entry-level grinder and found this offer worth sharing.
The discount is available through the creator's deal listing. Check the attached card below for pricing and store details.
Baratza Encore Conical Burr Coffee Grinder
Coffee Specialty Depot
$129$169
24% OFF5,890 views
C. Note Referencing Profile-Only DealProfile Offer Reference
AC
Alex Chen
@alexchen•
Fellow Ode Gen 2 review after 3 months of daily pourovers
The new Gen 2 burrs completely eliminated the fines issue from Gen 1. Retention is down to 0.1g with an RDT spritz.
If anyone is planning to upgrade, remember there's an exclusive discount on my profile Deals tab that Fellow gave our community.
Fellow Ode Brew Grinder Gen 2 (Matte Black)
Fellow Drops•Profile offer
$289$345
16% OFF2,810 views
D. Note with Expired DealDeal Expired State
AC
Alex Chen
@alexchen•
AeroPress XL brew guide and inverted method results
Tried the XL size for brewing batch filter coffee for two people. It handles 500ml easily without compromising extraction speed.
Note: The promotional discount code referenced previously has now expired, but the brew recipe remains valid!
AeroPress XL Coffee Maker Complete Kit
Roast & Grind Club
$59$79
Expired1,940 views
E. Note with Removed DealUnavailable State
AC
Alex Chen
@alexchen•
Compact travel hand grinder comparison
Tested 4 travel grinders during my recent trip. Dual bearings make a massive difference in grind consistency when grinding light roasts by hand.
The associated deal referenced in this note is no longer available on the creator's profile.
1,120 views
F. Fresh Note (Zero Engagement)Initial State
AC
Alex Chen
@alexchen•
Fresh Ethiopian Yirgacheffe washed lot arrived today
Tasting notes: jasmine, bergamot, peach iced tea. High elevation processing at its finest.
0 views
9. Creator Profile & Profile Deals Tab
Complete profile surface with Notes, Deals, and Saved tabs. Shows profile-only deals independent of feed publication.
Perspective:
AC
Alex Chen
@alexchen
Specialty coffee enthusiast, home barista & tech reviewer. Documenting daily gear finds, dial-in recipes, and exclusive community discounts.
28Notes
5Deals
14,200Followers
382Following
AC
Alex Chen
@alexchen•
Three things I wish I knew before buying my first espresso machine
I spent weeks comparing espresso machines before making my first purchase. These are the three things that actually made a difference for me:
1. Consistent temperature matters more than flashy features.
2. A good grinder can make a bigger difference than upgrading the machine.
3. Always calculate the ongoing cost of b...
3,420 views
AC
Alex Chen
@alexchen•
Finally found a good deal on this coffee grinder
I have been looking for a reliable entry-level grinder and found this offer worth sharing.
The discount is available through the creator's deal listing. Check the attached card below for pricing and store details.
Baratza Encore Conical Burr Coffee Grinder
Coffee Specialty Depot
$129$169
24% OFF5,890 views
AC
Alex Chen
@alexchen•
Fellow Ode Gen 2 review after 3 months of daily pourovers
The new Gen 2 burrs completely eliminated the fines issue from Gen 1. Retention is down to 0.1g with an RDT spritz.
If anyone is planning to upgrade, remember there's an exclusive discount on my profile Deals tab that Fellow gave our community.
Fellow Ode Brew Grinder Gen 2 (Matte Black)
Fellow Drops•Profile offer
$289$345
16% OFF2,810 views
AC
Alex Chen
@alexchen•
AeroPress XL brew guide and inverted method results
Tried the XL size for brewing batch filter coffee for two people. It handles 500ml easily without compromising extraction speed.
Note: The promotional discount code referenced previously has now expired, but the brew recipe remains valid!
AeroPress XL Coffee Maker Complete Kit
Roast & Grind Club
$59$79
Expired1,940 views
10. Discovery Feed Composition
Primary community feed stream with tag filtering, mixed notes, deal previews, and responsive layout.
AC
Alex Chen
@alexchen•
Three things I wish I knew before buying my first espresso machine
I spent weeks comparing espresso machines before making my first purchase. These are the three things that actually made a difference for me:
1. Consistent temperature matters more than flashy features.
2. A good grinder can make a bigger difference than upgrading the machine.
3. Always calculate the ongoing cost of b...
3,420 views
AC
Alex Chen
@alexchen•
Finally found a good deal on this coffee grinder
I have been looking for a reliable entry-level grinder and found this offer worth sharing.
The discount is available through the creator's deal listing. Check the attached card below for pricing and store details.
Baratza Encore Conical Burr Coffee Grinder
Coffee Specialty Depot
$129$169
24% OFF5,890 views
AC
Alex Chen
@alexchen•
Fellow Ode Gen 2 review after 3 months of daily pourovers
The new Gen 2 burrs completely eliminated the fines issue from Gen 1. Retention is down to 0.1g with an RDT spritz.
If anyone is planning to upgrade, remember there's an exclusive discount on my profile Deals tab that Fellow gave our community.
Fellow Ode Brew Grinder Gen 2 (Matte Black)
Fellow Drops•Profile offer
$289$345
16% OFF2,810 views
AC
Alex Chen
@alexchen•
AeroPress XL brew guide and inverted method results
Tried the XL size for brewing batch filter coffee for two people. It handles 500ml easily without compromising extraction speed.
Note: The promotional discount code referenced previously has now expired, but the brew recipe remains valid!
AeroPress XL Coffee Maker Complete Kit
Roast & Grind Club
$59$79
Expired1,940 views
AC
Alex Chen
@alexchen•
Compact travel hand grinder comparison
Tested 4 travel grinders during my recent trip. Dual bearings make a massive difference in grind consistency when grinding light roasts by hand.
The associated deal referenced in this note is no longer available on the creator's profile.
1,120 views
AC
Alex Chen
@alexchen•
Fresh Ethiopian Yirgacheffe washed lot arrived today
Tasting notes: jasmine, bergamot, peach iced tea. High elevation processing at its finest.
0 views
6. Social Interactions & Sharing
Stateful social feedback buttons with micro-interactions, counts formatting, and cross-platform share dialogs.