At a glance
12tokens
10type steps
3radius steps
12pxspacing base
Bereal, in one page
BeReal's iOS app is a deliberate rejection of the polished social-media aesthetic. The interface is a true-black canvas (#000000) with almost no chrome, no gradients, no decorative color — a stark, photographic darkroom where the only thing that matters is the unfiltered dual-camera moment. There is no brand color in the UI. The accent is white. This is a design philosophy, not an oversight: by stripping every gradient, glow, and tint, BeReal forces the eye onto the photo itself — the back camera's view of where you are, and the small front-camera selfie of your face reacting to it. The app feels less like Instagram and more like a disposable camera with a 2-minute timer taped to it.
The signature element is the dual-lens composite card: a full-bleed photo from the rear camera with a small, rounded, draggable selfie thumbnail pinned to the top-left corner. This composite is the atomic unit of the entire product — it appears in capture, in the friends feed, in your profile grid, and in the memories calendar. Everything else (reactions, comments, the timer banner) is layered on top of or around this card in plain white text on black. Authenticity signals are first-class UI: a "⚠ late" badge with a relative timestamp ("2h late"), a "RealMojis" reaction strip of tiny circular selfie-photos instead of abstract emoji, and small dots indicating how many retakes someone needed before posting.
Typography is San Francisco (SF Pro) used plainly — no custom typeface, no display weights, no expressive type moments. Headlines are compact, functional, and white. The most expressive "type" moment in the app isn't type at all: it's the 2-minute countdown banner that appears at the top of the feed when the daily notification fires ("⏰ 2 min left to capture a BeReal"). The restraint in type mirrors the restraint in color — BeReal is anti-design as design, and the consistency of that stance is what makes it feel honest.
Key Characteristics:
- True-black canvas (
#000000) — maximum starkness, no warm-black softening - No brand accent color — the accent is white; deliberate chromatic minimalism
- Dual-lens composite card: full back photo + small draggable rounded front selfie (top-left)
- 2-minute countdown banner — the daily ritual, top of the friends feed
- Authenticity tags as UI: "⚠ late", relative timestamps, retake-count dots
- RealMojis reactions — circular selfie-photos, never abstract emoji, no like counts
- SF Pro at 400 / 600 / 700, no custom font, no display sizes
- Bottom tab nav: Friends / Official / Search / Profile
- Haptics on dual-shutter capture and camera flip
Do's and don'ts
Do
- Use pure black
#000000as the canvas — the darkroom metaphor requires true black - Keep the UI monochrome — white is the only accent; amber only for lateness
- Make the dual-lens composite the hero of every surface (feed, profile, memories)
- Keep the front-camera selfie draggable and corner-snapping
- Surface authenticity signals openly: "⚠ late", relative timestamps, retake counts
- Use RealMojis (real selfie photos) for reactions — never abstract emoji, never counts
- Render the 2-minute countdown with tabular numerals and amber text
- Pair the capture button with a heavy haptic and a second soft one for the front lens
Don't
- Don't introduce a brand accent color — the lack of one *is* the brand
- Don't use warm-black (
#121212) — BeReal is true#000000 - Don't add like counts, follower counts, or vanity metrics anywhere
- Don't use abstract emoji for reactions — only RealMoji selfie-photos
- Don't beautify with gradients, glows, or decorative shadows
- Don't hide the late badge or retake count — honesty is the product
- Don't add a light mode — it breaks the photographic darkroom feel
- Don't use a custom display font — system SF Pro only, no expressive type
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 Bereal design language. Follow the measured tokens below — do not substitute your own palette.
Colors:
- Canvas Black: #000000
- Surface 1: #1c1c1e
- Surface 2: #2c2c2e
- Divider: #2c2c2e
- Text Primary: #ffffff
- Text Secondary: #8e8e93
- Text Tertiary: #636366
- Accent White: #ffffff
- On-Accent Black: #000000
- Late Amber: #ffd60a
Type:
- families: SF Pro Text, SF Pro Display, Fallback Stack, Numerals
- scale: 10, 11, 12, 13, 14, 15, 16, 17, 22
- weights: 400, 600, 700
Shape:
- radius: 6, 14, 18
- elevation: Card shadow: `rgba(0,0,0,0.6) 0 8px 24px` (registers on black via opacity)
Spacing: 12, 14
Rules:
- Use pure black `#000000` as the canvas — the darkroom metaphor requires true black
- Keep the UI monochrome — white is the only accent; amber only for lateness
- Make the dual-lens composite the hero of every surface (feed, profile, memories)
- Keep the front-camera selfie draggable and corner-snapping
- Surface authenticity signals openly: "⚠ late", relative timestamps, retake counts
- Use RealMojis (real selfie photos) for reactions — never abstract emoji, never counts
Avoid:
- Don't introduce a brand accent color — the lack of one *is* the brand
- Don't use warm-black (`#121212`) — BeReal is true `#000000`
- Don't add like counts, follower counts, or vanity metrics anywhere
- Don't use abstract emoji for reactions — only RealMoji selfie-photos
- Don't beautify with gradients, glows, or decorative shadows
- Don't hide the late badge or retake count — honesty is the product
Keep every value literal. If a token is given, use that exact value.The specification
Colour paletteRead the full spec
Canvas & Surfaces (Dark — the only mode)
- Canvas Black (
#000000): The primary and only canvas — true black, full-bleed behind every screen. - Surface 1 (
#1C1C1E): Sheets, bottom modals, comment composer, settings rows. - Surface 2 (
#2C2C2E): Elevated rows, pressed states, chip backgrounds, RealMoji picker tray. - Divider (
#2C2C2E): Hairline separators between settings rows and comment threads.
Text
- Text Primary (
#FFFFFF): Usernames, captions, headlines, all primary text. - Text Secondary (
#8E8E93): Timestamps, "your friends", metadata, location strings, placeholder text. - Text Tertiary (
#636366): Disabled labels, very low-emphasis hints.
Accent (Intentionally Monochrome)
- Accent White (
#FFFFFF): The primary action color — capture ring, active tab, primary button fill. BeReal has *no* brand hue; white is the verb. - On-Accent Black (
#000000): Text/icon on white-filled buttons (intentional inversion, like the capture button).
Semantic
- Late Amber (
#FFD60A): The "⚠ late" authenticity badge and timer-warning accent — the single warm color, used only for lateness/urgency. - Error Red (
#FF453A): Failed posts, connection-lost, destructive confirm ("Delete BeReal"). - Online Green (
#30D158): Rare — friend-active dot in messaging.
Light Mode (Not Used)
BeReal's iOS app is dark-only by design — the photographic darkroom metaphor depends on true black. No light variant ships.
Type scaleRead the full spec
Font Family
- Primary:
SF Pro Text/SF Pro Display(system) — BeReal ships no custom typeface - Fallback Stack:
-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif - Numerals: Tabular figures for the countdown timer so digits don't jitter as they tick
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
|---|---|---|---|---|---|---|
| Timer Banner | SF Pro Display | 24pt | 700 | 1.1 | -0.3pt | "2 min left to capture" countdown headline |
| Screen Title | SF Pro Display | 22pt | 700 | 1.2 | -0.3pt | "Friends", "Discovery" nav title |
| Username (Card) | SF Pro Text | 17pt | 600 | 1.2 | -0.2pt | Poster's name above the dual-lens card |
| Caption | SF Pro Text | 16pt | 400 | 1.35 | 0pt | The optional one-line caption under a BeReal |
| Body | SF Pro Text | 15pt | 400 | 1.4 | 0pt | Comment text, settings descriptions |
| Comment Author | SF Pro Text | 14pt | 600 | 1.3 | 0pt | Bold name preceding a comment body |
| Meta / Timestamp | SF Pro Text | 13pt | 400 | 1.3 | 0pt | "2h late", "Paris, France", "12:43" |
| Late Badge | SF Pro Text | 12pt | 700 | 1.1 | 0.2pt | "⚠ LATE" authenticity tag |
| Button (Primary) | SF Pro Text | 17pt | 600 | 1.0 | -0.2pt | "Post", "Add a caption" |
| Tab Label | SF Pro Text | 10pt | 600 | 1.0 | 0.1pt | Bottom tab bar labels (when shown) |
| Retake Count | SF Pro Text | 11pt | 600 | 1.0 | 0pt | "3 retakes" pill under a posted card |
Principles
- System font only: No custom face — BeReal's identity is the dual-lens layout, not type
- Weight concentrated at 400 / 600 / 700: Regular for body, semibold for names/buttons, bold for the timer
- No display-size headlines except the timer — the photo is the headline; the timer is the only "hero" type
- Tabular numerals on the countdown —
2:00 → 1:59must not shift horizontally - White on black, always — there is no colored text anywhere except the amber late badge
Components and layoutRead the full spec
Buttons
Capture Button (The Dual Shutter)
- Shape: Circle, 76pt outer ring, 4pt white stroke, transparent center
- Inner: 64pt solid white disc on press
- Pressed: scale 0.92, brief white flash overlay on the viewfinder, paired with
.impactOccurred(.heavy)haptic - Triggers both cameras in sequence (~0.5s apart) — a second lighter haptic on the front-camera capture
Primary Button ("Post" / "Send")
- Background:
#FFFFFF - Text:
#000000(intentional inversion for contrast on black) - Padding: 14pt vertical, 32pt horizontal
- Corner radius: 500pt (full pill)
- Font: SF Pro Text 17pt weight 600
- Pressed: opacity 0.85, scale 0.97
- Used for: "Post", "Send", "Continue"
Secondary Button ("Add a caption" / "Retake")
- Background: transparent
- Text:
#FFFFFF - Border: 1pt solid
rgba(255,255,255,0.4) - Padding: 12pt vertical, 24pt horizontal
- Corner radius: 500pt
- Font: SF Pro Text 16pt weight 600
- Pressed: border opacity → 1.0
Camera Flip Icon Button
- Size: 28pt glyph, 44pt hit area
- Default:
#FFFFFFon transparent - Tap: 180° flip animation on the viewfinder + light haptic
- Position: bottom-right of the capture screen
RealMoji Add Button
- Circular 44pt dashed-stroke white outline with a
+glyph at center - Tap: opens the RealMoji selfie picker (front camera live)
Cards & Containers
Dual-Lens Composite Card (THE signature)
- Aspect: 3:4 portrait, full content width minus 0pt margins (edge-to-edge in feed)
- Back photo: full-bleed, corner radius 18pt
- Front selfie: 100pt × 134pt (3:4), corner radius 14pt, 2pt black inner stroke, default position top-left with 12pt inset
- Front selfie is draggable — long-press lifts it (scale 1.05 + shadow), drag snaps to any corner
- Card shadow:
rgba(0,0,0,0.6) 0 8px 24px(registers on black via opacity) - Tap front selfie: swaps which camera is primary (front becomes full-bleed) with a cross-fade
Feed Post (Friends)
- Header: 32pt circular avatar + username (17pt w600) + "⚠ 2h late" badge (amber) + ⋯
- The dual-lens composite card directly below the header, edge-to-edge
- Caption (16pt w400) one line below the card if present
- Location + relative time (13pt w400
#8E8E93) under the caption - RealMojis strip: row of overlapping 30pt circular selfie-reactions, then the
+add button - "View N comments" link (14pt w400
#8E8E93)
RealMoji Reaction Bubble
- 30pt circular photo (a real selfie, not an emoji), 2pt black ring
- Overlap: each bubble overlaps the previous by 8pt (stacked cluster)
- Tap the cluster: opens the full reactions sheet (who reacted, with their selfie)
- No counts, no like numbers anywhere — reactions are faces, not metrics
Memories Calendar Cell
- Square grid cell, 4 columns, 2pt gap
- Each cell: that day's BeReal as a tiny dual-lens thumbnail (corner radius 6pt)
- Date label (11pt w600 white) bottom-left over a subtle scrim
- Tap: expands that day's BeReal full-screen
Navigation
Bottom Tab Bar
- Height: 52pt + safe area
- Background:
#000000(opaque true black, no blur — the canvas continues) - Tabs: Friends, Official, Search, Profile
- Icon size: 26pt
- Active:
#FFFFFFfilled glyph; Inactive:rgba(255,255,255,0.45)outline - Labels: SF Pro Text 10pt w600 (or icon-only on some builds)
- Top hairline:
rgba(255,255,255,0.08)0.5pt
Top Bar (Friends)
- Height: 48pt + safe area
- Left: "Friends" / "My Friends" segmented toggle (text, 17pt w600, inactive at 45% opacity)
- Center: BeReal wordmark (lowercase, 18pt w700) on Capture entry
- Right: profile avatar (28pt circular)
Capture Screen (Full Screen)
- Edge-to-edge live viewfinder (back camera)
- Small live front-camera selfie inset top-left (same 100×134pt as the card)
- 2-minute countdown pill top-center: amber text on
rgba(0,0,0,0.5)blur, tabular digits - Capture button bottom-center (76pt dual shutter)
- Camera flip bottom-right, flash toggle bottom-left
Input Fields
Caption Field
- Background: transparent (overlaid on the card or on black)
- Placeholder: "Add a caption…", 16pt w400
#8E8E93 - Text:
#FFFFFF16pt - No border, no box — a bare cursor and text, single line, centered
Comment Composer
- Background:
#1C1C1E - Height: 44pt, corner radius 500pt (pill)
- Placeholder: "Add a comment…", 15pt w400
#8E8E93, 16pt horizontal inset - Trailing: circular white "Send" button (32pt) appears once text is entered
Distinctive Components
2-Minute Countdown Banner
- Full-width pill at the top of the friends feed when the daily notification has fired
- Background:
rgba(0,0,0,0.6)with light blur, 1ptrgba(255,215,10,0.4)amber border - Text: "⏰ 2 min left to capture a BeReal" — amber
#FFD60A, tabular digits - Counts down live; on expiry the banner says "Late — post anyway?" and the late badge logic engages
Authenticity / Late Tag
- Inline pill next to the username: "⚠ 2h late"
- Background: transparent; text + glyph in amber
#FFD60A, 12pt w700 - Relative time recalculated from post timestamp vs the day's notification time
Retake-Count Dots
- A small "N retakes" pill under the card showing how many attempts the poster made
- Honesty signal — surfaced, not hidden
- 11pt w600 white on
rgba(255,255,255,0.12)pill
Behind-the-Scenes / BTS History
- A small stacked-photos icon on a card if the poster recorded a BTS video
- Tap: plays the short behind-the-scenes clip in a full-screen modal
Responsive behaviourRead the full spec
Device Sizes
| Device | Width | Key Changes |
|---|---|---|
| iPhone SE (3rd gen) | 375pt | Selfie inset 88×118pt; card aspect held at 3:4 |
| iPhone 13/14/15 | 390pt | Standard 100×134pt selfie inset |
| iPhone 15/16 Pro | 393pt | Dynamic Island clears the top toggle row |
| iPhone 15/16 Pro Max | 430pt | Selfie inset 112×150pt; memories grid stays 4-col |
| iPad | 768pt+ | Feed centered at 480pt max-width; memories grid 6-col |
Dynamic Type
- Usernames, captions, comments: full scale
- Countdown timer: fixed (tabular, layout-critical — never scales)
- Late badge / retake count: fixed 12pt / 11pt
- Tab labels: fixed 10pt
Orientation
- All screens: portrait-locked — BeReal is a portrait-camera ritual
- Full-screen photo viewer: portrait only (the 3:4 composite assumes it)
Touch Targets
- Capture button: 76pt — the largest, deliberately unmissable
- Selfie inset: full 100×134pt is draggable (long-press to lift)
- Tab icons: 26pt glyph, 44pt effective hit
- RealMoji
+: 44pt
Safe Area Handling
- Top: countdown pill and toggle row sit below the safe area / Dynamic Island
- Bottom: tab bar and capture button respect the home indicator
- Card: intentionally goes edge-to-edge horizontally (0pt side insets)
Drop-in CSS variables
The same values as a theme block. Add the class to <body> and the site repaints.
body.theme-bereal {--page-bg: #000000;
--page-bg-gradient: none;
--text-color: #ffffff;
--heading-color: #ffffff;
--link-color: #ffd60a;
--link-hover-color: #d6b200;
--border-color: #2e2e2e;
--card-bg: #000000;
--card-shadow: 0 1px 2px rgba(255,255,255,0.06);
--card-hover-shadow: 0 6px 18px rgba(255,255,255,0.12);
--header-bg: #141414;
--header-text-color: #ffffff;
--header-shadow: none;
--footer-bg: #000000;
--footer-text-color: #a6a6a6;
--button-bg: #ffd60a;
--button-text-color: #000000;
--button-hover-bg: #d6b200;
--button-border: none;
--button-border-radius: 14px;
--button-secondary-bg: #0f0f0f;
--button-secondary-text-color: #ffffff;
--button-secondary-hover-bg: #1f1f1f;
--button-secondary-border: 1px solid #2e2e2e;
--prompt-bg: #0d0d0d;
--prompt-text-color: #ffffff;
--base-font: var(--font-helvetica);
--heading-font: var(--font-helvetica);
--card-border-radius: 14px;
}Visually close to
Measured with a deterministic colour + geometry comparison across 958 styles. Not a hand-picked list.
- clubhouse 87.2%
- coffee meets bagel 86.9%
- sanu 84.1%
- panera 79.0%
- happn 77.7%
Where this came from
- Source document
ios/design-md/social/bereal/DESIGN.md· 19.4 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.