# Amarkets Design System

> High-contrast financial precision anchored by ultra-light Inter display weights and a strict monochrome foundation punctuated by functional green.

**Source:** https://amarkets.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Amarkets utilizes a "monochrome plus functional accent" system that prioritizes data legibility and institutional trust. The palette is dominated by deep charcoal `#0b0a0a` and slate `#252e37` against a stark white `#ffffff` canvas. Brand "voltage" is concentrated in a specific functional green `#4caf50` used for primary conversion actions and success states. Typography is the primary identity driver, featuring **Inter** at an extreme weight of 200 for large display headers, creating a sophisticated, editorial feel that contrasts with the dense, high-information tables and quote grids.

## Signature DNA
1. **Ultra-Light Display** (Inter at weight 200 used for primary benefits and hero statements, creating an airy, premium contrast to dense trading data).
2. **Functional Green CTAs** (The use of `#4caf50` is strictly reserved for "Open Account" actions and positive market indicators, serving as the only high-saturation signal in a grayscale environment).
3. **Sharp Edge Geometry** (A heavy reliance on `0px` border radius for content sections and quote tables, signaling technical rigor and precision).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary background, card surfaces | 91 | 1.0 | `--white` |
| `{color.ink.primary}` | `#0b0a0a` | Primary headings, dark section backgrounds | 20 | 0.8 | Computed |
| `{color.ink.secondary}` | `#252e37` | Body text, secondary UI labels | 143 | 0.8 | Computed |
| `{color.surface.soft}` | `#f4f5f5` | Alternating section backgrounds | 15 | 1.0 | `--light` |
| `{color.border.muted}` | `#d8d8d8` | Table dividers, input borders | 7 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.action}` | `#4caf50` | Primary buttons, success indicators | 14 | 0.8 | Computed |
| `{color.accent.warning}` | `#fb7101` | Secondary alerts, decorative text | 4 | 0.6 | decorative_only |
| `{color.accent.navy}` | `#132c40` | Deep footer/header backgrounds | 5 | 0.6 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| **Inter** | 200, 400, 500, 600, 700, 800 | Body, Display, UI | Inter (Google Fonts) | SIL OFL |
| **InterTight** | 400, 500 | Section Headings | Inter Tight (Google Fonts) | SIL OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.mega}` | 60px | 82.5px | normal | 200 | Hero benefits | `i`, `p.experience--benefit` |
| `{type.display.lg}` | 40px | 52px | normal | 500 | Slider headers | `div.ms-slider__word` |
| `{type.h2}` | 32px | 38.4px | normal | 400 | Section titles | `h2` |
| `{type.h2.bold}` | 32px | 48.64px | normal | 700 | Highlight cells | `div.cell.highlight__cell` |
| `{type.h4}` | 24px | 28.8px | normal | 400 | Sub-section heads | `h4.mb-2` |
| `{type.body.lg}` | 18px | 21px | normal | 400 | Intro paragraphs | `p.experience--text` |
| `{type.body.md}` | 16px | 22px | normal | 400 | Default body | `div#homepage_slider` |
| `{type.body.sm}` | 14px | 19.25px | normal | 400 | Table content | `div.vc_row.wpb_row` |
| `{type.caption}` | 12px | 16.5px | normal | 400 | Metadata, dates | `div.loop_post_date` |

### Principles
1. **Weight Contrast:** Pair weight 200 display text with weight 700 UI labels to establish clear hierarchy.
2. **Tight Heading Leading:** Large display sizes use a line-height ratio of ~1.2 to keep multi-line headers cohesive.
3. **Tabular Alignment:** All quote and account data must use standard Inter tracking (normal) for vertical alignment in grids.

## Spacing
**Base unit:** 4px (inferred from 8, 16, 20, 32)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 20 |
| `{space.sm}` | 15px | 95 |
| `{space.md}` | 20px | 25 |
| `{space.lg}` | 32px | 7 |
| `{space.xl}` | 48px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Major sections, data tables, quote grids | 275 occurrences |
| `{radius.sm}` | 4px | Form inputs | Computed style |
| `{radius.md}` | 5px | Primary and secondary buttons | Rounded Button component |

## Components
### Tier 1: Foundational
#### Primary Action Button
**Role:** Main conversion point (Open Account)
**Pages observed:** https://amarkets.com
**Spec:** Background `#4caf50` | Text `#ffffff` | Radius `5px` | Padding `11px 24px` | Typography `16px/700`
**States observed:** Default | Hover: captured

#### Secondary Outline Button
**Role:** Platform selection (MetaTrader)
**Pages observed:** https://amarkets.com
**Spec:** Background `transparent` | Text `#252e37` | Border `1px solid #d8d8d8` | Radius `5px` | Typography `12px/700`
**States observed:** Default | Hover: captured

### Tier 2: Patterns
#### Account Type Card
**Role:** Pricing and feature comparison
**Pages observed:** https://amarkets.com
**Spec:** Background `#ffffff` | Text `#252e37` | Border `1px solid #ebeff1` | Radius `0px` | Padding `28px 20px`
**States observed:** Default | Active (Standard tier highlighted with green button)

#### Quote Grid Row
**Role:** Real-time financial data display
**Pages observed:** https://amarkets.com
**Spec:** Background `transparent` | Text `#252e37` | Border-bottom `1px solid #ebeff1` | Typography `14px/400`
**States observed:** Default | Hover: captured (subtle gray background)

### Tier 3: Surface-specific
#### Dark Section Surface
**Role:** High-impact benefit sections (Copy Trading)
**Pages observed:** https://amarkets.com
**Spec:** Background `#0b0a0a` | Text `#ffffff` | Radius `0px` | Padding `40px 20px`
**States observed:** Default

#### Light Data Surface
**Role:** News and secondary information blocks
**Pages observed:** https://amarkets.com
**Spec:** Background `#f7f8f8` | Text `#252e37` | Radius `0px` | Padding `15px 10px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1170px |
| Section Vertical Gap | 80px - 120px |
| Grid System | 12-column bootstrap-style |

## Do's
- Use Inter weight 200 for headlines exceeding 48px.
- Reserve `#4caf50` exclusively for primary "Open Account" buttons and positive market trends.
- Use `0px` border radius for all container-level layout blocks.
- Maintain high contrast between `#0b0a0a` backgrounds and `#ffffff` text.
- Use `#f4f5f5` for subtle background alternation between white sections.

## Don'ts
- **Wrong:** Using `#4caf50` for decorative icons or non-actionable text. **Right:** Use `#252e37` for neutral UI elements. **Reason:** Preserves the functional "signal" of the action color.
- **Wrong:** Applying rounded corners (`>5px`) to data tables or quote grids. **Right:** Keep edges sharp (`0px`). **Reason:** Maintains the technical, precise brand identity.
- **Wrong:** Mislabeling a sub-brand accent (e.g., a potential future "Crypto" orange) as the parent primary. **Right:** Always default to `#0b0a0a` as the primary brand color.

## Quick start

```css
/* Amarkets Design Tokens */
:root {
  --am-color-primary: #0b0a0a;
  --am-color-action: #4caf50;
  --am-color-canvas: #ffffff;
  --am-color-surface-soft: #f4f5f5;
  --am-color-text-main: #252e37;
  
  --am-font-main: 'Inter', sans-serif;
  --am-font-heading: 'Inter Tight', sans-serif;
  
  --am-weight-display: 200;
  --am-weight-bold: 700;
  
  --am-radius-btn: 5px;
  --am-radius-sharp: 0px;
}
```

## Known gaps
- Shadow tokens were not captured in the source; the UI appears to favor flat design with hairline borders over elevation.
- Mobile-specific spacing tokens for section padding were not explicitly declared in the CSS variables.
- Hover state hex codes for the functional green were not captured in the computed style bulk run.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://amarkets.com | 1440x900 | 2026-06-06 |
| Mobile Home | https://amarkets.com | 390x844 | 2026-06-06 |