RedRiverProperties
REFERENCE / 00

One styleguide — every brick we build with.

A live audit of every primitive in the system, plus a set of new elements proposed to round out the kit. Every section is hand-built from the same tokens.

Start at foundations → Jump to new elements ↗
01 / Foundations

Tokens, palette, geometry.

The foundation tokens drive every element below. Reference these by their CSS variable when adding new components.

Heat (brand)

heat-50
#fff5ef
--color-heat-50
heat-80
#fa8a5b
--color-heat-80
heat-100
#f26625
--color-heat-100
heat-120
#eb3424
--color-heat-120
heat-dark
#b53d0f
--color-heat-dark

Ink & surface

accent-black
#0a0a0a
--color-accent-black
accent-black-soft
#141414
--color-accent-black-soft
background-base
#fdfdfd
--color-background-base
background-darker
#f9f9f9
--color-background-darker
border-faint
#ededed
--color-border-faint
border-muted
#dbdbdb
--color-border-muted
border-strong
#c8c8c8
--color-border-strong
border-dark
#1f1f1f
--color-border-dark

Accents

green-100
#42c366
--color-green-100
blue-100
#2a6dfb
--color-blue-100
purple-100
#9061ff
--color-purple-100
yellow-100
#ecb730
--color-yellow-100

Black alpha layers

2%
4%
5%
7%
16%
32%
40%
48%
56%
64%
72%

White alpha layers

4%
7%
16%
32%
48%
64%
72%

Radii

--radius-4
--radius-6
--radius-8
--radius-10
--radius-12
--radius-16
--radius-20

Spacing & layout

.cmw-container max-width 1240px · padding 1rem (mobile) → 3.5rem (lg+)
.section-pad clamp(2rem, 5vw, 4.5rem) top/bottom
scroll-margin 90px on every section[id]

Fonts

--font-display
Inter Tight — Display 600
--font-sans
Inter — Body 400
--font-serif
Instrument Serif — italic accent
--font-mono
JetBrains Mono — labels & metadata

Focus ring

:focus-visible — tab to focus
02 / Typography

Scale & treatment.

Titles

.text-title-h1
Capital, operations, and intelligence on one OS.
.text-title-h2
A sharper bet on real assets.
.text-title-h3
The platform stack at a glance.
.text-title-h4
A subhead that anchors a card.
.text-title-h5
An inline section divider.

Body

.text-body-x-large

Lead paragraph for hero sections that need air.

.text-body-large

Default reading size for long-form copy.

.text-body-medium

Used inside cards and meta blocks.

.text-body-small

Footnotes, captions, and dense table copy.

Labels & mono

.text-label-x-large Active mandate
.text-label-large Active mandate
.text-label-medium Active mandate
.text-label-small Active mandate
.text-label-x-small Active mandate
.text-mono-small PIPELINE / 04
.text-mono-x-small DALLAS · MUMBAI · MANAGUA

Accents & treatments

.serif-italic a quietly expressive serif
.text-heat brand-orange ink
.text-heat-soft soft heat
.outline-text Hollow display
prose · long-form

The Tailwind @tailwindcss/typography plugin is loaded — wrap any long-form content in .prose to get cohesive copy spacing.

  • Lists, blockquotes, and code render correctly
  • Width caps stay readable at any viewport
03 / Buttons

Pressable surfaces.

.fc-btn-primary
.fc-btn-heat
.fc-btn-ghost
.fc-btn-primary.fc-btn-lg
.fc-btn-heat.fc-btn-lg
disabled
loading
.sg-btn-icon
.sg-btn-group
link button + arrow
Read the report ↗
04 / Forms

Inputs & controls.

Form primitives styled on the same tokens as the rest of the system. States cover focus, error, success, disabled, and read-only.

Input types

Select / textarea

Select variants

Pill segmented (custom)

Prefix & suffix

States

Choice controls

Risk profile (radio)
Sectors (checkbox)
Notifications (.sg-switch)
Allocation slider — 42%
Drag to adjust target weighting.

Inline form & submit row

Field group / fieldset

Mailing address
05 / Chips & Badges

Small signals.

.fc-chip
v1.0 — april '26
.fc-chip-heat
active mandate
.fc-eyebrow
platform / 02
.sg-status (live/draft/etc)
Live Draft Pending Error Archived
deletable .sg-tag
Hospitality Care Industrial
notification badge
06 / Cards

Surfaces for content.

.fc-card variants

.fc-card

Default surface

Soft border on a white surface. Lifts on hover.

.fc-card-soft

Soft tile

A muted background variant for dense grids.

.fc-card-dark

Inverted statement

Black surface for emphasis or a closing CTA.

.fc-card-heat

Heat highlight

A signature gradient. Reserve for one moment per section.

Card with hover overlay (.group + .group-fade)

.group-fade

Hover anywhere on me

A subtle dark wash appears on hover via the group-fade overlay.

open →

.leader-card

AS
Founding partner

Ashwin S.

Capital architecture, redevelopment, and the cross-border deal flow that anchors the network.

Mandates
M01 Hospitality redevelopment M02 Cross-border capital stack

.manifesto-card · .manifesto-card-compact

01

One operating system.

Every layer of the firm — capital, operations, intelligence — runs on a shared spine.

principle read →
02

Field is the source of truth.

Compact variant — fits inside denser grids.

compact read →

.hub-card

DALLAS

Execution HQ

Pilots, capital deployment, partner ops.

Image card with .hero-frame

Hero frame demo

Animated conic-gradient border (paused under prefers-reduced-motion).

.tile-grid-border

01
Tile 1

A card in a bordered grid layout.

02
Tile 2

A card in a bordered grid layout.

03
Tile 3

A card in a bordered grid layout.

04
Tile 4

A card in a bordered grid layout.

05
Tile 5

A card in a bordered grid layout.

06
Tile 6

A card in a bordered grid layout.

07 / Tables & Lists

Structured data.

Data table

PilotRegionStatusCapitalIRR
Whitestone CrossingDallas, TXLive$8.4M22%Open
Trailside OaksDallas, TXPending$6.1M19%Open
Sea MistManaguaDraft——Open
Andheri EastMumbaiArchived$2.0M14%Open

Definition list

Network HQ
Dallas, Texas — execution, capital deployment, partner ops
Capital hubs
Mumbai (redevelopment), Managua (hospitality & care)
Founding date
2024 — first mandate signed Q3
Disclosure
Informational only. Past performance does not guarantee future results.

Bullet & numbered lists

  • Capital — aligned across vehicles
  • Operations — single SOP backbone
  • Intelligence — shared underwriting brain
  • Network — Dallas, Mumbai, Managua
  1. Contact — tell us what you are trying to build
  2. Diligence — capital and operating fit mapped
  3. Mandate — terms scoped and signed
  4. Pilot — on-the-ground execution
09 / Overlays

Modal, drawer, popover, toast.

Modals

confirmation modal
modal with form
large modal

Drawer (slide-in)

right drawer

Tooltip · Popover · Kbd

tooltip — hover
IRR (target) Internal rate of return — gross of fees.
popover — click
.sg-kbd
⌘K to search

Toast

success
error
10 / Feedback

Status & loading.

Callout banners (.sg-alert)

!
Pilot allocation closes Friday.
Capital LPs have until 17:00 CT to confirm.
i
New diligence template available.
Replace the V3 worksheet on your next mandate.
✓
Whitestone pilot underwriting locked.
Approved by capital and ops.
⚠
Vendor SLA approaching breach.
Trailside HVAC partner is 3 days from review.

Banner (full-width)

Heads-up Maintenance window — Sunday 02:00 UTC, expected ~30min.

Inline form error

!
Couldn't submit — fix 2 fields and try again.
  • Email format is invalid
  • Allocation must be at least $50,000

Progress

linear · 64%
indeterminate
circular

Spinner

.sg-spinner (default)
.sg-spinner.sg-spinner-sm

Skeleton loader

Empty state

No pilots yet

When a mandate goes live it'll appear here with field reports and capital status.

11 / Interactive

Tabs, accordion, divider.

Content tabs

Whitestone Crossing is a multifamily redevelopment in Dallas with a 22% target IRR and a 36-month exit window.

Accordion

Capital flows through a unified vehicle structure with mandate-specific terms — LPs commit once, then opt into pilots.

Dividers

section break
12 / Decoration

Backgrounds & rules.

.bg-dots
.bg-dots-heat
.crosshair-bg
.heat-glow
.rails + .plus-mark
.dash-rule
.manifesto-grid-bg
.press · click me

.hero-blend

without
.hero-blend
13 / Patterns

Composed pieces.

.frag-cloud → .unified-bar

SOPsCapExIRRGP/LPPMSCMSNOILeaseUnderwritingVendorCapex 02
01 Capital
02 Operations
03 Intelligence

.engage-step

  • 01 /04
    Contact

    Tell us what you are trying to build.

  • 02 /04
    Diligence

    We map fit, capital, and operating shape.

  • 03 /04
    Mandate

    Working terms, signed and scoped.

  • 04 /04
    Pilot

    On-the-ground execution starts.

14 / Motion

Components & animations.

<Reveal> · <SplitText>

<Reveal>
Fades up on intersection.
<SplitText>
Words sweep in one by one.

<CountUp>

to=2_500_000 prefix=$
$0
to=24 suffix=%
0%

<Marquee>

CAPITAL OPERATIONS INTELLIGENCE PILOTS NETWORK CAPITAL OPERATIONS INTELLIGENCE PILOTS NETWORK

<Carousel>

Pilot field 1
01 / 03

Swipe-enabled image rotator with auto-advance, per-slide progress bar, and pointer drag.

  • Pauses on hover
  • Keyboard arrow nav
  • 50px swipe threshold

<StickyStack>

01
CAPITAL

Aligned, structured capital

A single capital spine across mandates, jurisdictions, and currencies.

  • LP/GP modeling
  • Cross-border vehicles
02
OPERATIONS

Field-grade operating layer

Pilots run on the same SOPs that the platform learns from.

  • Asset SOPs
  • Vendor coverage
03
INTELLIGENCE

AI-native decision layer

Capital and operations both report into a shared brain.

  • Underwriting agents
  • Field telemetry

Layers pin in turn as you scroll past them — used on the platform page.

.arrow-spring

hover the link
Read the report ↗
15 / New & Proposed

Where the system can grow.

Many of the elements proposed here have already been promoted into earlier sections. This section keeps the most distinctive new compositions — quote, timeline, stat block, avatar group — as a sandbox to keep iterating.

Stat blocks

$0M
Capital deployed
0
Field nodes
0%
Net IRR (target)
0
Pilots live

Avatar group

AS MR JK +4

Pull-quote

Real assets are won on the ground — but compounded by the system that ties the field back to capital.

— Founding partner letter, 2026

Code block

<a href="/contact" class="fc-btn fc-btn-heat">
  Partner with us
  <span class="arrow-spring">↗</span>
</a>

Timeline

  1. 2024
    Founding mandate

    Initial capital architecture committed.

  2. 2025
    Network seeded

    Dallas, Mumbai, and Managua hubs activated.

  3. 2026
    Pilot wave

    Whitestone & Trailside underwritten and deployed.

  4. 2027
    Platform v2

    AI-native ops layer rolls to all mandates.

End of styleguide · v1.1
brand kit