Ori, version two.

Socialtrait's design system, rebuilt on Brand Concept Guidelines V2 — so every document, deck, and page an agent makes is on brand by construction.

OverviewOri 2.0Brand Concept Guidelines V2 · 2026-08-26

Clarity, restraint, and a sense of forward motion.

The guideline's idea — what feels like the future has, in a sense, already happened — expressed as rules an agent can't get wrong: open editorial layouts, calm instrument-grade type, and color that moves between light and dark depending on whether a moment needs atmosphere or function.

  1. Light for function, dark for momentsRead-pages on Horizon; Solar Horizon and Real Black only for covers, heros, statements, closes.
  2. One signalSeagrass, once per surface. On light it's a fill under black ink — never text.
  3. Atmosphere, not decorationBlues live in the four horizons and in data. Headlines are never blue.
  4. One family, many widthsSF Pro (Archivo fallback). Wide cuts display; normal width reads.
  5. Sentence caseUppercase belongs to kickers, labels, and the folio.
  6. Numbers are figuresTabular everywhere; the numbers a page argues with take the wide cut.
  7. Open layoutsHairlines and whitespace hold the structure. No boxed sections.
  8. Slight radii4 · 8 · 12 · 24px — softened, never sharp, never toy-round.
  9. Depth is earnedSoft cool shadows on photos and cards. Glow belongs to Seagrass alone.
  10. The folio closes every pageHairline, lockup, legal line, page number. Logo in black or white.
Logo lockup — refinedassets/logo/

The mark and wordmark, finally one system.

Rebuilt from four equal circles and two concentric inner circles on a shared grid, unified into one path, softened with slight corner radii. Less aggressive, more human, more ownable — and the only logo going forward.

Lockup · black on light — the default
Lockup · white on Dawn, Dusk, Twilight, Real Black
Mark · only where the lockup can't fit
Black on Day
Clear space · the mark's inner aperture, all sides
Don't color it — black or white only.
Don't rotate, skew, or outline.
Don't watermark, crop, or bleed.
socialtrait
Don't retype the wordmark.
02Typography
TypefaceSF Pro · fallback Archivo
Primary typeface: SF Pro W120
aa
abcdefghijklmno
pqrstuvwxyz
0123456789~!@#$%^&*()_+
Secondary typeface: SF Pro Regular
aa
abcdefghijklmnopq
rstuvwxyz
0123456789~!@#$%^&*()_+
02.1Typography styles

Eight styles. Personality comes from width.

SF Pro Variable
Size 128px
Wght 590
Wdth 132
H1 Headline
SF Pro Variable
Size 96px
Wght 700
Wdth 132
H2 Headline
SF Pro Variable
Size 64px
Wght 510
Wdth 118
H3 Headline Wide
SF Pro Variable
Size 64px
Wght 400
Wdth 110
H3 Headline
SF Pro Variable
Size 36px
Wght 650
Wdth 118
H4 Headline Wide
SF Pro Variable
Size 36px
Wght 650
Wdth 100
H4 Headline
SF Pro Variable
Size 18px
Wght 591
Wdth 120
Body 1 — labels, kickers, buttons, the instrument voice
SF Pro Variable
Size 18px
Wght 400
Wdth 100
Body 2 — reading text, calm and plain, at normal width
03Color
Solar Horizon + SeagrassAtmosphere · Signal · Neutrals
Dawn — hero color direction
#314188
Seagrass#BAFE81
White text
Day
#3E6FE7
Seagrass#BAFE81
Real Black text
Dusk
#2A2759
Seagrass#BAFE81
White text
Twilight
#070B2F
Seagrass#BAFE81
White text
Real BlackRGB 31, 41, 55 · #1F2937
DustRGB 83, 91, 101 · #535B65
CloudRGB 204, 206, 209 · #CCCED1
HorizonRGB 250, 250, 250 · #FAFAFA
Mist#80868F · captions
Rule#E3E5E8 · hairline
Fog#F1F2F4 · panels
Day deep#2F5BCC · links
Pos#2F7A12 · deltas
Neg#C23B32 · deltas, risk
dark
background
Key hero moments — more visuals than text.
light
background
Functional pages — more text than visuals.
04Photography
Image treatment.photo · .photo.soft

Bright, real, and softened at the edges.

  • DoBrighter tones, realism, natural light. Use real photographs as the baseline for any AI editing.
  • DoLarge corner radii (24px), the soft cool shadow, and progressive blur toward one edge.
  • Don'tDarker, moody, or green-toned imagery. Stock clichés. 3D blobs.
  • Don'tUse a photo to fill a sparse page, or ship a placeholder box.

Frame above is a CSS composition demonstrating the treatment; drop a real photograph into .photo to apply it.

05Components
Componentstokens/ori.css
Page head · section head · signalKicker top-left, quiet meta right; hairline → index → assertion; one Seagrass mark per page
Insight reportGen-Z beauty panel2026-10-07Confidential

Creators move intent 3.1× further than brands

Across 1,200 simulated Gen-Z shoppers, creator endorsement outperformed brand-owned messaging in every category we tested.

01Audience signal

Trust follows the face, not the logo

Shoppers discount brand claims they can't attribute to a person. The effect is strongest where products touch skin — skincare and fragrance — and weakest in accessories.

Metric rowSpec-sheet seams; label above; one .key
Intent lift
3.1×
0.4 vs Q2
Panel size
1,200
Simulated personas
Accuracy
87%
vs. live A/B
Turnaround
48h
6h slower
CalloutsInsight once per section · ask once per document · risk/warn by inset bar
InsightShift 30% of brand-owned spend into creator seeding before the Q4 drop.
RiskCreator fatigue rises after three sponsored posts per month.
The ask

Approve a 10-account pilot by October 24 so results land before Q1 planning.

Table · tagsCaps head over Cloud; Rule rows; numbers right; one key row
SegmentChannelIntentShareΔ vs Q2
Creator-ledRecommended62%41%18 pts
Peer reviewsOrganic48%27%6 pts
Brand-ownedPaid21%32%4 pts
All channels44%100%+7 pts
Quote · persona · spec list · timelineSimulated voices cite the persona, never pass as human research

“If someone I follow actually uses it, I'll try it. If it's just the brand talking, I scroll.”

— Maya · Simulated Gen-Z shopper
MR
Maya Reyes
21 · Austin · skincare-first
Creator-ledValue-seeking
Reviews from people with my skin type beat any ad.
Panel
1,200 simulated personas, US, 18–26
Fieldwork
2026-09-28 → 2026-10-02
Method
Paired-stimulus exposure, intent on a 7-point scale
Owner
Insights team
  1. Sep 28Panel calibrated
  2. Oct 02Fieldwork closed
  3. Oct 07 · nowReadout to brand team
ChartsLight: Day highlights, the ramp steps down · Dark: Seagrass highlights
0204060 62%48%33%21% CreatorPeerRetailBrand
Fig 01Creators lead purchase intent across sources.Source: Socialtrait panel, n=1,200
Creator-led 62Brand-led 21 W1W2W3W4W5W6
Fig 02The gap widens every week.Source: Socialtrait panel
Buttons · codeOne primary per viewport · on dark the primary becomes the signal
Artifactstemplates/

Copy a template. Edit the content. Ship.

Light does the work. Dark makes the moment.

Seagrass marks what matters