A light hero, dark sections
The page is the cool gray-100; the hero sits on it with frosted controls. What We Offer, Assets, Our Mission, Contact and the footer stand on --lp-bg-dark with gray-100 text. Every specimen below is drawn on both.
--bg-page—--surface-card—--text-strong—--gray-700—--text-muted—--blue-600—--border—--lp-frost—--lp-bg-dark—--lp-text—--gray-400—--gray-500—--blue-300—--lp-border-strong—--lp-hairline-dark—--lp-bg-dark-hover—--bg-page-deep—--surface—--surface-raised—--surface-inset—--surface-invert—--text-body—--text-faint—--text-invert—--text-onaccent—--accent—--accent-hover—--accent-soft—--accent-text—--accent-2—--accent-2-hover—--accent-2-soft—--accent-3—--accent-3-hover—--accent-3-soft—--border-strong—--border-faint—--border-invert—--rule—--grid-line—--focus-ring—--success—--danger—--info—--warning—The landing's --gray-50 … --gray-950 alias the foundation's cool ramp (both ramps side by side on foundation › neutrals). The page tokens from landing.css: --lp-accent —, --lp-accent-hover —, --lp-pill —, --lp-frost-border —, --lp-hairline-light —, --lp-hairline-dark-soft —, --lp-glow-cobalt —.
One sans for the page, Archivo for the logo, a mono for data
The page font is --lp-font — Inter standing in for Retool's Saans; a licensed "Saans" @font-face would take over automatically, it is first in the stack. The design system's own faces stay loaded: Archivo sets the wordmark, IBM Plex Mono the old eyebrow and the data roles. Each role below is rendered in its class and measured off the rendered element, so the clamp() sizes read what they are at this viewport.
--lp-fontYour thesis deserves better leverage—--font-displayStrikeSimple — the logo's Archivo—--font-mono[ 01 ] 108,420.00 — IBM Plex Mono—--font-ascii·:∙ ascii art ∙:·—--font-eyebrow—--font-heading—--font-body—--font-data—--font-sans—--font-serif—tokens/typography.css points --font-body at the mono face, so the design system's body copy is IBM Plex Mono; landing.css then overrides the body with --lp-font, which is what the site shows. A consumer of the raw tokens would get a monospace body. Kept as the source has it.
--weight-light—--weight-regular—--weight-medium—--weight-semibold—--weight-bold—--weight-black—--weight-light is 400, the same as regular, so "light" is not light; the page's leads use a literal 300 in Inter instead, and the roles below carry that 300.
--text-2xs—Aa — micro mono labels—--text-xs—Aa — small labels—--text-sm—Aa — small text—--text-base—Aa — body—--text-md—Aa — large body—--text-lg—Aa — subheading—--text-xl—Aa — heading—--text-2xl—Aa — title—--text-3xl—Aa — display—--text-4xl—Aa — display—--text-5xl—Aa—--text-6xl—Aa— hero display--leading-tight—--leading-snug—--leading-normal—--leading-relaxed—--tracking-display—--tracking-tight—--tracking-normal—--tracking-wide—--tracking-label—0.14em here; the app's label is 0.06em.--tracking-wider—Your thesis deserves better leverage
The hero h1.Both S's bold cobalt, each i a spark
The wordmark is Archivo 600 tracked −0.03em; both S's are 700 in the accent, and each i is a dotless stem with the spark mark floating above it as its tittle. Four sizes (--lp-logo-size-sm —, --lp-logo-size-md —, --lp-logo-size-lg —, --lp-logo-size-xl —) and an invert variant for dark grounds.
The loop: the diagonal cross shines twice, the mark rotates 45°, the plus cross shines twice, forever. The spark is 45°-symmetric, so the reset is seamless. Reduced motion holds it still.
The cobalt tile
The hero's top-right tile, to the waitlist: cobalt, the brand mark over an uppercase label with a ↗ at its far end. At least — wide (— on phones), padded —, cornered at --radius-md. Hover deepens to blue-600, lifts 1px and casts a cobalt glow.
--lp-hero-tile-min-width—--lp-hero-tile-min-width-mobile—--lp-hero-tile-padding—--radius-md—Unlike the pills, the tile's hover rules are not wrapped in a hover media query in landing.css, so on a touch screen its lift and glow stick after a tap. The landing passes the mark a stroke of 10 here (<Mark size={20} strokeWidth={10} />) where the mark class's default is the foundation's inline 8, so the specimen sets it inline as the page does.
"[ 01 ] Kicker", a title with its keyword, a lead
Every section opens with it: a 12px medium uppercase kicker in blue-600 (blue-300 on dark), the title 20px under it with its keyword in the accent, the lead 18px under that. The head is 720px wide; centred heads keep the lead within that measure.
No liquidation, stay in the game
The next generation of on-chain leverage is not built on debt.
StrikeSimple helps you find the right strategy for your market view, without having to build it from an option chain.
The old design-system eyebrow and display · tokens/base.css
Trade the move, not the margin call
Bitcoin, Ether, gold, Nvidia, Apple, Circle, SpaceX and the S&P 500 — each on its own settlement cadence.
The landing has three kicker treatments side by side: SectionHead sets "[ 01 ] KICKER" as one run of blue-600 (the index not distinguished); the Primitives abbreviations set "[ ABC ]" at 11px 600 0.14em; the stage captions set them 500 12px 0.01em blue-300. This system gives the index the design-system accent (blue-500 on light, blue-300 on dark); a consumer who wants SectionHead's single run sets the index to inherit.
Four themes of one band
The v3 page's mission band: centred type, hairlines top and bottom that draw out from the centre as it comes into view. Its colours — and the trading life cycle's inside it — are custom properties, so a theme class swaps the palette: dark (the default, with a cobalt glow), light, lavender (the v3 page's light band) and cobalt. Padded — on the site; halved here so four fit a screen.
Leverage without liquidation
A position that can lose only what you paid for it, and settles when it says it will.
Leverage without liquidation
A position that can lose only what you paid for it, and settles when it says it will.
Leverage without liquidation
A position that can lose only what you paid for it, and settles when it says it will.
Leverage without liquidation
A position that can lose only what you paid for it, and settles when it says it will.
--lp-band-dark-bg—--lp-band-dark-kicker—--lp-band-dark-title—--lp-band-dark-text—--lp-band-dark-em—--lp-band-dark-hl—--lp-band-dark-hairline—--lp-glow-cobalt—--lp-band-light-bg—--lp-band-light-kicker—--lp-band-light-title—--lp-band-light-text—--lp-band-light-em—--lp-band-light-hl—--lp-band-light-hairline—The light band's hairline is a neutral ink while every other translucent ink on the light grounds is the blue-cast rgba(20, 20, 60, …). Kept as landing.css has it.
--lp-band-lavender-bg—--lp-band-lavender-kicker—--lp-band-lavender-title—--lp-band-lavender-text—--lp-band-lavender-em—--lp-band-lavender-hl—--lp-band-lavender-hairline—Lavender shares the light palette except its wash, its hairline and its roadmap line; the shared values are aliases of the light tokens.
--lp-band-cobalt-bg—--lp-band-cobalt-kicker—--lp-band-cobalt-title—--lp-band-cobalt-text—--lp-band-cobalt-em—--lp-band-cobalt-hl—--lp-band-cobalt-hairline—The roadmap's palette, per theme
The roadmap inside the mission band — a line with a dot per step, popovers with tags and square previews, a gold ring on a featured one — is documented as a pattern; its structure CSS is the landing's own. What the system carries is its palette: every --rm-* property the band exposes, one set per theme, as --lp-rm-dark-line … --lp-rm-cobalt-feature-glow, plus the four translucent whites the cobalt band's phone layout swaps in when the popover sits inline on the band (--lp-rm-cobalt-inline-tag-bg … --lp-rm-cobalt-inline-soon-glow). The pieces below are drawn on each band ground from those properties; the last strip is the cobalt band at phone width, at every width. The live roadmap is on the landing itself.
--lp-roadmap-dot—--lp-roadmap-halo—--lp-roadmap-halo-on—--lp-roadmap-preview—--lp-roadmap-pop-width—--lp-rm-dark-line—--lp-rm-dark-progress-a—--lp-rm-dark-progress-b—--lp-rm-dark-progress-glow—--lp-rm-dark-dot—--lp-rm-dark-dot-on—--lp-rm-dark-halo—--lp-rm-dark-halo-on—--lp-rm-dark-glow—--lp-rm-dark-glow-on—--lp-rm-dark-name—--lp-rm-dark-pop-bg—--lp-rm-dark-pop-border—--lp-rm-dark-pop-shadow—--lp-rm-dark-pop-title—--lp-rm-dark-pop-text—--lp-rm-dark-tag-text—--lp-rm-dark-tag-bg—--lp-rm-dark-tile—--lp-rm-dark-soon-text—--lp-rm-dark-soon-mark—--lp-rm-dark-soon-hatch—--lp-rm-dark-soon-glow—--lp-rm-dark-caption—--lp-rm-dark-focus—--lp-rm-dark-flow—--lp-rm-dark-feature—--lp-rm-dark-feature-ink—--lp-rm-dark-feature-bg—--lp-rm-dark-feature-glow—The light, lavender and cobalt sets carry the same thirty names under --lp-rm-light-line, --lp-rm-lavender-line and --lp-rm-cobalt-line; the strips above read them through the band. The light themes' featured ink is a darker gold than their amber ring (--lp-rm-light-feature-ink —), because amber-500 is too light for small text on white; cobalt's is paler than its ring (--lp-rm-cobalt-feature-ink —) for AA under the band's glow.
--lp-rm-cobalt-inline-tag-bg—--lp-rm-cobalt-inline-tile—--lp-rm-cobalt-inline-soon-hatch—--lp-rm-cobalt-inline-soon-glow—At and below the landing's mobile breakpoint (--bp-mobile —) the roadmap is a vertical list and each step's detail is plain content on the cobalt ground, so the white popover's blue-on-white tag fill, preview tile and "coming soon" fills would vanish. landing.css swaps them for these four translucent whites, inks the tag, the note and its turning mark in --white, takes the caption to the headline keyword's --lp-band-cobalt-hl —, and lets the gold return from the popover's amber to this theme's own ring, ink and glow. In the source they are a media override of the popover, not a theme block, which is why they have a name family of their own; the inline strip above restates that block on a class so it shows at every width.
Liquid glass, 72 → 244
The desktop left navigation: a slim — frosted column of section glyphs under the brand mark that widens to — on hover or keyboard focus to show the wordmark and the labels. Each part takes data-tone="light" or "dark" from the section behind it. Shown here static at its two widths — slim on the hero ground, open on a dark section — with the hover widening switched off.
--rail-tint—--rail-tint-on—--rail-line—--rail-fg—--rail-muted—--rail-dot—--rail-dot-on—--rail-dot-off—--rail-accent—--rail-tint—--rail-tint-on—--rail-line—--rail-fg—--rail-muted—--rail-dot—--rail-dot-on—--rail-dot-off—--rail-accent—The glass itself — the pane's base tint, its edge, its sheen and the tone sets' translucent whites — stays literal in the rail recipe: those alphas exist nowhere else on the page and have no token. Without backdrop blur, a near-solid pane stands in.
A schematic P&L on the dark stage
Hairline axes one step off the ground, the strikes as faint lavender rules, the payoff at expiry a 2px lavender line drawn in when the variant is picked, its profit side washed green and its loss side red, a ringed dot at each breakeven, and today's value a dashed light grey curve under it. Under the chart, its caption and a key to the two lines. Text stays in the grey text tones.
--lp-payoff-line—--lp-payoff-now—--lp-payoff-axis—--lp-payoff-zero—--lp-payoff-strike—--lp-payoff-wash-up—--lp-payoff-wash-down—--lp-payoff-glow—--lp-diagram-ink—--lp-diagram-ink-deep—--lp-diagram-paper—--lp-diagram-lavender—--lp-diagram-lavender-soft—--lp-diagram-ink-soft—From WheelGraph.jsx, CallLadder.jsx / PutLadder.jsx and SplitGraph.jsx, where they are literals: the node boxes are the deep ink filled and the ink stroked; the T and Cash labels are the paper tone; the split's lit beams are the lavender over the soft-ink paths behind them; a highlighted node on the light ladders fills with the soft lavender, and on the dark ones with a mix of blue-400 into the deep ink.
Documented, not ported
The split sections, the Products showcase, the wire grid and the cursor are the landing's own compositions; their CSS stays with the page. What the system holds is their tokens and their type roles, sketched here so the names have a picture.
Every position settles at expiry — nothing is force-closed on the way.
--lp-stage-top—--lp-stage-bottom—--lp-hairline-dark-soft—--lp-split-card-width—--lp-split-stage-min-height—--radius-2xl—--bp-split-stack—A card at --radius-lg — on the page ground, its screenshot frame's top corners at --radius-md — and ringed in --border-faint; the pill rises in at the frame's corner on hover. The showcase is at most --lp-showcase-max-width — wide and folds below --bp-showcase —.
--gray-300—--grid-line—--gray-700—--lp-glow-cobalt—--blue-400 (white under difference over a link)
Sharp, restrained
0 / 2 / 3 / 5 / 8px and a pill. Two steps the page CSS used as literals are tokens now: 12px (the roadmap popover and frames, the band's popover) and 24px (the split deck's cards). Borders are hairlines; the editorial rule is near-black ink.
--radius-none—--radius-xs—--radius-sm—Footer links' focus corner.--radius-md—The hero tile.--radius-lg—--radius-xl—Roadmap popover and frames.--radius-2xl—Split deck cards.--radius-pill—= --lp-pill, the buttons.--border-w—--border-w-strong—--hairline—--hairline-strong—--rule-ink—.sx-rule — the ink rule
.sx-rule--faint — the hairline
Whisper-quiet
Barely there; structure comes from rules and negative space. Tuned for the light page — the dark sections cast their own (the roadmap popover's, the deck cards').
--shadow-none—--shadow-xs—--shadow-sm—--shadow-md—--shadow-lg—The widened rail.--shadow-inset—A rem scale on the 4px unit
Eleven steps, 0 to 8rem, in rem so they ride the root size; each bar is drawn at its token and measured back in pixels. The page's own insets — sections, bands, the footer — are composite tokens beside them, and the containers and the slow duration close the set.
--lp-section-padding—--lp-section-padding-mobile—--lp-band-padding—--lp-footer-padding—--container—--container-wide—--container-prose—--lp-showcase-max-width—--dur-fast—--dur-base—--dur-slow—The app's is 340ms.--ease-out—--ease-inout—Where the page folds
Informational tokens: CSS cannot read a custom property inside a media query, so the component recipes write these as literal queries and name the token they mirror.
| Token | Value | Below it |
|---|---|---|
--bp-footer-4col | — | The footer's brand column spans the top, four columns under it. |
--bp-footer-2col | — | The footer folds to two columns. |
--bp-split-stack | — | Split sections stack: no stage, each open item's media under its copy. |
--bp-mobile | — | The phone layout: a top bar and drawer instead of the rail, the hero tile narrows, sections pad 48 / 16, the roadmap goes vertical, the footer pads 48 / 16 / 32. |
--bp-showcase | — | The Products showcase folds to one column. |
--bp-phone | — | The footer is one column; the band's pills stack full-width; roadmap previews go two per row. |