Design Rules
BRAND GUIDELINES
JAVLOT, SAS
Article 1
LOGO
The Javlot logo is the primary brand mark. It comes in three variants: white for dark backgrounds, black for light backgrounds, and accent (lime) for branded materials. Always maintain adequate clear space around the logo.
✓Use on solid backgrounds with enough contrast
✗Do not stretch, skew, or rotate the logo
✓Maintain clear space equal to the height of the "J"
✗Do not change the logo colors
✓Minimum size: 80px wide for digital, 20mm for print
✗Do not place on busy or low-contrast backgrounds
Article 2
COLOR PALETTE
Click any swatch to copy its hex value. The lime accent is the primary brand color, used for CTAs, highlights, and interactive elements.
Brand
Lime#C8FF00
Lime Light#D8FF40
Backgrounds
App#050505
Surface#111111
Card#0A0A0A
Elevated#1A1A1A
Text
Primary#FFFFFF
Secondary#B3B3B3
Tertiary#666666
Status
Success#10B981
Warning#F59E0B
Error#EF4444
Info#3B82F6
Article 3
TYPOGRAPHY
Inter is the primary typeface across all Javlot interfaces. Use the following scale and weights to maintain visual hierarchy.
Aa
Regular
400
Aa
Medium
500
Aa
Semibold
600
Aa
Bold
700
Aa
Extrabold
800
Hero
4remStart Trading Today
4remStart Trading Today
Section
3remHow It Works
3remHow It Works
Card title
1.5remGold Scalper Pro
1.5remGold Scalper Pro
Body
1.125remAutomated trading made simple for everyone
1.125remAutomated trading made simple for everyone
Body sm
1remConnect your MT5 account in minutes
1remConnect your MT5 account in minutes
Label
0.875remMonthly Performance
0.875remMonthly Performance
Caption
0.75remLAST UPDATED: APRIL 2026
0.75remLAST UPDATED: APRIL 2026
Article 4
SPACING & RADIUS
All spacing follows a 4px base grid. Border radius tokens ensure consistent roundness across UI elements.
4
8
12
16
20
24
32
40
48
64
80
96
sm4px
md8px
lg12px
xl16px
2xl24px
full9999px
Article 5
USAGE RULES
Dark Theme Default
Javlot uses a dark theme as the default experience. The lime accent (#C8FF00) is the primary brand color. In light mode, the accent shifts to vivid blue (#1B84FF).
Design Tokens Only
Never hardcode color values. Always reference CSS custom properties: var(--text-primary), var(--bg-app), var(--accent-primary), etc.
Typography Hierarchy
Use Inter for all UI text. Reserve bold (700) and extrabold (800) for headings. Body text should use regular (400) or medium (500).
Hardcoded Color Exceptions
Hardcoded values are only allowed in gradient color stops, drop-shadow, text-shadow, and keyframe animations.