HJBL Design System
The visual language of Propreitary Trading firm, HJBL.
Brand Assets
Wordmark
Cormorant Garamond, weight 600, uppercase letterforms. Maroon on cream for light surfaces. Maroon Light with a cream period-dot on dark surfaces.
--maroon on --cream · --maroon-light on --brown
Link Preview / OG Image
Dark card — wordmark and tagline on --brown, metadata bar on --brown-light. Rendered by iMessage/social unfurls via og:image, og:title, og:description.
og:image · og:title · og:description
Monogram
Two-line stacked "HJ / BL." monogram. Square favicon on cream for browser tabs; circular touch icon on dark brown for iOS/mobile home screens.
favicon.png · apple-touch-icon.png
Color
Dark Brown is the primary page background. Brown Mid for elevated cards and surfaces. Cream for primary text.
Cream sections provide visual contrast. Dark Brown text on cream. Maroon accents hold weight on either surface.
Reserved for emphasis bands and primary CTAs. Cream text only. Cream at 45–50% opacity for metadata.
Typography
complex markets.
Spacing
Grid
Motion
Motion is restrained and purposeful. One well-orchestrated entrance beats many scattered micro-interactions. Easing is always ease or ease-out — never linear.
Page Load
Hero elements fade up sequentially. Eyebrow 0.2s → Headline 0.4s → Sub 0.6s → CTAs 0.8s → Scroll indicator 1.1s.
animation: fadeUp 0.8s ease both;
animation-delay: 0.4s;
fadeUp Keyframe
Standard entrance animation. Opacity 0→1, translateY 24px→0. Applied to any reveal element.
from: opacity:0; translateY(24px)
to: opacity:1; translateY(0)
Hover Colors
Background and text color transitions on all interactive elements. Consistent easing.
transition: background 0.25s ease,
color 0.25s ease;
Hover Transform
Arrow icons translate 4px on row hover to signal directionality and interactivity.
transform: translateX(4px);
transition: transform 0.2s ease;
Buttons
Primary
Maroon fill, cream text. The dominant action on any given section. Use one per view maximum.
.btn-primary
Secondary
Maroon outline, fills on hover. Use when two equal-weight actions exist in the same zone.
.btn-secondary
Ghost / Arrow
Muted text with trailing arrow. For secondary navigation links and inline CTAs.
.btn-ghost
Labels & Tags
Section Label
Opens every major section. 32px maroon rule prefix. DM Mono uppercase, 10px, 0.28em tracking.
.section-label
Tags
Three variants: Default (muted border), Outline (maroon border), Filled (maroon bg). Used in role rows and listings.
.tag-default
.tag-outline
.tag-filled
Cards & Pillars
Cross-Disciplinary Research
Insight from economics, mathematics, and behavioral science combined.
Quantitative Rigor
Every thesis is stress-tested before capital is ever deployed.
Pillar Card
Numbered. Maroon 2px top border. Brown bg (slightly lighter than surface). Hover darkens. Used in 3-col approach grids.
.pillar / .card-comp
List Rows
Quantitative Researcher
Full-Time · New YorkSystematic Trader
Full-Time · New YorkSoftware Engineer — Trading Systems
Full-Time · New YorkRole / List Row
Cormorant title + DM Mono metadata left. Maroon arrow right. 1px gaps between rows on a darker background track.
.role-row
Stats
Stat Cell
Large Cormorant figure in --maroon-light at 44px. DM Mono label at 10px uppercase. Arranged in 1px-gap row grid.
.stat-cell
Dividers
Form Inputs
Text Input
DM Mono, dark bg, 1px --brown-light border. Focus shifts border to --maroon. Full-width in context.
.input-ds
Quote Bands
"A well-rounded approach to knowledge leads to stronger solutions than narrow expertise."HJBL — Core Principle
Full-width maroon breakout band. Libre Baskerville italic at 22–34px. Optional grid texture overlay (4% white). Used once per page as a visual break. Cite in DM Mono at 45% cream opacity.
Design Tokens Summary
All design decisions are tokenized. Use only these custom properties in new markup — never raw hex values.
| Token | Value | Usage |
|---|---|---|
| --maroon | #8C1A11 | CTAs, section labels, accent rules, tags |
| --maroon-deep | #6B1209 | Active button hover, deep shadow tones |
| --maroon-light | #A8231A | Stat numbers, eyebrow labels on dark |
| --cream | #EEEBDD | Primary text on dark, light section background |
| --cream-dark | #E0DCC8 | Italic headline accent, hover bg on cream sections |
| --cream-muted | #D4D0BF | Secondary text on dark backgrounds |
| --brown | #1B1717 | Page background, primary surface |
| --brown-mid | #2E2828 | Cards, elevated surfaces, grid gap color |
| --brown-light | #433D3D | Borders, dividers, muted labels, grid bg |
| --muted-text | #9A9494 | Body copy on dark, secondary metadata |