A live page in this style is not built yet — the CSS variables and the prompt below are enough to reproduce it.
At a glance
21tokens
9type steps
1radius steps
10pxspacing base
Vero, in one page
Vero's iOS app is the anti-feed. Its entire reason to exist is a reaction against algorithmic timelines, engagement-bait, and infinite ad walls — so the design philosophy is *calm, chronological, and deliberate*. The canvas is pure true-black (#000000), not a charcoal, because Vero presents content like a gallery wall: an OLED-deep void around full-bleed photography so the image is the only light in the room. There are no trending modules, no "for you" reshuffling, no read-receipts pressure. The feed is strictly chronological — newest first, never reordered — and that promise is itself a design principle: nothing in the UI implies an algorithm is choosing for you.
The signature creation moment is the 7 post-type selector. Unlike single-purpose social apps, Vero treats a "post" as one of seven distinct, first-class media types — Photo, Video, Link, Music, Film, Book, Place — each with its own icon, its own composer, and its own card rendering in the feed. A book post shows a cover + author + star rating; a music post shows album art + track; a place post shows a pin + map; a film post shows a poster + your rating. This typed-post system is the structural soul of Vero and the most recognizable interaction: the horizontal row of seven icons that opens the compose flow. The second signature surface is the chronological feed itself — uniform, quiet post cards separated by hairline #232325 dividers, each headed by a circular avatar, the author's name, and a small colored post-type chip that tells you *what kind* of thing you're looking at before you read a word.
Color is austere and singular. There is exactly one brand expression: a teal→blue gradient (#00D1C1 → #0079D3) that appears on the wordmark, the primary "Post" CTA, the compose ring in the tab bar, and active states. A flat teal (#00C2B8) carries small accents — the liked heart, the active post-type icon, links. There is no second brand color; the only other saturated hue is a restrained camera-amber (#E8B23A) for star ratings on book/film posts, nodding to Vero's photographer-and-film-buff audience. Text is pure white (#FFFFFF) for names and titles, a soft gray (#9A9AA0) for captions, and a quiet gray (#5E5E64) for metadata. Typography is Manrope — a clean, modern geometric sans with a slightly humanist warmth — sized for unhurried reading: 18pt author names, 14pt captions, generous line height, nothing aggressive.
Key Characteristics:
- True-black canvas (
#000000) — OLED-deep, gallery-wall presentation; surfaces lift only to#0E0E10/#161618 - Strictly chronological feed — newest first, never reordered, no algorithm, no trending — a design promise
- 7 first-class post types — Photo / Video / Link / Music / Film / Book / Place — each with its own icon, composer, and card
- Post-type chip on every post — a small teal label that says *what kind* of content before you read it
- Single brand expression — a teal→blue gradient (
#00D1C1 → #0079D3) on wordmark, Post CTA, compose ring, active states - Flat teal (
#00C2B8) for small accents — liked heart, active type icon, links - Camera-amber (
#E8B23A) star ratings — the only other saturated hue, for book/film posts - Manrope typography sized for unhurried reading — 18pt author, 14pt caption, generous leading
- Uniform quiet post cards separated by hairline
#232325dividers — content, not chrome - A center compose action in the tab bar with the gradient ring — opens the 7-type picker
Do's and don'ts
Do
- Use pure true-black (
#000000) as the canvas — Vero is a gallery wall, OLED-deep - Keep the feed strictly chronological, newest-first — it's a design promise, not just a setting
- Treat all 7 post types (Photo/Video/Link/Music/Film/Book/Place) as equal, first-class citizens
- Show the teal post-type chip on every post so the *kind* of content is legible before reading
- Use the teal→blue gradient (
#00D1C1 → #0079D3) sparingly — wordmark, Post CTA, compose ring, active - Separate posts with hairline
#232325dividers — no card boxes - Use flat teal (
#00C2B8) for small accents — liked hearts, active icons, links - Reserve Camera Amber (
#E8B23A) for book/film star ratings only - Favor full pills (999pt) for buttons, search, chips
- Keep type calm — Manrope, 14pt captions with 1.5 line height, unhurried
Don't
- Don't use charcoal (
#0E0E10is for inset cards, not the canvas) — the canvas is pure#000000 - Don't add a "trending", "for you", or "suggested" rail — Vero is explicitly anti-algorithm
- Don't reorder the feed by engagement — newest-first, always; new posts insert at top
- Don't privilege one post type over the others — all seven are co-equal
- Don't add a second brand color — there is only the teal→blue gradient and flat teal
- Don't reuse Camera Amber for warnings or decoration — it means "rating", nothing else
- Don't wrap posts in card boxes/shadows — hairline dividers on true-black only
- Don't use heavy drop shadows on content — they're invisible on black; use hairlines + barely-lifted surfaces
- Don't crowd captions — 14pt with generous 1.5 leading; calm over dense
- Don't crop photos algorithmically — respect the photographer's original frame
Copy this into your AI builder
Paste it as-is. Every value below was measured from the original site, not guessed.
Assembled from the measured tokens — the source document has no prompt block.
Build a page in the Vero design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- teal→blue gradient: #00d1c1
- Brand Gradient: #00d1c1
- Vero Teal: #00c2b8
- Vero Blue: #0098e6
- Gradient Stop A: #00d1c1
- Gradient Stop B: #0079d3
- Teal Pressed: #00a89f
- True Black: #000000
- Surface 1: #0e0e10
- Surface 2: #161618
Type:
- families: Manrope, Fallback Stack, Numerals, Dynamic Type
- scale: 10, 11, 13, 14, 15, 18, 22, 26, 32
- weights: 400, 500, 600, 700, 800
Shape:
- radius: 10
Spacing: 10, 11, 12, 13, 16
Rules:
- Use pure true-black (`#000000`) as the canvas — Vero is a gallery wall, OLED-deep
- Keep the feed strictly chronological, newest-first — it's a design promise, not just a setting
- Treat all 7 post types (Photo/Video/Link/Music/Film/Book/Place) as equal, first-class citizens
- Show the teal post-type chip on every post so the *kind* of content is legible before reading
- Use the teal→blue gradient (`#00D1C1 → #0079D3`) sparingly — wordmark, Post CTA, compose ring, active
- Separate posts with hairline `#232325` dividers — no card boxes
Avoid:
- Don't use charcoal (`#0E0E10` is for inset cards, not the canvas) — the canvas is pure `#000000`
- Don't add a "trending", "for you", or "suggested" rail — Vero is explicitly anti-algorithm
- Don't reorder the feed by engagement — newest-first, always; new posts insert at top
- Don't privilege one post type over the others — all seven are co-equal
- Don't add a second brand color — there is only the teal→blue gradient and flat teal
- Don't reuse Camera Amber for warnings or decoration — it means "rating", nothing else
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Primary (Interactive)
- Brand Gradient (
#00D1C1 → #0079D3, 135°): The single brand expression — wordmark, primary "Post" CTA, compose ring, gradient fills. - Vero Teal (
#00C2B8): Flat accent — liked hearts, active post-type icons, active tab tint, links, focus rings. - Vero Blue (
#0098E6): Secondary flat accent / the blue end of the gradient when a flat blue is needed. - Gradient Stop A (
#00D1C1): Teal end (top-left). - Gradient Stop B (
#0079D3): Blue end (bottom-right). - Teal Pressed (
#00A89F): Pressed state for flat teal elements.
Canvas & Surfaces (Dark — primary mode)
- True Black (
#000000): The app background — pure black, gallery void, OLED-deep. - Surface 1 (
#0E0E10): Embedded cards (book/music/place post inner cards), sheets — barely lifted. - Surface 2 (
#161618): Composer fields, pickers, pressed list rows. - Divider (
#232325): Hairline separators between posts and sections — the primary structural line. - Overlay Scrim (
rgba(0,0,0,0.6)): Dim behind modals/sheets.
Canvas & Surfaces (Light — secondary, rare)
Vero is true-black-first; a light mode exists for accessibility/parity.
| Role | Light Mode | Dark Mode |
|---|---|---|
| Canvas | #FFFFFF | #000000 |
| Surface 1 | #F6F6F7 | #0E0E10 |
| Surface 2 | #ECECEE | #161618 |
| Divider | #E4E4E6 | #232325 |
| Text Primary | #0B0B0C | #FFFFFF |
| Text Secondary | #6A6A70 | #9A9AA0 |
Text
- Text Primary (
#FFFFFF): Author names, post titles, screen titles — pure white. - Text Secondary (
#9A9AA0): Captions, descriptions, body — soft gray. - Text Tertiary (
#5E5E64): Timestamps, counts, metadata, inactive tab labels — quiet gray. - Text on Gradient (
#FFFFFF): On the teal→blue gradient (white reads well on both ends).
Accent & Ratings
- Camera Amber (
#E8B23A): Star ratings on Book and Film posts only — a nod to the film-buff audience. Never a generic warning. - On-Amber Ink (
#1A1206): Text/glyph on amber chips.
Semantic
- Success (
#2ECC71): Post-published toast, "Connected" confirmation. - Error (
#FF4D4F): Failed post, destructive confirm, validation. - Warning (
#E8B23A): Reuses Camera Amber for soft warnings (consistent palette discipline). - Connection Teal (
#00C2B8): "Connection request" / relationship-tier accents (Vero's Close Friends / Friends / Acquaintances / Followers model).
Type scaleRead the full spec
Font Family
- Primary:
Manrope(by Mikhail Sharanda / Mirko Velimirović, SIL OFL) — a clean modern geometric sans with subtle humanist warmth and excellent screen rendering. Closest free Google Font to Vero's calm, modern product type. - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Tabular figures for counts and timestamps so the post action row doesn't shift.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Display | Manrope | 32pt | 800 | 1.15 | -0.4pt | Top-level "Feed" / wordmark scale |
| Screen Title | Manrope | 26pt | 700 | 1.2 | -0.3pt | "Discover", section landings |
| Section Header | Manrope | 22pt | 700 | 1.25 | -0.2pt | "People you follow" |
| Post Author | Manrope | 18pt | 700 | 1.3 | -0.1pt | Author name in the post head (often shown 14pt in compact lists) |
| Post Author (Compact) | Manrope | 14pt | 700 | 1.3 | 0pt | Author name in feed card |
| Title | Manrope | 15pt | 600 | 1.35 | 0pt | Book/film/music titles inside typed cards |
| Caption / Body | Manrope | 14pt | 500 | 1.5 | 0pt | Post captions, descriptions |
| Body (Reading) | Manrope | 14pt | 400 | 1.6 | 0pt | Long captions, comments |
| Metadata | Manrope | 13pt | 400 | 1.4 | 0pt | "Photo · 14m ago", counts |
| Button | Manrope | 15pt | 700 | 1.0 | 0.2pt | Primary/secondary buttons |
| Type Label | Manrope | 11pt | 600 | 1.0 | 0.4pt | Post-type chip / selector labels |
| Star Rating | Manrope | 11pt | 600 | 1.0 | 1.0pt | ★★★★★ amber rating row |
| Tab Label | Manrope | 10pt | 500 | 1.0 | 0pt | Bottom tab labels |
| Overline | Manrope | 11pt | 600 | 1.0 | 0.4pt | Uppercase section overlines |
Principles
- Unhurried reading: type is calm — author at 14–18pt, captions at 14pt with 1.5 line height, never crowded.
- Weight for hierarchy: 700 for names/titles, 500 for captions, 400 for long reading; 800 reserved for the single Display.
- Metadata recedes: 13pt
#5E5E64keeps "Photo · 14m" present but never competing with the image. - The type chip is meaningful: the 11pt teal post-type label is a functional signpost, not decoration.
- Dynamic Type: titles, captions, body scale; type labels, tab labels, star ratings stay fixed (layout-critical).
Components and layoutRead the full spec
Buttons
Primary Button (Post / Publish)
- Shape: Full pill, 999pt corner radius
- Background: linear gradient
#00D1C1 → #0079D3(135°) - Text:
#FFFFFF, Manrope 15pt weight 700 - Padding: 13pt vertical, 28pt horizontal
- Pressed:
filter: brightness(0.94)+ scale 0.98 - Disabled: gradient at 40% opacity, text at 60%
Outline Button (Connect / Follow primary)
- Background: transparent
- Border: 1.5pt
#00C2B8 - Text:
#00C2B8, Manrope 14pt weight 700 - Padding: 11pt vertical, 22pt horizontal
- Corner radius: 999pt
- Pressed: background
rgba(0,194,184,0.10)
Ghost / Surface Button (Follow secondary)
- Background:
#161618 - Border: 1pt
#232325 - Text:
#FFFFFF, Manrope 14pt weight 600 - Corner radius: 999pt (Vero favors full pills)
- Pressed: background
#232325
Text Button (See all post types)
- Text:
#00C2B8, Manrope 14pt weight 600 - No background, no underline
- Pressed: 70% opacity
Core Atoms
Avatar
- Circle, 38pt in feed (28pt in lists, 80pt on profile)
- Fallback: brand gradient
#00D1C1 → #0079D3 - Relationship ring (optional): 1.5pt — teal for Close Friends, gray otherwise
Post Card
- No card border or background — posts sit directly on
#000000, separated only by a 0.5pt#232325divider - Padding: 16pt horizontal, 16pt top / 14pt bottom
- Media corner radius: 10pt
- This "no card chrome" choice is core to the gallery-wall feel
Post-Type Chip (in post head)
- Inline, no background
- Leading 11pt type icon + label, both
#00C2B8 - Manrope 10–11pt weight 700
- Followed by " · {timestamp}" in
#5E5E64
Typed Inner Card (Book / Music / Film / Place)
- Background:
#0E0E10, 1pt#232325border, 10pt radius, 12pt padding - Book: 56×80pt cover + title (15pt w600) + author (12pt
#9A9AA0) + amber stars - Music: 56×56pt album art + track + artist + play glyph
- Place: map thumbnail + place name + teal pin
- Film: poster + title + your rating (amber stars)
Media (Photo / Video)
- Aspect ratio: respects original (commonly 4:5 portrait), 10pt corners
- Video: teal play affordance center, duration chip bottom-right
- Never algorithmically cropped — Vero respects the photographer's frame
Navigation
Top Bar
- Height: 44pt + safe area
- Leading: "VERO" wordmark — gradient-filled text, letter-spaced
- Trailing: search glyph + notifications bell, 21pt
#FFFFFF, 1.8pt stroke - Background:
#000000, 0.5pt#232325bottom border only when scrolled
Post-Type Selector Row (under top bar OR as compose sheet)
- Horizontal row of all 7 types: Photo, Video, Link, Music, Film, Book, Place
- Each: 19pt icon + 9–11pt label, evenly distributed
- Inactive:
#5E5E64; active/selected:#00C2B8 - 0.5pt
#232325bottom border
Bottom Tab Bar
- Height: 50pt + safe area (66pt visual)
- Background:
rgba(0,0,0,0.96)+saturate(180%) blur(20px) - Top border: 0.5pt
#232325 - 5 slots: Feed, Discover, Compose (center, gradient ring), Inbox, Profile
- Icon size: 22pt (Compose center 27pt with gradient stroke ring)
- Active color:
#00C2B8(icons fill); inactive:#5E5E64 - Labels: Manrope 10pt weight 500 (Compose label blank — icon-only)
Profile Header
- 80pt avatar, name 22pt weight 700, relationship-tier control (Close Friends / Friends / Acquaintances / Followers)
- Tab strip: "Posts", "Collections", "About" — underlined 2pt teal active
Input Fields
Search Field
- Height: 44pt
- Background:
#161618 - Border: none (focus: 1.5pt
#00C2B8) - Corner radius: 999pt (pill search) or 12pt
- Leading magnifier 16pt
#5E5E64 - Placeholder: "Search people, posts" Manrope 14pt
#5E5E64
Caption Composer
- Background:
#000000(full-screen compose) with#232325field outline - Text Manrope 16pt
#FFFFFF - Placeholder varies by type: "Write a caption…", "What did you think of this book?"
Distinctive Components
7 Post-Type Selector (the signature)
- Compose entry shows a grid/row of seven equally weighted cells: Photo, Video, Link, Music, Film, Book, Place
- Cell: icon (20pt) + label (10pt w600),
#0E0E10bg, 1pt#232325border, 12pt radius - Selected cell: border
#00C2B8, content#00C2B8, backgroundrgba(0,194,184,0.08) - This is the structural heart of Vero — all seven are first-class, none is "primary"
Chronological Feed Promise
- The feed is strictly newest-first; surface a quiet "Caught up" / chronological indicator rather than any "suggested for you" rail
- No engagement-driven reordering, no algorithmic insertions
Post Action Row
- Like (heart), Comment (bubble), Share (tray) — 19pt icons
#9A9AA0, count Manrope 12pt w600 - Liked: heart fills
#00C2B8 - Evenly spaced with 22pt gaps, no background
Relationship Tier Selector (Vero's signature privacy model)
- When following: choose Close Friends / Friends / Acquaintances / Followers
- A segmented or list control; selected tier highlighted teal
- Governs who sees each post — surfaced at post time too
Compose Ring (tab bar center)
- A circle with a gradient stroke (
#00D1C1 → #0079D3) and a+glyph - Tapping opens the 7-type selector
- The brand gradient's most prominent placement
Book / Film Rating Stars
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Post-type selector scrolls horizontally if cramped; 14pt author |
| iPhone 13/14/15 | 390pt | Standard layout — all 7 type icons fit the row |
| iPhone 15/16 Pro | 393pt | Dynamic Island accommodated in top bar |
| iPhone 15/16 Pro Max | 430pt | Larger media; 38pt avatars; comfortable 7-type row |
| iPad (portrait) | 768pt | Single centered stream (max ~620pt) — NOT a grid; Vero stays single-column |
| iPad (landscape) | 1024pt+ | Same centered single stream; optional left rail for nav only |
Dynamic Type
- Scales: screen titles, author names, captions, body, descriptions
- Fixed: post-type labels, tab labels, star ratings, type chips (layout-critical)
- Long captions expand inline with a "more" toggle
Orientation
- Portrait-first (a reading/gallery app)
- Landscape supported; media scales to fit, single stream maintained
- iPad Split View supported; stream stays centered and single-column
Touch Targets
- Post-type selector cell: full cell tappable, ≥ 56pt
- Tab bar items: 22pt glyph, 48pt hit; compose ring 27pt glyph / 56pt hit
- Like/Comment/Share: 44pt hit each
- Buttons: ≥ 36pt tall (pills)
Safe Area Handling
- Top: top bar + Dynamic Island respected
- Bottom: tab bar + home indicator respected; compose sheet respects bottom inset
- Sides: 16pt content inset; media full-bleed within insets
- Keyboard: caption composer rises above keyboard; feed scrolls clear
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-vero {--page-bg: #ffffff;
--page-bg-gradient: none;
--text-color: #555555;
--heading-color: #555555;
--link-color: #008175;
--link-hover-color: #004e47;
--border-color: #e0e0e0;
--card-bg: #ffffff;
--card-shadow: 0 1px 2px rgba(85,85,85,0.06);
--card-hover-shadow: 0 6px 18px rgba(85,85,85,0.12);
--header-bg: #555555;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #ffffff;
--footer-text-color: #737373;
--button-bg: #00d1c1;
--button-text-color: #000000;
--button-hover-bg: #009e92;
--button-border: none;
--button-border-radius: 10px;
--button-secondary-bg: #f5f5f5;
--button-secondary-text-color: #555555;
--button-secondary-hover-bg: #ebebeb;
--button-secondary-border: 1px solid #e0e0e0;
--prompt-bg: #f7f7f7;
--prompt-text-color: #555555;
--base-font: var(--font-sans);
--heading-font: var(--font-sans);
--card-border-radius: 10px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- plenty of fish 84.7%
- grammarly 84.6%
- whatsapp 80.7%
- zwift 79.5%
- clickup 79.4%
Where this came from
- Source document
ios/design-md/social/vero/DESIGN.md· 23.9 KB- Repository
- Meliwat/awesome-ios-design-md
- Licence
- MIT
Source text is reproduced under its original licence. Tokens, similarity scores and page structure are ours.