PHAN Felix

Generated Jun 9, 2026

DESIGN.md for www.xtb.com

www.xtb.com/en

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design System Inspired by XTB

1. Visual Theme & Atmosphere

XTB's design system embodies a modern, trustworthy fintech aesthetic built on clean minimalism and high contrast. The palette emphasizes dark, sophisticated neutrals paired with vibrant accent colors that signal action and confidence. The system prioritizes clarity and accessibility, using generous whitespace and deliberate typography to guide users through complex financial workflows. The visual language conveys professionalism and stability while maintaining approachability through warm, inviting interaction states. Every element is purposefully refined—this is investment-grade design.

Key Characteristics

High-contrast dark-on-light and light-on-dark compositions
Minimalist aesthetic with intentional negative space
Bold, confident accent colors (emerald green and deep red) for critical actions
Clean sans-serif typography emphasizing readability
Subtle elevation and layering without visual noise
Inclusive color and contrast ratios supporting accessibility
Progressive disclosure of information through logical hierarchy

2. Color Palette & Roles

Primary

Deep Navy (#131825): Primary background for dark mode and high-contrast surfaces; primary text on light backgrounds
Charcoal (#0F1215): Secondary dark background; alternate text color for subtle hierarchy

Accent Colors

Emerald Success (#08AA54): Primary action color, success states, positive indicators, call-to-action buttons
Danger Red (#D2323D): Error states, risk warnings, critical alerts

Interactive

Sky Tint (#2C3E50): Tertiary interactive element color; hover states on neutral elements
Slate (#404A64): Muted interactive states; disabled text
Muted Slate (#4E5B7E): Subtle borders and dividers
Gray Text (#98A2A9): Placeholder text and helper copy

Neutral Scale

White (#FFFFFF): Pure white for contrast and primary content backgrounds
Off-White (#F6F7F8): Light background, card surfaces, section backgrounds
Soft Gray (#F4F6F8): Subtle background variation for layering
Light Border (#DBE2EA): Input borders and dividers
Pale Divider (#D6E1EC): Secondary divider and subtle borders
Neutral Gray (#828487): Disabled state text
Edge Gray (#EBECED): Minimal border definition
Soft Blue-Gray (#D9E0E8): Input field backgrounds

Surface & Borders

Input Surface (#404A64 at 5% opacity): Input field backgrounds with transparency
Card Surface (#F6F7F8): Default card and container background
Elevated Surface (#FFFFFF): Highest-elevation surfaces and modals

3. Typography Rules

Font Family

Primary: XTB Sans (or fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif) Secondary: Roboto (fallback: "Helvetica Neue", Arial, sans-serif)

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display / H1	XTB Sans	72px	600	74px	0px	Hero headlines and page titles
Heading / H2	XTB Sans	48px	600	50px	0px	Section headings and major subheaders
Subheading / H3	XTB Sans	20px	700	28px	0px	Card titles and subsection headers
Body Default	Roboto	14px	400	20px	0px	Primary body text and descriptions
Body Large	Roboto	16px	400	24px	0px	Extended body content and labels
Label / Caption	Roboto	12px	400	normal	0px	Form labels, badges, helper text
Button Text	Roboto	16px	400	24px	0px	Button and link text

Principles

Use XTB Sans exclusively for headings to establish brand identity
Maintain line-height of 1.3–1.5× font size for readability
Employ weight contrast (400 for body, 600–700 for headings) to create visual hierarchy
Use letter-spacing of 0px for standard readability; reserve tighter spacing for display sizes
Reserve font sizes ≥48px for hero sections; use H3 (20px) for card-level content
Default to 14px body text; use 16px for prominent body sections and CTAs
Limit font families to two; mix XTB Sans and Roboto only

4. Component Stylings

Buttons

Primary Button (Solid Emerald)

Background: #08AA54
Text Color: #FFFFFF
Font: Roboto, 16px, weight 400
Padding: 12px 24px
Border Radius: 8px
Height: 44px
Border: none
Hover State: Background #067A3F; box-shadow 0px 4px 12px rgba(8, 170, 84, 0.3)
Active State: Background #055C30; scale 0.98
Disabled State: Background #828487; cursor not-allowed; opacity 0.6

Secondary Button (Ghost / Outline)

Background: transparent
Text Color: #131825
Font: Roboto, 16px, weight 400
Padding: 8px 16px
Border Radius: 8px
Height: 40px
Border: 1px solid #131825
Hover State: Background #F6F7F8; border-color #131825
Active State: Background #E8E9EB

Icon Button (Circular)

Background: transparent
Text Color: #0F1215
Size: 42px × 42px
Border Radius: 80px (pill/circular)
Font Size: 16px
Border: none
Hover State: Background #F6F7F8; box-shadow none

Navigation Link Button

Background: transparent
Text Color: #F6F7F8
Font: Roboto, 16px, weight 400
Padding: 4px 48px
Border: none
Line-Height: 24px
Hover State: opacity 0.8; underline via border-bottom 1px solid #F6F7F8

Success State Button

Background: #08AA54
Text Color: #FFFFFF
Same padding and radius as Primary Button
Box-shadow: 0px 2px 8px rgba(8, 170, 84, 0.2)

Cards & Containers

Default Card

Background: transparent or #FFFFFF
Padding: 0px (content-dependent)
Border Radius: 0px (no rounded corners)
Border: none
Box-shadow: none
Min-Height: 480px

Elevated Card (with Light Background)

Background: #F6F7F8
Padding: 24px 32px
Border Radius: 16px
Border: none
Box-shadow: none
Min-Height: 480px
Hover State: Background #F4F6F8

Feature Card (Light Background)

Background: rgba(64, 74, 100, 0.05) (Slate at 5% opacity)
Padding: 32px 40px
Border Radius: 16px
Border: none
Box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 25px 0px, rgba(78, 91, 126, 0.13) 0px 0px 1px 0px
Min-Height: auto

Inputs & Forms

Text Input (Primary)

Background: rgba(64, 74, 100, 0.05)
Text Color: rgba(19, 24, 37, 0.66)
Font: Roboto, 16px, weight 400
Padding: 16px 24px 16px 48px (left padding for icon)
Border Radius: 8px
Height: 56px
Border: 2px solid transparent
Line-Height: 20px
Placeholder Color: #98A2A9
Focus State: Border 2px solid #08AA54; box-shadow 0px 0px 0px 3px rgba(8, 170, 84, 0.1)
Error State: Border 2px solid #D2323D; box-shadow 0px 0px 0px 3px rgba(210, 50, 61, 0.1)

Text Input (Compact)

Background: rgba(64, 74, 100, 0.05)
Text Color: rgba(19, 24, 37, 0.66)
Font: Roboto, 16px, weight 400
Padding: 12px 24px 12px 48px
Border Radius: 8px
Height: auto (min 44px)
Border: 2px solid transparent
Line-Height: 20px
Focus State: Border 2px solid #08AA54

Form Label

Font: Roboto, 12px, weight 400
Color: rgba(19, 24, 37, 0.66)
Margin-Bottom: 8px
Line-Height: normal

Navigation

Header Navigation Link

Font: Roboto, 16px, weight 400
Color: #F6F7F8 (on dark backgrounds)
Padding: 8px 8px
Border Radius: 8px
Border: none
Hover State: opacity 0.85; background rgba(255, 255, 255, 0.1)
Active State: border-bottom 2px solid #08AA54

Breadcrumb Link

Font: Roboto, 16px, weight 400
Color: #08AA54
Padding: 5px 0px
Border: none
Text-Decoration: underline on hover
Active State: Color #131825; font-weight 500

Badges

Success Badge

Background: rgba(8, 170, 84, 0.1)
Text Color: #08AA54
Font: Roboto, 12px, weight 600
Padding: 6px 12px
Border Radius: 32px
Border: none

Error Badge

Background: rgba(210, 50, 61, 0.1)
Text Color: #D2323D
Font: Roboto, 12px, weight 600
Padding: 6px 12px
Border Radius: 32px
Border: none

Neutral Badge

Background: #F6F7F8
Text Color: #131825
Font: Roboto, 12px, weight 600
Padding: 6px 12px
Border Radius: 14px
Border: 1px solid #DBE2EA

5. Layout Principles

Spacing System

Base Unit: 8px

Scale & Usage:

4px: Micro-spacing (icon offsets, tight grouping)
8px: Padding in compact components, tight margins
16px: Standard padding in buttons, labels, small containers
24px: Margin between sections, card padding
32px: Section padding, medium container spacing
48px: Large padding within cards, prominent spacing
56px: Gap between major content blocks
72px: Large margin between sections
84px: Extra-large section padding
88px: Hero section breathing room
120px: Page margin top/bottom
132px: Maximum breathing room for feature sections

Grid & Container

Max Width: 1140px (primary content container)
Column Strategy: 12-column grid with 16px gutters
Section Pattern: Full-width containers with centered max-width wrapper
Padding: 24px left/right on mobile; 32px on tablet; 48px on desktop
Container: Use flex or CSS Grid for responsive columns

Whitespace Philosophy

XTB emphasizes generous whitespace to reduce cognitive load. Sections are clearly separated by 56px–120px vertical margins. Cards and content areas maintain 24px–48px internal padding. Navigation and header areas use tighter 8px–16px spacing. Whitespace increases proportionally at larger breakpoints.

Border Radius Scale

0px: Cards without background fill, hero sections, full-width layouts
8px: Buttons, input fields, secondary containers, navigation items
14px: Small badges and compact pills
16px: Feature cards, elevated containers, modals
32px: Large badges and prominent pills
80px: Icon buttons and perfectly circular elements

6. Depth & Elevation

Level	Treatment	Use
Flat (0)	No shadow; transparent or white background	Base content, inputs, default state
Raised (+1)	`0px 2px 8px rgba(0, 0, 0, 0.08)`	Input focus, card hover, tooltips
Elevated (+2)	`0px 4px 12px rgba(0, 0, 0, 0.1)`	Dropdown menus, floating buttons, modals
High (+3)	`0px 4px 25px rgba(0, 0, 0, 0.1), 0px 0px 1px rgba(78, 91, 126, 0.13)`	Feature cards, premium containers, prominent modals

Shadow Philosophy: XTB uses subtle, restrained shadows to create depth without visual clutter. Shadows emerge only on interactive or elevated components, signaling actionability. The system avoids hard shadows; instead, soft blur and distributed opacity create a layered, approachable aesthetic. Dark backgrounds (navy/charcoal) show lighter shadow values; light backgrounds employ deeper shadow values for contrast.

7. Do's and Don'ts

Do

Use #08AA54 (Emerald Success) exclusively for primary CTAs, success states, and confirmations
Maintain minimum 44px touch targets for all interactive elements
Apply 8px border radius to all inputs, buttons, and navigation elements
Use XTB Sans only for headings (H1–H3); reserve Roboto for body and interface text
Combine deep navy (#131825) with white (#FFFFFF) or off-white (#F6F7F8) for maximum contrast
Include 24px–32px padding within cards and containers for breathing room
Stack shadows (box-shadow) on hover/active states; avoid default shadows
Use opacity (0.05–0.3) for tinted backgrounds instead of solid light colors
Align form labels directly above inputs with 8px bottom margin
Test color combinations against WCAG AA accessibility standards

Don't

Mix more than two font families; XTB Sans + Roboto only
Use #D2323D (Danger Red) for non-critical warnings or general information
Set border radius below 8px on interactive components; maintain minimum consistency
Combine multiple shadows without clear hierarchy
Apply padding below 8px or above 88px without semantic justification
Use hard black (#000000) or hard white (#000000 text on #000000); use palette colors
Nest card backgrounds more than two levels deep without visual separation
Reduce line-height below 1.3× font size; maintain readability
Auto-size inputs; enforce height: 56px for primary inputs, 40px for secondary
Apply color to convey information alone; always pair with text or iconography

8. Responsive Behavior

Breakpoints

Name	Width	Key Changes
Mobile	320px–599px	Single-column layout; 16px padding; `font-size` H1 48px, H2 32px; full-width inputs; stacked navigation
Tablet	600px–1023px	Two-column grid; 24px padding; `font-size` H1 56px, H2 40px; sidebar navigation; condensed cards
Desktop	1024px+	Full 12-column grid; 32px–48px padding; max-width 1140px wrapper; side-by-side layouts; H1 72px, H2 48px
Wide	1440px+	Increased margins (120px top/bottom); expanded whitespace; 3+ column grids

Touch Targets

Minimum Size: 44px × 44px for all tappable elements (buttons, links, form controls)
Spacing Between Targets: 8px minimum gap to prevent accidental adjacent taps
Icon Buttons: 42px–48px square or circular
Input Fields: 56px height on mobile/tablet; maintain 44px minimum
Navigation Items: 40px–48px height; 16px horizontal padding minimum

Collapsing Strategy

Mobile (≤599px): Stack all multi-column layouts vertically; reduce padding to 16px; collapse navigation into hamburger menu; single-column cards; full-width inputs and buttons
Tablet (600–1023px): Use two-column grids where feasible; increase padding to 24px; show condensed navigation or tabs; side-by-side card pairs
Desktop (≥1024px): Unlock full 12-column grid; increase padding and margins proportionally; multi-column layouts; show full navigation; max-width 1140px container center-aligned

9. Agent Prompt Guide

Quick Color Reference

Primary CTA: Emerald Success (#08AA54)
Primary Background: Deep Navy (#131825)
Secondary Background: Off-White (#F6F7F8)
Heading Text: Deep Navy (#131825) on light; Off-White (#F6F7F8) on dark
Body Text: Charcoal (#0F1215) on light; Off-White (#F6F7F8) on dark
Error/Warning: Danger Red (#D2323D)
Input Background: Slate at 5% opacity (rgba(64, 74, 100, 0.05))
Border/Divider: Light Border (#DBE2EA)
Input Border (Focus): Emerald Success (#08AA54)
Disabled Text: Neutral Gray (#828487)

Iteration Guide

Typography First: All headings use XTB Sans (weight 600–700); all body text uses Roboto (weight 400). Enforce sizes from hierarchy table exactly: H1=72px, H2=48px, H3=20px, Body=14px.
Color Consistency: Every CTA button must be #08AA54 with #FFFFFF text. Errors/warnings only use #D2323D. Backgrounds alternate between #FFFFFF, #F6F7F8, and #131825—no intermediate grays.
Spacing Discipline: All padding/margin must use 8px multiples (8, 16, 24, 32, 48, 56, 72, 88, 120, 132px). No arbitrary spacing.
Border Radius Precision: Inputs/buttons = 8px, cards = 16px (if filled), icon buttons = 80px. No deviations.
Shadow Subtlety: Apply shadows only on hover/focus/active states. Use provided shadow values (Raised, Elevated, High) exactly; do not invent custom shadows.
Accessibility Compliance: Maintain 44px minimum touch targets; 7:1 color contrast on text; 3:1 on graphics. Test all interactions with WCAG AA standards.
Responsive Discipline: Mobile ≤599px (single-column, 16px padding), Tablet 600–1023px (two-column, 24px padding), Desktop ≥1024px (multi-column, 32–48px padding, 1140px max-width).
Component Reusability: Every button must support at least three states (default, hover, active). Every card must have both transparent and filled variants. Every input must show focus and error states.

Want a DESIGN.md like this for your own website?