MEET — Design Book
Newspaper / Editorial Variant · Edition I · February 2026
Color Palette
A restrained palette drawn from ink, paper, and editorial red. Status colors are desaturated to maintain the calm, grown-up tone.
Core Palette
#1A1A1APrimary text, headlines, strong borders
#FAF7F2Paper / cream background
#C0392BRed accent, CTAs, active states
#D5D0C4Dividers, thin borders, subtle lines
#8B8680Secondary text, labels, metadata
Extended — Map Surfaces
#F0ECE3Map background surface
#E2DDD2Map building blocks
#e0dbd0Map grid overlay
Semantic — Status
#5B7A5Etext#EEF2EEbgAccepted / confirmed
#B8863Etext#F5F0E6bgPending / awaiting
#9B3B3Btext#F2EEEEbgDeclined / error
Typography
Two typefaces: Instrument Serif for display and names, DM Sans for everything else. All specimens shown with Polish text matching the app.
Instrument Serif
Display · Headings · Names8 osób w pobliżu
Osoby w Twojej okolicy
Maja, 25
Szukam kogoś do wspólnych rozmów
DM Sans
Body · Labels · Buttons · UILubię długie spacery z psem po parku i kawę speciality w kameralnych miejscach.
Cześć! Też masz psa? Może kiedyś wybierzemy się na wspólny spacer?
WYD. PORANNE · 5 LUT 2026 · TWOJA OKOLICA
ZAAKCEPTUJ · ODRZUĆ · WYLOGUJ
§ pies § kręgle § bieganie § kawa
W OKOLICY · ZACZEPIENIA · CZATY · PROFIL
Iconography
Editorial stroke icons replacing emoji. Each shown at 16, 24, and 32px. Stroke weight 2px, round caps and joins.
wavepinchatpersonfilterstarcompasszapleafgridswordcheckxsendclocklocation-arrowsettingsarrow-leftsearchheartbullet-roseDecorative Patterns
Rules, the bullet-rose tag prefix, map grid treatment, and the editorial decorative vocabulary.
Rule Styles
1px solid #D5D0C41px solid #1A1A1A3px double #1A1A1A2px solid #1A1A1A2px solid #1A1A1A (top border)Tag Prefix Pattern
The bullet rose (4-petal rosette) prefixes interest tags, evoking editorial ornamental tradition. Matched interests use accent red with bold weight.
Map Grid Pattern
40px repeating grid at 50% opacity on #F0ECE3 — building blocks in #E2DDD2 — roads in #FAF7F2
Decorative Elements
grayscale(30%), 1px rule borderbg + rule border + accent dot32px wide, 3px, #D5D0C4group (accent), small (ink), avatarForm Elements
Buttons, inputs, tags, and badges in the editorial design language. Bottom-border inputs, ink-on-cream buttons, uppercase DM Sans labels.
Buttons
Input Fields
Nieprawidłowy kod
Tags & Badges
Muted = no match, accent red + bold = match
Accent for received, muted for sent
Components
User rows, wave cards, bottom sheet, and empty states — the building blocks of the app's editorial UI.
User Row (Nearby List Item)
Wave Card (Waves Tab)
Bottom Sheet (Static Mockup)
Empty States
Nikt w pobliżu
Nie znaleźliśmy nikogo w Twojej okolicy. Spróbuj ponownie później.
Brak zaczepień
Gdy ktoś Cię zaczepi, zobaczysz to tutaj.
Brak czatów
Zacznij rozmowę odpowiadając na zaczepienie.
Screen Compositions
Full screen mockups in phone frames showing the complete editorial experience across login, onboarding, waves, chats, and profile.
Layout Rules & Motion
Spacing scale, layout principles, motion guidelines, and the do/don't reference for maintaining editorial consistency.
Spacing Scale
4pxHairlineHandle bar height, micro gaps6pxTickTag gaps, icon-text gaps8pxTightInner padding, badge padding10pxCompactUser card padding, input padding12pxGutterCard internal gaps, avatar-info gap16pxColumnHorizontal content margin, section padding24pxSectionMajor section padding, form spacing32pxBlockScreen top padding, between sectionsLayout Rules
All screen content uses 16px horizontal margins, newspaper-style columns within.
Three-tier hierarchy: double for masthead, solid ink for sections, rule for items.
Fixed 75px bottom tab bar with 2px top border in ink color.
Three snap points: peek (handle visible), half (list browsing), expanded (full list).
Motion Guidelines
202000.8Critically damped — arrives quickly without overshoot or bounce.
- Subtle fades and slide-ups only
- No bouncy or playful animations
- Reserved, calm editorial feel
- Sheet drag uses velocity-aware snapping
- Press states: scale(0.95-0.98)
Do & Don't
- Thin 1px rules between items
- Serif names (Instrument Serif)
- Muted, desaturated status tones
- SVG stroke icons in editorial weight
- Grayscale-tinted avatars
- Bullet rose (rosette) prefix on tags
- Uppercase DM Sans labels
- Cream background, ink text
- Emoji icons (no more emoji tab labels)
- Bright saturated colors (#007AFF, #4CAF50)
- Bouncy spring animations
- Rounded pill-shaped buttons
- Sans-serif for display headings
- White backgrounds with colored accents
- Drop shadows on cards
- Playful UI language or tone