RICH TEXT

WIP

F1-RICH

.f1-richutilities.css — unified prose structure

SAME CONTENT — THREE SCALES

Chat text-base (14px) · lh 1.75

Portfolio Review — Q1 2026

Your portfolio is up 12.4% YTD, outperforming the S&P 500 by 3.2 percentage points. Duration-sensitive names benefited from the softer-than-expected CPI print, with rate-cut odds now at 68%.

Technology — 42% allocation
- NVDA — 14% (trim candidate)
  - Data center revenue up 122% YoY
  - Valuation stretched at 35x forward
- AAPL — 12% (hold through earnings)
- MSFT — 10% (Azure re-acceleration)
Healthcare — 18% allocation
- UNH — 10%
- LLY — 8% (GLP-1 thesis intact)
Cash & equivalents — 12%

Rebalance Plan

Reduce concentration risk
1. Sell 200 shares NVDA at $925 limit
  1. Set GTC order, do not market sell
  2. Trail stop remaining 350 shares at $880
2. Trim AAPL by 100 shares at market
Redeploy into laggards
1. Add 50 AMZN at $178.50 limit
2. Add 200 XLU for defensive exposure

Earnings season playbook:

Pre-earnings — preparation steps
1. Review consensus estimates vs whisper numbers
2. Check implied move from options pricing
Post-earnings — wait 15 minutes before trading

The market can stay irrational longer than you can stay solvent.

Here's the API call to fetch positions:

fetch('/api/portfolio/positions', {
  headers: { 'Authorization': 'Bearer ' + token }
})
  .then(res => res.json())
  .then(data => console.log(data))

Returns an array of Position objects with ticker, shares, and avgCost fields.

Next catalyst: FOMC meeting on April 2. Expect elevated volatility.

Project text-lg (16px) · lh relaxed

Portfolio Review — Q1 2026

Your portfolio is up 12.4% YTD, outperforming the S&P 500 by 3.2 percentage points. Duration-sensitive names benefited from the softer-than-expected CPI print, with rate-cut odds now at 68%.

Technology — 42% allocation
- NVDA — 14% (trim candidate)
  - Data center revenue up 122% YoY
  - Valuation stretched at 35x forward
- AAPL — 12% (hold through earnings)
- MSFT — 10% (Azure re-acceleration)
Healthcare — 18% allocation
- UNH — 10%
- LLY — 8% (GLP-1 thesis intact)
Cash & equivalents — 12%

Rebalance Plan

Reduce concentration risk
1. Sell 200 shares NVDA at $925 limit
  1. Set GTC order, do not market sell
  2. Trail stop remaining 350 shares at $880
2. Trim AAPL by 100 shares at market
Redeploy into laggards
1. Add 50 AMZN at $178.50 limit
2. Add 200 XLU for defensive exposure

Earnings season playbook:

Pre-earnings — preparation steps
1. Review consensus estimates vs whisper numbers
2. Check implied move from options pricing
Post-earnings — wait 15 minutes before trading

The market can stay irrational longer than you can stay solvent.

Here's the API call to fetch positions:

fetch('/api/portfolio/positions', {
  headers: { 'Authorization': 'Bearer ' + token }
})
  .then(res => res.json())
  .then(data => console.log(data))

Returns an array of Position objects with ticker, shares, and avgCost fields.

Next catalyst: FOMC meeting on April 2. Expect elevated volatility.

Article text-lg→xl (16→18px) · lh 2→2.25

Portfolio Review — Q1 2026

Your portfolio is up 12.4% YTD, outperforming the S&P 500 by 3.2 percentage points. Duration-sensitive names benefited from the softer-than-expected CPI print, with rate-cut odds now at 68%.

Technology — 42% allocation
- NVDA — 14% (trim candidate)
  - Data center revenue up 122% YoY
  - Valuation stretched at 35x forward
- AAPL — 12% (hold through earnings)
- MSFT — 10% (Azure re-acceleration)
Healthcare — 18% allocation
- UNH — 10%
- LLY — 8% (GLP-1 thesis intact)
Cash & equivalents — 12%

Rebalance Plan

Reduce concentration risk
1. Sell 200 shares NVDA at $925 limit
  1. Set GTC order, do not market sell
  2. Trail stop remaining 350 shares at $880
2. Trim AAPL by 100 shares at market
Redeploy into laggards
1. Add 50 AMZN at $178.50 limit
2. Add 200 XLU for defensive exposure

Earnings season playbook:

Pre-earnings — preparation steps
1. Review consensus estimates vs whisper numbers
2. Check implied move from options pricing
Post-earnings — wait 15 minutes before trading

The market can stay irrational longer than you can stay solvent.

Here's the API call to fetch positions:

fetch('/api/portfolio/positions', {
  headers: { 'Authorization': 'Bearer ' + token }
})
  .then(res => res.json())
  .then(data => console.log(data))

Returns an array of Position objects with ticker, shares, and avgCost fields.

Next catalyst: FOMC meeting on April 2. Expect elevated volatility.

COMPONENT INTEGRATION

ChatRichText + ArticleBody

VIA ChatRichText COMPONENT

Small variant with bold, code, and nested list:

Top-level item
- Nested child

default

Default variant with bold, code, and nested list:

Top-level item
- Nested child

Large variant with bold, code, and nested list:

Top-level item
- Nested child

VIA ArticleBody COMPONENT

Getting Started

F1 Carbon is a dark-first design system built for data-heavy financial interfaces. It ships as a private npm package with 123 UI components, 15 chart wrappers, and a full token system.

Built on Tailwind CSS v4 with semantic color tokens
- Custom breakpoints: ios → 4K
- Container utilities handle all responsive padding
All components use named exports from a single barrel

Prerequisites

Node.js 18+ and npm 9+
Tailwind CSS v4
1. Must use CSS-first config
2. v3 is not supported

Dark mode is required — components look broken without className="dark" on the html element.

import { Button, Card, BarChart } from '@f1carbon/ui'

ELEMENTS

individual demos at chat scale

UNORDERED LIST — FLAT

Trim NVDA position by 20% at current levels
Add to AMZN on any pullback below $180
Hold AAPL — earnings catalyst in 2 weeks
Set stop-loss on TSLA at $165

UNORDERED LIST — 3-LEVEL NESTING

Level 1 — disc marker, 24px indent
- Level 2 — circle marker, +20px indent
  - Level 3 — square marker, +20px indent
  - Another level 3 item
- Another level 2 item
Back to level 1

Markers: disc → circle → square · All green (color-pos)

ORDERED LIST — FLAT

Sell 200 shares of NVDA at market open
Place limit buy for 50 AMZN at $178.50
Review remaining positions by EOD Friday

ORDERED LIST — 3-LEVEL NESTING

Level 1 — decimal (1, 2, 3)
1. Level 2 — lower-alpha (a, b, c)
  1. Level 3 — lower-roman (i, ii, iii)
  2. Another level 3 item
2. Another level 2 item
Back to level 1

Types: decimal → lower-alpha → lower-roman · Indent matches bullets

MIXED NESTING — UL ↔ OL

Pre-earnings — preparation steps
1. Review consensus estimates
2. Check implied move from options
3. Set alerts for key levels
Post-earnings — reaction framework
1. Wait 15 minutes before trading
2. Compare results to buy-side expectations

INLINE FORMATTING

Text with bold emphasis for key data points, italic for asides, and linked text for references. Inline code for tickers or API fields like avgCost.

BLOCK ELEMENTS

H3 Heading

Body text after h3.

H4 Heading

Body text after h4.

Blockquote with left accent border. Always uses prim color.

// Code block — mono font, base-weak bg
const portfolio = await fetch('/api/positions')
const data = await portfolio.json()

Content above hr.

Content below hr.

REFERENCE

RICHTEXT.mdcondensed implementation guide

IMPLEMENTATION REFERENCE

Architecture

f1-rich is a single CSS class in utilities.css that owns structural prose styling — list markers, nesting, indent, headings, inline formatting, code blocks, blockquotes, and horizontal rules. It contains no font-size, line-height, or body text color — those are set by the consuming component via Tailwind token utilities.

Consumer components

ChatRichText — chat-rich-text.tsx
- Base: f1-rich text-scnd [&_p]:text-prim
- sm: text-xs leading-normal · default: text-base leading-[1.75] · lg: text-lg leading-relaxed
ArticleBody — article.tsx
- f1-rich text-scnd text-base leading-relaxed [&_h3]:text-lg [&_h4]:text-base
ProjectPage — project-page.tsx
- f1-rich + inline leading overrides for p/li

List mechanics

Native list-style is disabled. Each li gets position: relative + padding-left: 1.25em (marker space). A ::before pseudo-element sits at left: 0 with the marker character. Wrapped text stays indented because padding applies to the whole content box.

Markers by depth

Unordered: • (L1) → ◦ (L2) → ▪ (L3)
Ordered: 1 2 3 (L1) → a b c (L2) → i ii iii (L3)
All markers colored var(--color-pos) (green)

Spacing values

Horizontal
- Container → L1 marker: 0 (ul/ol padding-left: 0)
- Marker → text: 1.25em (li padding-left, relative to font-size)
- Nesting indent: 0 (nested ul/ol padding-left: 0)
Vertical
- Between L1 items: 1.25rem (gap on root ul/ol)
- Between nested items: 0.375rem (gap on nested lists)
- Parent → nested list: 0.375rem (margin-top)
- Paragraph → list: 0.375rem (p + ul/ol margin-top)

Migration from old styles

chat-rich-style → f1-rich text-scnd [&_p]:text-prim + size classes on wrapper
note-style → f1-rich text-scnd + scale/leading classes on wrapper
f1-list → f1-rich (drop-in replacement, f1-rich is a superset)

Custom text scale (not standard Tailwind)

text-2xs 10px · text-xs 11px · text-sm 13px · text-base 14px
text-lg 16px · text-xl 18px · text-2xl 20px

Full documentation: RICHTEXT.md in repo root. CSS source: packages/ui/src/styles/utilities.css (search for f1-rich).