Start here

Vadera Pulse · Developer documentation

Everything needed to understand, extend, and ship the Pulse mobile app. The interactive prototype is the working spec: every screen below opens live, and every visual decision is documented here · colors, type, components, and the rules the product must never break.

Run the prototype

All 30 screens, framed in an iPhone, with an admin jump menu.

Open app ↗

New here?

Read Product rules first · ten constraints that define Pulse · then walk the onboarding flow in order.

Product rules →

What Pulse is

A verified influence score for creators · think credit score, not follower count. One number, 0–99, computed every morning at 7:00 AM from five live signals pulled read-only from the creator's own connected accounts. The score gates a brand marketplace, powers a shareable verified profile, and is coached by an AI that reads the user's live data.

Stack pointers

Prototype: single self-contained HTML (this site, /app/) · the source of truth for UI and behavior.
Mobile codebase: Flutter · Vadera-Projects/vadera-unit-app on GitHub.
Design file: Figma project "Vadera Pulse · App v2" (imports from this site's deep links).
Backend/engine: Vadera server via Plesk; credentials held by Angel · never committed, never on this site.

Start here

Quickstart

1 · Open any screen

Every screen has a stable id. Append ?s=<id> and the app opens there · bare screen, no admin chrome, at whatever viewport you request. This is what Figma imports and what you develop against.

https://vadera.onenos.ai/app/vadera-pulse-app.html?s=score

2 · Full prototype mode

Open without ?s= for the framed iPhone plus the admin bar (theme toggle + screen jumper). The admin bar is prototype tooling only · it never ships.

3 · The screen map

The sidebar lists every screen grouped by flow, each with its behavior notes and live link. Ids are shared across the prototype, Figma frame names, and this documentation · one vocabulary everywhere.

Confidential

Internal Vadera Capital documentation. Do not share links outside the team. All outputs are drafts until human review.

Start here

Product rules

Ten constraints that define Pulse. Code that violates any of these is wrong even if it works.

Five live signals, fixed weights: Engagement 30% · Consistency 25% · Growth 15% · Depth 15% · Reach 15%. Any "sixth pillar," "Dominance," or "Standing tab" copy is stale · delete on sight.
Connections add data, never points. No score bonus for connecting a platform. Coverage raises confidence; behavior raises the score.
Consent-state aware. Every input is the user's own account via official read-only OAuth. Token lapses → that platform's inputs leave the score immediately, return on reconnect. No scraping. Never score a non-consenting person.
One score a day, 7:00 AM. Copy says "new score every morning." Never expose the cron time in UI.
Asymmetric emotion. Up-moves celebrate (count-up + confetti). Down-moves stay neutral · gray delta, no red, and always paired with a recovery action.
No named leaderboards. Standing is an anonymized percentile band. Head-to-head exists only as mutual-consent Circles.
The ceiling is earned. 99 is near-impossible by design; simulator is behaviors-only and estimates taper when stacked.
Launch platforms: TikTok, Instagram, Facebook. YouTube/X/Snapchat are waitlist copy only.
No real brand names anywhere in product. Fictional sample campaigns only ("Example campaigns · brands onboarding now") until partners are signed.
Support is in-app tickets with support chat threads. No support email path anywhere in product. Sender identity is always "VADERA SUPPORT", never a staff name.
Profiles: the switcher only exists when there is something to switch. One profile means zero switching chrome anywhere. See "Profiles & switching" for the full state table.

Start here

Core flows

First run

Welcome → Register (ToS checkbox, optional invite code) → Verify email → Profile setup (handle, photo, up to 3 niches) → Tour (4 cards, skippable) → Connect checklist (2+ encouraged, skippable) → Computing (~5s staged) → Notification primer → Score reveal with count-up.

Daily loop

7 AM push → open → count-up (+confetti if up) → Today's Move → done inside a minute. The Coach orb ripples only when it holds a fresh insight; opening Coach consumes the state.

Monetization

Free: 5 Coach messages + 3 simulator runs/month → paywall fires on the 6th → Pro $7.99 / Founding $17.99 (yearly −20%, $100 bonus on Founding annual).

Growth

Public profile = Linktree-style landing page; every visitor sees Join Pulse. Rewards: qualified referral = signup + 2 connections; tiers at 5/15/25 on a rolling 30-day window.

Design system

Colors

Two palettes exist. Do not mix them.

The PRODUCT palette below is for the app and product web. The CORPORATE palette (purple #6C63FF, gold #D4AF37, navy #1A1D2E, Arial) is for legal/investor documents only.

Product palette

Token	Hex	Use
--bg	`#0f0b1a`	App background (dark)
--card	`#1a1630`	Cards, surfaces
--card2	`#241d40`	Raised surfaces, chips
--pb	`#c084fc`	Primary purple (bright)
--purple	`#a855f7`	Purple (solid controls)
--mg	`#e879c2`	Magenta-pink (gradient end)
--gold	`#f4c97a`	Tier, Founding, payouts
--green	`#34d399`	Live, success, up-moves
--red	`#fb7185`	Destructive only · never for score drops
--t1	`#f3f0fa`	Primary text
--t2	`#b8a8d4`	Secondary text
--t3	`#8d80a8`	Muted text, labels

The signature gradient

background: linear-gradient(90deg, #c084fc, #e879c2);

Used on: score ring stroke, primary CTAs, headline serif accents, the Market jewel, avatars. Purple-to-pink · the old purple-to-gold gradient is corporate-docs only.

Light mode

--bg:#f7f5fc; --card:#ffffff; --card2:#ece5fa;
--t1:#191428; --t2:#41395c; --t3:#6b6287;
/* accents shift darker for contrast: green #0d8a5f, red #d63a56, gold #a9812e */

Design system

Typography

Face	Role	Notes
Inter	UI text, body, labels	400 / 600 / 700 / 800
Fraunces italic	Display accents, plan names, "pulse." wordmark	Always italic 600, often gradient-clipped
Outfit	Every number · scores, prices, counters	600, tabular-nums, letter-spacing −.01em. Never a coding mono.
Comfortaa	"vadera" wordmark stand-in	Replace with the licensed brand font in production

Wordmark construction

<span class="wordmark">vadera<em>pulse.</em></span>

.wordmark{font-family:'Comfortaa';font-weight:700;font-size:18px;color:var(--t1);
  display:inline-flex;align-items:center}
.wordmark em{font-family:'Fraunces',serif;font-style:italic;font-weight:600;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

Voice

Never "Good morning" anywhere in product. Approved: Good day, Good afternoon, Good evening, Hey, Welcome back. Time-of-day runs on the viewer's local time.
Direct, no filler, no emojis in system copy. Ritual language over system language ("new score every morning", never "updates daily at 7:00").

Design system

Components

Extract these as Figma components and code modules · they repeat across the app. All live examples are in the prototype; inspect with devtools for exact values.

Score ring

<svg width="122" height="122" viewBox="0 0 122 122" style="transform:rotate(-90deg)">
  <circle cx="61" cy="61" r="53" stroke="var(--b1)" stroke-width="8" fill="none"/>
  <circle cx="61" cy="61" r="53" stroke="url(#g)" stroke-width="8" fill="none"
    stroke-dasharray="333" stroke-dashoffset="86.6" stroke-linecap="round"/>
</svg>
<!-- dashoffset = 333 × (1 − score/100). Count-up animates 0→score in 900ms ease-out;
     fire confetti ONLY when the daily delta is positive. -->

Signal row

Name + weight chip, score + delta arrow (green ▲ / red ▼ / gray ·), 4px gradient bar, collapsible note. Down deltas use the muted treatment on the Score screen itself.

Deal card (Marketplace)

Full-viewport width, snap-align center; 150px brand hero with badge chip bottom-left; payout top-right in Outfit; full-width gradient Apply CTA. Rail = flex, scroll-snap-x mandatory, with pagination dots synced on scroll.

Coach orb

52px gradient FAB above the tab bar on Score and Feed. Glyph: center dot + two concentric rings. State: still = nothing new; center-out triple ripple = new insight; opening Coach clears it. No badge dots.

Floating tab bar

Detached pill, blur 22px, 5 slots, Market jewel raised −22px in the center with gradient orb. Hides on scroll-down, returns on scroll-up. Order is fixed: Score · Feed · ⬤Market · Messages · Profile.

Chips, toggles, ticket bubbles

Niche chips (999px radius, gradient when selected, max 3); iOS-style 46×26 switches; chat bubbles shared by Coach, Messages, and Support tickets (admin messages carry a purple name tag).

Build

Build a new screen

Every screen in the prototype follows one skeleton. Copy it, and the screen automatically gets deep-linking, admin-menu access, clean import mode, and tab-bar behavior.

1 · The skeleton

<section class="screen" id="scr-YOURID">
  <div class="topbar">
    <span class="back" onclick="go('profile')">‹ Back</span>
  </div>
  <h1>Screen title</h1>
  <div class="sub" style="margin-bottom:14px">One-line purpose.</div>

  <div class="card">…content…</div>
</section>

2 · Register it

Add an <option value="YOURID"> to the admin menu select.
If it's a flow screen (no tab bar): add the id to the onboarding array.
Main-tab screens get a button in <nav> with id nb-YOURID · but the five tabs are fixed; new screens are subscreens.

3 · It's now addressable

…/vadera-pulse-app.html?s=YOURID   ← live, clean, Figma-importable

4 · Rules checklist before you ship it

Both themes readable (flip with the admin ◐).
Numbers in Outfit via .mono; display accents in Fraunces via .serif.
No connect-points, no leaderboards, no red on score drops, no "six pillars".
Empty state designed if the screen depends on network/content.
Figma frame named exactly YOURID after import.

Build

Profiles & switching

Founding members can run up to 3 Profiles. One Profile = one persona = at most one account per platform. Every Profile has its own Pulse score, history, Coach context, marketplace eligibility, public page, and member card. Scores are never blended across Profiles: brands book personas, not bundles, and a verified 74 must mean one identity.

The rule (Meta pattern)

The switcher only exists when there is something to switch. Instagram shows no account chevron with one account; the affordance appears when account #2 does, while the add path waits in settings. Switching UI for a state that does not exist reads as clutter or a bug.

State table

Surface	1 profile (every user at signup)	2+ profiles
Score screen pill	Hidden entirely. No switching chrome.	"@handle · 74 ▾" pill above the hero card. Tap opens the sheet.
Bottom sheet	Reachable only from settings. Shows the one profile + "Add profile" row ("1 of 3 used").	All profiles with live score chips, checkmark on active, "Add profile" row ("2 of 3 used").
Profile settings row	"Profiles · Add a profile · up to 3 with Founding" (doubles as the Founding upsell for free users)	"Profiles · 2 of 3 used · switch or add · Founding"
Sheet eyebrow	YOUR PROFILE · FOUNDING	YOUR PROFILES · FOUNDING

What switching swaps

Everything. Score ring, delta, count-up, Coach context, Marketplace eligibility and applications, public profile URL, member card, connect checklist scope, notification tagging. There is no partial switch.

See both states live

Multi-profile demo:  app/vadera-pulse-app.html?s=score
Single-profile demo: app/vadera-pulse-app.html?s=score&profiles=1

The profiles=1 parameter trims the demo account to one profile so the single state is inspectable and Figma-importable. It is demo tooling only; production derives the state from the user's real profile count.

Implementation notes (prototype)

PROFILES = [...]            // the account list; production: from API
pillCheck()                 // runs on load; single = PROFILES.length < 2
  · hides .acctpill when single
  · hides the second sheet row, flips eyebrow and settings copy
switchProfile(i)            // swaps score, delta, ring, checkmarks, then re-runs countUp()

Ship rule

Any new surface that shows identity (score, card, public page, notifications) must read the active Profile, and must render nothing switcher-related when the user has one profile. If you add a screen, test it at both demo URLs before merging.

Build

Figma workflow

Project: Vadera Pulse · App v2 → file Pulse App · Screens (from prototype). Pages: 00 Cover · 01 Onboarding · 02 App screens (Figma free tier caps at 3 pages · subscreens and states live as sections on page 02).

Importing screens

Plugin: html.to.design (free = 10 imports / 30 days; Pro adds batch).
Select the target page first · imports land on the active page.
Viewport 390. Paste the screen's ?s= URL. Import.
Rename the imported section to the screen id. Frame names = screen ids = doc ids here. One vocabulary.

Division of labor

UX adjustments happen in Figma (Saiedoz). Behavior and copy truth lives in the prototype. When they disagree, flag it · don't silently fork.

Motion isn't in Figma

Count-up, confetti, coach-orb ripple, computing sequence, and tab-bar hide exist only in the live prototype. Annotate Figma frames with the live URL for motion reference.

Build

Downloads

Everything, one file

Prototype + offline docs + README + screen-id map. Give this single zip to any new developer.

Download the complete bundle ↓

Prototype · all screens

Self-contained HTML. Admin bar + framed iPhone when opened directly; bare screens via ?s=.

Download ↓

Open in browser

Hosted copy of the same file.

Open ↗

Repos & assets

Flutter app: Vadera-Projects/vadera-unit-app
Brand fonts: Inter, Fraunces, Outfit via Google Fonts; licensed wordmark font · request from Angel.
Logo files: request the white and gradient lockups from Angel; do not extract from screenshots.

Screens / Onboarding

Welcome

Product entry. vadera pulse wordmark, single CTA to register, sign-in link, consent promise, Vadera Capital corporate footer.

Open it live

Deep link renders the bare screen (no admin bar, no bezel) at any viewport · the same URL the Figma plugin imports.

https://vadera.onenos.ai/app/vadera-pulse-app.html?s=welcome

Vadera Pulse · Developer documentation

What Pulse is

Stack pointers

Quickstart

1 · Open any screen

2 · Full prototype mode

3 · The screen map

Product rules

Core flows

First run

Daily loop

Monetization

Growth

Colors

Product palette

The signature gradient

Light mode

Typography

Wordmark construction

Voice

Components

Score ring

Signal row

Deal card (Marketplace)

Coach orb

Floating tab bar

Chips, toggles, ticket bubbles

Build a new screen

1 · The skeleton

2 · Register it

3 · It's now addressable

4 · Rules checklist before you ship it

Profiles & switching

The rule (Meta pattern)

State table

What switching swaps

See both states live

Implementation notes (prototype)

Figma workflow

Importing screens

Division of labor

Motion isn't in Figma

Downloads

Repos & assets

Welcome

Sign in

Register

Verify email

Profile setup

Welcome tour

Connect checklist

Computing score

Notification primer

Score (home)

Feed

Marketplace

Messages

Profile

Coach

Coach paywall

Connect accounts

Public profile & links

Member card

Trends

Choose your plan

Rewards

Privacy & data

Support & tickets

Ticket thread

Requests

Blocked accounts

Your Circles

Security

Deal detail

Score delayed

Search

Report

Brand DM thread

Creator profile (viewer)

Why my score (dispute)