Social

Dark

Social

Eight social screens, light and dark, the densest set in the library. 197 instances a row off seven component sets, and two screens that draw nothing by hand at all.

Preview

Eight social screens assembled from the same components and the same variables as every other screen in the system. Retint the brand and all eight move at once.

Social, light and dark

8 screens, 393 x 852, 197 instances per row

Note

Not every screen in this set is shown here. The Figma file carries all of them, in light and dark.

Social app, explore screen, light — Explore

Social app, explore screen, dark — Explore

Social app, search screen, light — Search

Social app, search screen, dark — Search

Profile

Social app, followers screen, light — Followers

Social app, followers screen, dark — Followers

The Figma page holds every screen twice, a light row and a dark row. Each frame sets its modes explicitly, Color Tokens = Light or Dark and Platform = ios-md. Nothing is left to inherit, so a frame dropped into another file arrives in the theme it was drawn in.

Components

197 instances per row, 394 across both, the densest set in the library. Every control that has a component is an instance of it, so a change to the component reaches all eight screens without anyone opening them.

Component

Per row

Where

Avatar

Every screen but Explore, plus six presence dots on Chat

Button

Every screen but Explore, nine each on Search and Followers

Navigation

Six screens, one bar and four labels each

Status Bar

Every screen

Top Bar

Home, both Chat screens, Followers

Explore, Search, Chat list, Followers

Chip

Explore

That is 137 component instances off seven sets. The other 60 are Lucide icons, 18 distinct names, every one an instance off the shared icon page rather than a pasted vector. No third party asset is placed on these screens.

Drawn locally, not instances: sixteen story rings, five message bubbles and a reply field on the thread, another reply field and a five segment progress bar on Story, and thirty photo rectangles. The photos are content and belong there. The rings and the progress bar do not: the ring is one shape repeated sixteen times a row and wants to be a component, and the segment bar should fold back into Progress. Search and Followers draw nothing at all, 31 and 34 instances each and not one loose shape.

Tokens

No screen carries a raw hex. Bubbles, overlays and hairlines all resolve through variables, which is what makes the dark row a mode switch rather than a second design.

Token

Where it lands

Screens

text/strong-950

Display names, captions, stat values

Six screens

text/soft-500

Handles, timestamps, counts

Six screens

bg/weak-50

Received message bubbles

Chat thread

state/information/base-500

Sent message bubbles

Chat thread

static/static-white-0

Sent bubble text and every story overlay

Chat thread, Story

border/soft-100

Row and header hairlines

Home, Chat

colors/alpha/black/alpha-24

The unplayed track behind the story segments

Story

Geometry runs on the same file. Padding and gaps come from dimensions/spacing, every ring and pill from dimensions/radius/full, the bubble from dimensions/radius/2xl with its tail corner dropped to sm. Six collections carry the file: Foundations, Color Tokens, Typography, Motion, Platform and Platform Bridge. Color Tokens holds Light and Dark, Platform holds ios-md, ios-lg and android, Platform Bridge holds Brand and System.