Design SystemBrand GuidelinesJL Capital
JL Capital Style Guide
Design patterns, color palette, typography, and component guidelines for creating professional fund presentations and materials.
Brand Introduction
Who We Are
JL Capital is a systematic crypto investment firm focused on consistent, risk-adjusted returns. We pair institutional research discipline with deep community reach to give investors a clear, professional path into digital assets.
Core Values
- Risk-first allocation
- Institutional research discipline
- Systematic, data-driven approach
- Transparent, professional communication
Design Principles
- Clean, professional aesthetic
- Data-first visualization
- Minimal color palette with strategic red accent
- Clear hierarchy and excellent readability
Brand Positioning
"Where institutional-grade systematic crypto investment meets accessible, professional presentation. Clean, confident, and data-driven."
Color Palette
Primary Brand Colors
JL Red
HEX: #C52928RGB: 197, 41, 40HSL: 0°, 66%, 46%Tailwind: N/A (Custom)Usage
Primary headings, key metrics, brand moments, final funnel stages, CTA buttons
Pure White
HEX: #FFFFFFRGB: 255, 255, 255HSL: 0°, 0%, 100%Tailwind: whiteUsage
Primary background, card backgrounds, chart areas, clean presentation base
Neutral Black
HEX: #1F2937RGB: 31, 41, 55HSL: 215°, 28%, 17%Tailwind: neutral-800Usage
High-contrast text, important content, maximum readability when needed
Data Visualization Color Schemes
JL Strategy
#C52928Q3 Reports (Brand)
BTC Benchmark
#6B7280Q3 Reports (Muted)
JL NAV
#10B981Stats (Success)
BTC Index
#DC2626Stats (Comparison)
Warning
#F59E0BCaution States
Q3 Report Style
Use JL Red + neutral gray for investor reports and client presentations where brand emphasis is important.
Stats Dashboard Style
Use success green + error red for internal dashboards where semantic meaning is primary.
Neutral Scale
900
#111827Primary text
700
#374151Body text
500
#6B7280Captions
200
#E5E7EBBorders
100
#F3F4F6Backgrounds
50
#F9FAFBSubtle areas
Color Usage Guidelines
Q3 Report Style Rules
- • Use JL Red (#C52928) for strategy performance
- • Use neutral-500 (#6B7280) for benchmarks
- • Maintain brand emphasis with red highlights
- • Keep palette minimal and professional
- • Use gradient fills at 18% opacity
- • Dashed lines (6,4) for benchmark data
General Guidelines
- • Maintain 4.5:1 contrast ratio minimum
- • Keep backgrounds primarily white/neutral-50
- • Use neutral-200 for all borders consistently
- • Never mix color schemes within one context
Stats Dashboard Style Rules
- • Use Success Green (#10B981) for JL NAV
- • Use Error Red (#DC2626) for BTC benchmark
- • Follow semantic color meaning (green=good)
- • Use for functional, non-client dashboards
- • Emphasize data clarity over brand
- • Use CartesianGrid patterns for backgrounds
Don'ts
- • Don't use JL Red for negative/error states
- • Don't mix Q3 and stats color schemes
- • Avoid using more than 3 colors per chart
- • Don't use pure black (#000000)
Typography System
Typography Hierarchy
Large Heading
36px, font-semibold, tracking-tight, JL Red
Section Heading
24px, font-semibold, tracking-tight, JL Red
Subsection Heading
18px, font-semibold, neutral-700
Body text for readable content with relaxed line height
16px, font-normal, leading-relaxed
Typography Rules
- • Primary font: Inter with system fallbacks
- • Use tracking-tight for headings 24px+
- • Use font-semibold (600) for all headings
- • Maintain 4.5:1 contrast minimum
Chart Typography
- • Axis labels: 11-12px, neutral-500
- • Data labels: 12px, neutral-800, font-medium
- • Chart titles: 14px, neutral-700, font-semibold
- • Always specify fontFamily="Inter, sans-serif"
UI Components & Layout
Pills & Buttons
Q3 2025Investor Report
List Styling
- Signal-guided allocation between BTC, ETH, and stable assets
- Objective is stronger risk-adjusted returns vs passive exposure
Stat Cards
+10.2%
Q3 Gain
2.22
Sharpe
Information Box
This document is for information only. Past performance is not indicative of future results.
Data Visualization Examples
Q3 Report Style
Strategy outpacing Bitcoin HODL by 9.51%
JL Red (#C52928) with gradient, neutral gray (#6B7280) dashed benchmarks
Stats Dashboard Style
Success Green (#10B981) vs Error Red (#DC2626) with grid pattern
Pipeline Flow
Innovation Funnel
Q3 Report Style
- • JL Red (#C52928) for strategy, neutral gray (#6B7280) for benchmarks
- • Gradient fills: 18% opacity, dashed lines for benchmarks
- • Clean grids, success callouts with emerald background
Stats Dashboard Style
- • Success Green (#10B981) for JL, Error Red (#DC2626) for BTC
- • CartesianGrid patterns, neutral-50 backgrounds
- • Semantic meaning (green=good), functional over brand
Brand Guidelines
Core Principles
- Clarity First: Information hierarchy is paramount
- Minimal Color: Let JL Red be the primary accent
- Data-Driven: Charts and metrics should be highly legible
- Professional Tone: Avoid overly decorative elements
Implementation Notes
• Use Tailwind CSS classes for consistent implementation
• Maintain border-neutral-200 for all borders
• Keep backgrounds primarily white for clean presentation
• Use JL Red sparingly but consistently for brand moments
• Ensure responsive design with appropriate grid systems