Rank#010:22
BB
Bardhyl Bytyqi
@BardhylBytyqiWeb
Likes:2.4K
Design system · v1.0
The parts ViralPost is made of.
Every color, size and component on this page is the same code the product runs on. Change a token once and the feed, the admin and this page change with it. Switch the theme in the footer to see both modes.
- Typefaces
- 3
- Accent
- 1
- Themes
- 2
01
Brand
One post, popping out of the grid. The mark is a solid tile with a quarter circle taken from its corner, and the signal dot sitting in the bite.
Primary lockup on ink
ViralPost
Use the lockup in the header, on the site and in every email. The dot is always signal orange.
Mark on paper
Mark on signal
Construction32 unit grid
WordmarkPoppins Medium
MotionHover the mark
ViralPost
02
Color
Ink, paper and one signal. Every color is a token with a light and a dark value, so switching the theme changes everything at once. Click a swatch to copy its variable.
Surfaces
Ink and lines
Signal
Feedback
Heat scale
--heat-1
--heat-2
--heat-3
--heat-4
--heat-5
From a cold ember to the full signal. Drives the time wheel, the charts and every measure of how hot something is.
03
Typography
Three voices. Poppins Medium for big headlines and Poppins Regular for small headings. Geist for everything you read. Geist Mono for numbers, ranks and time.
AaPoppinsHeadings
AaGeistText and interface
01Geist MonoData and labels
Display 2XL
Broke the timeline
Display XL
Design that broke the timeline
Display LG
What went viral this week
Display MD
You have seen the top 8
Display SM
More like this
Body LG
Hand-picked posts from X that crossed 1,000 likes.
Body
The videos, shots and breakdowns designers could not stop sharing.
Small
Ranked and tracked by day, week and month.
Eyebrow
Live index · Updated Nov 8
Data
#01 · 23,668 likes · W26
04
Shape, depth and motion
Soft corners that grow with the size of the surface, three levels of depth, and motion that starts fast and settles slowly.
RadiusDerived from --radius: 0.75rem
sm
md
lg
xl
2xl
3xl
full
Elevation
Hairline
Raised
Floating
Glow
EasingClick to play
IconsLucide, 16 / 20 / 24
16px
20px
24px
06
Badges, chips and keys
Small labels that carry status, format and rank. Ranks and data are always set in mono.
Badges
DefaultSecondaryOutlineBrandSolidLiveDraftFailedPro
On media
Rank#01Rank#120:244Glass
Category chips
AllMotion6UI53D6
Keyboard
⌘K/←→esc
07
Inputs and forms
Fields share one surface: a soft well that lifts on hover and glows with the focus ring. Labels sit above, help text below, errors replace help text.
Text inputDefault, invalid, disabled
Input groupIcons, text and buttons inside
Textarea and tags
#motion#css
SelectGrouped, with separators
Choice controls
SliderValue 40
A complete formField, label, description, error and choice cards
08
Dropdowns and menus
One frosted surface for every menu, select and picker. Long lists are searchable and load page by page while you scroll, with the loading, empty and end states all designed.
Searchable, paged dropdownEvery timezone, 15 per page, with simulated latency
Scroll to the bottom of the list to load the next page. Type to search on the server.
Paged dropdown with live dataDesigners on ViralPost, 5 per page
The same component filters the feed for Pro members.
MenuGroups, checks, radios, a submenu and shortcuts
Account menuAs in the header
09
Modals, popovers and tooltips
Everything that floats sits on the same scrim and the same surface, enters from where it was triggered and leaves faster than it arrived. Focus is trapped and returned for you.
DialogFor a focused task
SheetSide panels for editing in context
PopoverRich content on click
Tooltip and hover cardShort labels on hover, previews on dwell
ToastsFeedback that does not block
11
Tables, filters and sorting
A controlled table: the page owns search, filters, sorting, selection and paging, the table renders every state the same way. Real posts, filtered in your browser here, on the server in the admin.
| Category | ||||
|---|---|---|---|---|
 Benji Taylor | UI | 14.4K | Oct 31 | |
 Meng To | 3D | 9.2K | Aug 21 | |
 shadcn | UI | 6.6K | Jun 26 | |
 Bardhyl Bytyqi | Web | 2.4K | Nov 6 | |
 van Schneider | Product | 2.1K | Oct 16 |
12
Loading, empty and error states
Every wait, every blank and every failure is designed. Skeletons mirror the layout they stand in for, empty states always offer a next step, errors say what to do.
Progress and spinners
SkeletonShaped like the post card
Inline messages
Payments are not switched on yetPro requests join the list until Stripe keys are added.
All posts are in sync with XNumbers refreshed 2 hours ago.
Under the 1,000 like barYou can still add it as a draft.
X did not answerTry again in a minute.
Empty state
Nothing went viral here yet
No post in this period crossed 1,000 likes. Try a wider time range.
13
Product components
The pieces that make ViralPost itself, built only from the tokens and primitives above. Hover a card to play its video, spin the wheel.
Post cardVideo, hover to play
Post cardImage
Rank#02Image
AO
Arthur Objartel
@arthur_objartelUI
Likes:1.2K
Locked cardPast the free limit
Likes:1.2KUI
Time wheelVertical, beside the feed
All time
24posts
83% videoTop 23.7K
Time wheelHorizontal, on smaller screens
All time
24posts
83% videoTop 23.7K
Both wheels share one state here, just like on the feed: pick a period on one and the other follows.
TickerLatest viral posts, pauses on hover
PricingThe paywall variant
on a yearly subscription
Free
A daily look at the top of the chart.
$0foreverno card needed
- The top 8 posts in every view
- Day, week and month time wheel
- Full post details and video
- Category and format filters
- Every ranked post and the archive (not included)
- The daily digest in your inbox (not included)
- Designer filter and full search (not included)
Pro
RecommendedFor individual designers and freelancers.
$10per monthbilled yearly
- Every viral post, ranked
- The full archive
- The digest at 8:00 your time
- Daily or weekly delivery
- Designer filter
- Unlimited search
- Early access to new formats
DigestThe morning email in miniature
viralpostToday, 08:00
Daily digest
3 design posts went viral today
#01 · WebBardhyl Bytyqi2.4K likes#02 · UIBenji Taylor14.4K likes
#03 · UIArthur Objartel1.2K likes14
Roles and access
Two separate ideas: a role says what you can manage, a plan says what you can see. The rules live in one file, so the interface and the server always agree.
VisitorsBrowse the top 8 posts of any view, open every post, use the wheel and the filters. Search returns the top 5 results.
Free membersEverything visitors get, plus an account to manage and the option to upgrade in one step.
Pro membersEvery ranked post, the archive, the designer filter, unlimited search and the digest at 8:00 in their timezone.
Editors and adminsSee everything, plus the admin area. Admins also manage people, plans and the digest.
| Permission | Admin | Editor | Member |
|---|---|---|---|
| See every ranked post and the archive | |||
| Open the admin area | |||
| Add, edit, sync and remove posts | |||
| Create and edit categories | |||
| Manage people, roles and plans | |||
| Preview, test and send the digest |
15
Principles
The few rules behind every decision above. When something new needs designing, start here.
01The work is the interfaceMedia leads, chrome recedes. Nothing competes with the post.
02One signalOrange means live, hot or worth paying for. Used anywhere else, it stops meaning anything.
03Numbers in monoRanks, likes and dates are data. They get a data face and line up.
04Every state designedLoading, empty, error, locked and selected are part of the design, not afterthoughts.