Vero DESIGN.md

1. Visual Theme & Atmosphere

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 #232325 dividers — content, not chrome
• A center compose action in the tab bar with the gradient ring — opens the 7-type picker

2. Color Palette & Roles

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.

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).

3. Typography Rules

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

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 #5E5E64 keeps "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).

4. Component Stylings

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 #232325 divider
• 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 #232325 border, 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 #232325 bottom 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 #232325 bottom 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 #232325 field 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), #0E0E10 bg, 1pt #232325 border, 12pt radius
• Selected cell: border #00C2B8, content #00C2B8, background rgba(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

• Five stars, filled in Camera Amber #E8B23A
• Manrope-spaced, 11pt, 1pt letter-spacing
• The only amber in the product — film-buff/reader signal

5. Layout Principles

Spacing System

• Base unit: 4pt
• Scale: 4, 8, 12, 14, 16, 20, 24, 32, 40, 48
• Screen horizontal inset: 16pt
• Post top padding 16pt / bottom 14pt; media-to-caption gap 12pt
• Post-type selector cell gap: 10pt

Grid & Container

• iPhone: single column, 16pt insets, full-width media
• Posts: no card frame — full-bleed within insets, divided by hairlines
• iPad: single centered column (max-width ~620pt) — Vero stays single-stream even on large screens (anti-grid, pro-reading)
• Profile collections: 3-up thumbnail grid

Whitespace Philosophy

• Gallery wall: generous black around every image; the photo is the light source
• No card chrome: posts are separated by hairlines, not boxes — content is the interface
• One brand expression, used sparingly: the gradient appears on the wordmark, Post CTA, and compose ring only
• Calm rhythm: uniform post structure, consistent quiet metadata — nothing competes for attention

Border Radius Scale

• Square (0pt): dividers, full-bleed media edges
• Subtle (4pt): book/album-cover thumbnails, small tags
• Standard (8pt): small chips
• Media (10pt): photo/video, typed inner cards
• Comfortable (14pt): composer surfaces, pickers
• Sheet (20pt): bottom sheets, modals
• Pill (500pt): all buttons, search, type chips — Vero strongly favors pills
• Circle (50%): avatars, the compose ring

6. Depth & Elevation

Vero is profoundly flat — true-black with hairline structure. There is essentially no elevation in content; depth exists only for transient floating surfaces.

Shadow Philosophy: On a true-black canvas, shadows are invisible — so Vero structures the screen with hairlines and barely-lifted surfaces (#0E0E10), never elevation. Floating elements get a heavy 0.6–0.7 shadow plus a #232325 hairline so they're distinguishable against the void. The product's flatness is intentional: a calm, document-like surface with no Material-style layering.

Motion

• Post-type select: cell border + content tint to teal over 160ms ease-out; soft haptic
• Compose sheet: slides up 300ms ease-out from the gradient ring; scrim fades in parallel
• Like: heart scales 1.0 → 1.2 → 1.0 over 240ms spring, fills #00C2B8; soft haptic
• Feed refresh: pull triggers a teal spinner; new posts insert at top with a 220ms fade (never reshuffle existing)
• Tab switch: cross-fade content 200ms; active icon tints teal instantly
• Relationship tier change: segmented selection slides 180ms; selected pill tints teal
• Image load: cross-fade from #0E0E10 placeholder to image over 220ms
• Connect/Follow: button label cross-fades 180ms; outline → filled state
• Haptics: soft impact on post-type select, like, connect; selection tick on tab change

7. 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 #232325 dividers — 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 (#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
• 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

8. Responsive Behavior

Device Sizes

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

9. Agent Prompt Guide

Quick Color Reference

• Canvas (dark): #000000
• Surface 1: #0E0E10
• Surface 2: #161618
• Divider: #232325
• Text primary: #FFFFFF
• Text secondary: #9A9AA0
• Text tertiary / metadata: #5E5E64
• Brand gradient: #00D1C1 → #0079D3 (135°)
• Vero Teal (flat accent): #00C2B8
• Vero Blue: #0098E6
• Teal pressed: #00A89F
• Camera Amber (ratings only): #E8B23A
• Success: #2ECC71 · Error: #FF4D4F

Example Component Prompts

• "Build the Vero 7 post-type selector in SwiftUI: a row (or 4×2 grid) of seven equally weighted cells — Photo, Video, Link, Music, Film, Book, Place. Each cell: a 20pt SF Symbol + a Manrope 10pt weight 600 label, #0E0E10 background, 1pt #232325 border, 12pt corner radius, content color #5E5E64. The selected cell: border #00C2B8, content #00C2B8, background rgba(0,194,184,0.08). No type is primary — all seven are co-equal. Tapping a cell tints it over 160ms ease-out with a soft haptic."

• "Create a Vero feed post card: no card box — it sits directly on #000000, separated from the next post only by a 0.5pt #232325 bottom divider, 16pt horizontal padding, 16pt top / 14pt bottom. Head: 38pt circular avatar (brand-gradient #00D1C1 → #0079D3 fallback), author name Manrope 14pt weight 700 #FFFFFF, and a meta line: a teal post-type chip (11pt icon + 10pt weight 700 label, both #00C2B8) followed by ' · 14m' in #5E5E64, with a trailing '···' more glyph. Media at 10pt corner radius respecting original aspect. Caption Manrope 14pt weight 500 #9A9AA0, 1.5 line height. Action row: Like / Comment / Share, 19pt #9A9AA0 icons with 12pt counts, 22pt gaps; liked heart fills #00C2B8."

• "Build a Vero Book post inner card: #0E0E10 background, 1pt #232325 border, 10pt corner radius, 12pt padding. Left: a 56×80pt cover (4pt radius). Right: title Manrope 15pt weight 600 #FFFFFF, author Manrope 12pt #9A9AA0, and a 5-star rating row in Camera Amber #E8B23A (Manrope 11pt, 1pt letter-spacing)."

• "Create the Vero bottom tab bar: 50pt + safe area, background rgba(0,0,0,0.96) with saturate(180%) blur(20px), 0.5pt #232325 top border. Five slots: Feed, Discover, Compose (center — a 27pt circle with a 2pt gradient stroke #00D1C1 → #0079D3 and a + glyph, no label), Inbox, Profile. Inactive icons 22pt #5E5E64; active icon fills #00C2B8. Labels Manrope 10pt weight 500. Tapping Compose opens the 7 post-type selector sheet."

• "Create the Vero primary 'Post' button: a full pill (999pt radius) filled with a 135° linear gradient #00D1C1 → #0079D3, white Manrope 15pt weight 700 text, 13pt vertical / 28pt horizontal padding. Pressed: brightness 0.94 + scale 0.98. Disabled: gradient at 40% opacity."

• "Build the Vero 'VERO' wordmark: uppercase Manrope weight 800, ~2pt letter-spacing, filled with the 135° teal→blue gradient #00D1C1 → #0079D3 (gradient-clipped text), left-aligned in the top bar."

Iteration Guide

1. Canvas is PURE true-black #000000 — NOT charcoal, NOT #0E0E10 (that's for inset cards) — a gallery void
2. The feed is strictly chronological — newest-first, never reordered; no "for you", no trending — this is a design promise
3. There are exactly 7 first-class post types (Photo/Video/Link/Music/Film/Book/Place) — none is primary, all co-equal
4. Every post shows a teal post-type chip so the kind of content is legible before reading
5. There is ONE brand expression: the teal→blue gradient #00D1C1 → #0079D3 — wordmark, Post CTA, compose ring, active
6. Flat teal #00C2B8 carries small accents — liked hearts, active icons, links
7. Camera Amber #E8B23A is for book/film star ratings ONLY — never a warning or decoration
8. Posts have NO card box — hairline #232325 dividers on true-black; content is the interface
9. Favor full pills (999pt) for buttons, search, chips; Manrope at calm, unhurried sizes
10. No heavy shadows — they're invisible on black; structure with hairlines + barely-lifted #0E0E10 surfaces