X Mobile — design system & UI screens
This is a payment and earnings dashboard for creators, influencers, or affiliates who earn revenue through referrals or content monetization. The screen uses a dark theme with bright cyan/neon green accents, featuring a prominent celebration of a recent payment ($420.69 deposited), followed by earnings summaries broken into "since last payout" ($1,424.45) and "all time" ($16,681.09) sections, with a payout threshold indicator at the bottom.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/x-mobile.
Decoded design system
X Mobile's decoded design system: background #000000, text #BFBFBF, accent #1572B1, link #1572B1, primary #1572B1; type scale h1 34px / h2 22px / body 17px; 4px spacing base; 12px base radius. The single interactive/action color is #1572B1 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #000000 |
| surface | #0B0B0B |
| border | #1C1C1C |
| text | #BFBFBF |
| text_muted | #767676 |
| primary | #1572B1 |
| accent | #1572B1 |
| link | #1572B1 |
| button_bg | #1572B1 |
| button_text | #000000 |
Using these colors
- Action color
#1572B1— the single interactive color; only on things you click or must notice, never large fills. primary,accent,link,button_bgare all#1572B1— one role, not several (the action color).- accent
#1572B1— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed.
Typography
- h1: 34px
- h2: 22px
- body: 17px
Spacing
- base unit: 4px
- scale: 4px, 6px, 8px, 12px, 16px, 20px, 24px
Radii
- base: 12px
- button: 12px
Shadows (elevation)
- card:
rgba(101, 119, 134, 0.2) 0px 0px 7px 0px, rgba(101, 119, 134, 0.15) 0px 1px 3px 1px
Motion
Micro-interactions run at 150ms (dominant) with ease.
- durations: 150ms · 200ms · 218ms
- easings:
ease·ease-out - animated properties: background-color, transform, box-shadow, border-color
Button states (measured)
- primary hover: background
#D7DBDC - primary focus: box-shadow
rgb(247, 249, 250) 0px 0px 0px 2px· background#D7DBDC
Layout (measured)
- container max-width:
1280px - nav: 52px relative
- common grid: 2 columns
Motion choreography (measured)
Load order: div.css-175oi2r → div.css-175oi2r → div.jf-element → div.jf-element → span.jf-element → span.jf-element
Themes
dark counterpart: background #000000, text #FFFFFF.
Responsive (measured)
- breakpoints: 768px
- mobile (390px): hero 20px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →