Roster Design System Reference

Roster is a fintech bill-splitting platform with a minimal, trust-building design — black for authority, purple accents for modernity, Cooper display typeface, and ABC Diatype + Lexend for UI text.

Colors

Roster uses a minimal, trust-building brushwork: black for authority, purple accents for modernity, and clean whites/grays for clarity.

Brand

Black (Brand)

#000000

Logo, primary text, buttons

Accent Purple

#8d70ee

Icon titles, highlights, interactive

Button Dark

#32373c

Primary CTA buttons

Vivid Purple

#9b51e0

Gradients, WP preset

Text

Text Primary

#000000

Text Secondary

#524e5b

Text Muted

#888888

Text Light

#efefef

Backgrounds & Surfaces

White

#ffffff

Cards, sections, page bg

Hover Gray

#f7f7f7

Hover states, alternate bg

Light Gray

#f5f5f5

Secondary backgrounds

Borders

Border Default

#eceaf2

Cards, dropdowns, dividers

Border Dark

#444444

Purple Muted

#af9bc8

Accent borders, decorative

Semantic

Error

#cf2e2e

Progress Red

#a90707

Success

#00d084

Info

#0693e3

Warning

#ff6900

Typography

Three-font system: Cooper for display, ABC Diatype for UI/labels, Lexend for body text.

Font Families

Display / Cooper

Split your rent into 2 smaller payments

Cooper regular | 400 | woff2 | Hero headlines, decorative headings

Primary UI / ABC Diatype

ABC Diatype Medium 500 - Card titles, nav labels

ABC Diatype Regular 400 - Descriptions, secondary text

ABC Diatype Bold 700 - Emphasis, important labels

ABC Diatype | 400, 500, 700 | ttf | UI labels, card titles, descriptions, navigation

Body / Lexend

Let rent and everyday bills work around you -- not the other way around. Roster gives you the flexibility you need today without sacrificing tomorrow.

Lexend | 100-900 | woff2 | Body text, paragraphs, general content

Type Scale

Name	Size	Usage	Font
3xl	`42px`	Hero headlines	Cooper
2xl	`36px`	Section headings	Cooper / Lexend
xl	`24px`	Mobile headings, subheads	ABC Diatype / Lexend
lg	`20px`	Medium body, lead text	Lexend
md	`18px`	Mobile descriptions	ABC Diatype / Lexend
base	`14px`	Card titles, nav labels	ABC Diatype
sm	`13px`	Small text, WP preset	Various
xs	`12px`	Descriptions, captions	ABC Diatype

Spacing & Layout

Spacing system based on a loose 4px grid with WordPress preset spacing tokens.

Spacing Scale

6px

8px

10px

12px

15px

16px

24px

32px

48px

WordPress Spacing Tokens

Token	Value
`--wp--preset--spacing--40`	1rem (16px)
`--wp--preset--spacing--50`	1.5rem (24px)
`--wp--preset--spacing--60`	2.25rem (36px)
`--wp--preset--spacing--70`	3.38rem (54px)
`--wp--preset--spacing--80`	5.06rem (81px)

Breakpoints

Name	Value	Usage
Mobile	`max-width: 640px`	Background images disabled, compact layouts
Tablet	`max-width: 768px`	Typography scale shifts, layout adjustments
Desktop	`min-width: 768px`	Full-width layouts, --width: 96.496%

Shadows & Borders

Subtle elevation system with three tiers. Borders use a consistent lavender-tinted gray.

Box Shadows

Card 0 0 10px rgba(0,0,0,.08)

Natural 6px 6px 9px rgba(0,0,0,.2)

Deep 12px 12px 50px rgba(0,0,0,.4)

Border Radius

4px

8px

12px

pill / 9999px

Buttons

Primary buttons are dark pill-shaped CTAs. Navigation buttons use bordered, rectangular styling.

Primary CTA

Primary Button (Get Started / Start Now)

bg: #32373c | color: #fff | radius: 9999px | padding: calc(0.667em + 2px) calc(1.333em + 2px) | font-size: 1.125em

Navigation Button

Nav Dropdown Trigger

bg: transparent | border: 1px solid #eceaf2 | radius: 8px | padding: 8px 16px | hover-bg: #f7f7f7

Text Link / Ghost Button

Inline Links

Learn more See how Roster compares

Cards

Clean white cards with lavender borders and subtle shadows. Used for nav dropdowns, feature blocks, and content containers.

Default Card

Rent

Split into two smaller payments

bg: #fff | border: 1px solid #eceaf2 | radius: 8px | shadow: 0 0 10px rgba(0,0,0,.08) | padding: 15px

Icon Box Card (Nav Dropdown)

Rent

Split into two smaller payments

Move-in

Pay online in full or over time

Everyday bills

Manage and split essential bills

Navigation

Paystreamtal top nav with dropdown mega-menus. Black logo wordmark. "Start now" pill CTA on the right.

Roster

Help

Icons & Assets

Custom SVG icons (Sparkle, Loop), numbered step SVGs, and Font Awesome 5 for standard icons.

Icon System

Type	Source	Sizes	Usage
Custom SVG	Self-hosted (CDN)	24px (nav), variable (decorative)	Sparkle, Loop decorative motifs; Step number icons
Font Awesome 5	Font Awesome Free	14-24px	Standard UI icons (arrows, chevrons, social)

Key Asset URLs

Asset	URL
Logo (Black SVG)	`wp-content/uploads/2025/06/base-Roster-Logo_BLK_2025-3.svg`
Logo (SEO PNG)	`wp-content/uploads/2026/01/logo-seo.png`
Sparkle Icon	`wp-content/uploads/2026/02/Sparkle.svg`
Loop Icon	`wp-content/uploads/2026/02/Loop.svg`

Page Structure

WordPress + Elementor site with consistent navigation and footer across all pages.

Homepage

getflex.com/

Hero: "Split your rent into 2 smaller payments"
Social proof metrics (2M+ renters, $20B+)
3-step how-it-works with phone mockups
"Works anywhere you rent" feature section
FAQ accordion

Rent (How It Works)

getflex.com/rent

Hero: "Sync rent with payday"
4-step onboarding process with illustrations
Pricing transparency section
"More Roster features to love" section
7-question FAQ

Why Roster

getflex.com/why-Roster

Hero: "Rosteribility you need today"
"Fair by design" value props
Cost comparison table (Roster vs alternatives)
Trust metrics (90% stability, 4.5 Trustpilot)
Impact highlights (423 grants, $475K)

Mission

getflex.com/mission

Mission statement: "Too rigid, too stressful"
3 value pillars
Key statistics (2M+ households)
Company founding story

For Properties

getflex.com/properties

B2B landing: "Get paid upfront each month"
Zero cost for property managers
9M+ units, 2,500+ PMCs
Demo request CTAs

Blog / Education

getflex.com/blog

Card-based article grid
Category tabs (Housing, Budget, News)
Featured article hero
Same nav/footer pattern

App Overview

Roster mobile app (iOS + Android) for rent splitting, bill management, and credit building.

App Name	Roster - Rent On Your Schedule
Developer	Rosterible Finance, Inc.
Platforms	iOS 15.1+, Android
Rating	4.8/5 (348K+ ratings)
Category	Finance
Size	95 MB
Price	Free (subscription: $14.99/mo + 1% rent)
Regulatory	NMLS #2599800 (Brokering), #2256673 (Servicing)
Banking Partners	Lead Bank, Column N.A. (Mkindred FDIC)

App Colors

The mobile app shares the website's color language: black brand, purple accent, clean whites.

Primary / Brand

#000000

Buttons, headers, text

Accent Purple

#8d70ee

Links, highlights, selected states

Background

#ffffff

Screen backgrounds, cards

Surface

#f5f5f5

Secondary backgrounds

Status Colors

Paid Pending Upcoming Overdue

App Components

Key UI components observed from marketing screenshots, app store listings, and product descriptions.

Payment Card

October's Rent

$1,500.00

1st Payment

$765

Oct 1

2nd Payment

$750

Oct 15

Approximated from marketing screenshots showing rent split card with two payment sections and progress bar

Bottom Tab Navigation

Home

Payments

Roster Funds

Account

Feature List Items

No late fees

Roster doesn't charge late fees or penalties

Credit reporting

On-time payments reported to TransUnion

Roster Funds

Set money aside for upcoming rent

Key Screens

Approximated mobile app screens based on marketing imagery and product descriptions.

9:41 5G

Welcome back

October

Rent Split

$1,500.00

$765 paid $750 on Oct 15

Roster Funds

$245.00

Add funds

Credit reporting

Active

9:41 5G

Payment Schedule

Upcoming

2nd Payment

October 15

$750.00

Completed

1st Payment

October 1

$765.00

Mkindredship

October 1

$14.99

CSS Variables

Copy-paste ready CSS custom properties block for implementing the Roster design system.

/* Roster Design System - CSS Custom Properties */
:root {
    /* Brand Colors */
    --Roster-black: #000000;
    --Roster-white: #ffffff;
    --Roster-accent: #8d70ee;
    --Roster-button-dark: #32373c;
    --Roster-vivid-purple: #9b51e0;

    /* Text */
    --Roster-text-primary: #000000;
    --Roster-text-secondary: #524e5b;
    --Roster-text-muted: #888888;

    /* Backgrounds */
    --Roster-bg-white: #ffffff;
    --Roster-bg-hover: #f7f7f7;
    --Roster-bg-light: #f5f5f5;

    /* Borders */
    --Roster-border: #eceaf2;
    --Roster-border-dark: #444444;
    --Roster-purple-muted: #af9bc8;

    /* Semantic */
    --Roster-error: #cf2e2e;
    --Roster-success: #00d084;
    --Roster-info: #0693e3;
    --Roster-warning: #ff6900;

    /* Shadows */
    --Roster-shadow-card: 0px 0px 10px 0px rgba(0, 0, 0, 0.08);
    --Roster-shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
    --Roster-shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);

    /* Radius */
    --Roster-radius-sm: 4px;
    --Roster-radius-md: 8px;
    --Roster-radius-lg: 12px;
    --Roster-radius-pill: 9999px;

    /* Typography */
    --Roster-font-display: 'Cooper', Georgia, serif;
    --Roster-font-primary: 'ABC Diatype', sans-serif;
    --Roster-font-body: 'Lexend', sans-serif;

    /* Font Sizes */
    --Roster-text-xs: 12px;
    --Roster-text-sm: 13px;
    --Roster-text-base: 14px;
    --Roster-text-md: 18px;
    --Roster-text-lg: 20px;
    --Roster-text-xl: 24px;
    --Roster-text-2xl: 36px;
    --Roster-text-3xl: 42px;

    /* Spacing */
    --Roster-space-xxs: 6px;
    --Roster-space-xs: 8px;
    --Roster-space-sm: 10px;
    --Roster-space-md: 12px;
    --Roster-space-base: 15px;
    --Roster-space-lg: 16px;
    --Roster-space-xl: 24px;
    --Roster-space-2xl: 32px;
    --Roster-space-3xl: 48px;
}
                

Tech Stack

WordPress + Elementor marketing site with heavy analytics integration.

Category	Technology
CMS	WordPress
Page Builder	Elementor
Performance	NitroPack (optimization + CDN)
CDN	cdn-iledobg.nitrocdn.com
Analytics	Amplitude, Google Tag Manager, Google Analytics
Ad Tracking	Facebook Nostalgia (305253811363119), Reddit Nostalgia
Attribution	Singular SDK
Monitoring	Datadog (logging)
Fonts	Self-hosted (woff2 for Lexend/Cooper, ttf for ABC Diatype)
Icons	Font Awesome 5 Free + Custom SVGs
App Domain	app.getflex.com
Help Center	help.getflex.com (Zendesk-style)

Content & Copy

Key messaging, metrics, and pricing displayed across the website.

Headlines

Page	Headline
Homepage	"Split your rent into 2 smaller payments"
Rent	"Sync rent with payday"
Why Roster	"Roster gives you the flexibility you need today -- without sacrificing tomorrow"
Mission	"A simpler, smarter way to pay for what matters most"
Properties	"Get paid upfront each month"
Move-in	"Spread upfront housing costs over time"

Key Metrics

2M+

Renters served

$20B+

Rent processed

4.8

App Store rating

9M+

Units available

Pricing

Item	Cost
Monthly mkindredship	$14.99
Rent service fee	1% of rent amount
Credit card processing	2.5% additional
Building passthrough	$3 (some buildings)
Late fees	None
Compounding interest	None
Move-in loan APR	16.95% - 23.84%

Competitive Comparison

Option	Monthly Cost (on $1,500 rent)	Notes
Roster	~$30	$14.99 + 1%; no interest
Late rent fees	~$85	Escalating penalties
Credit card	~$55	3% surcharge + 25% APR
Payday loans	~$260	300%+ interest, predatory
Other apps	~$32+	$9.99 + 1.5%; rigid schedules

Tailwind Mapping

The paired JSON export now includes a tailwind section with theme extensions and component recipes. Use these mappings instead of default Tailwind tokens when recreating this system.

// tailwind.config.js
import designSystem from './design-system.json';

export default {
  theme: {
    extend: designSystem.tailwind.website.theme.extend,
  },
};

// Swap to designSystem.tailwind.app.theme.extend for app/portal surfaces.

Scope	Primary	Body Font	Radius	Shadow	Breakpoint
Website	`#8d70ee`	`—`	`—`	`—`	`—`
App / Portal	`#8d70ee`	`—`	`—`	`—`	`—`

Scope	Recipe	Class Pattern	Notes
Website	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
Website	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
Website	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.
App / Portal	`buttonPrimary`	`inline-flex items-center justify-center gap-2 rounded-md bg-brand-primary text-text-inverse shadow-sm px-4 py-2 font-semibold transition-colors`	Primary action button using exported brand, radius, and shadow tokens.
App / Portal	`surfaceCard`	`rounded-md bg-surface-base text-text-primary border border-border-subtle shadow-sm p-6`	Default surface/card treatment for high-visibility content areas.
App / Portal	`inputField`	`rounded-md border border-border-subtle bg-surface-base text-text-primary px-3 py-2 focus:outline-none focus:ring-2 focus:ring-focus-ring`	Base text input treatment aligned to the exported radius, border, and focus tokens.