---
title: "Design direction"
url: https://phatdev.net/en/docs/iga/thiet-ke
lang: en
updated: 2026-10-20
alternate:
  vi: https://phatdev.net/docs/iga/thiet-ke
markdown: https://phatdev.net/en/docs/iga/thiet-ke.md
---

# Design direction

Part of the doc set: [IGA (Infinity Gems)](https://phatdev.net/en/docs/iga.md)

> Three mockup directions and the one that was chosen.

## Three directions tried
| Direction | Colors and type | Notes |
|---|---|---|
| A. Night showroom | Charcoal-green background, jade accent, EB Garamond + Be Vietnam Pro | Colored stones stand out, but hand-held photos on a light background look out of place |
| B. Cool silver and sapphire | Light silver-grey background, sapphire accent, Noto Serif Display + Manrope | Clear, easy to read, best PSI |
| C. Lacquer black and brand gold | Neutral black background, gold accent, Cormorant Garamond + Be Vietnam Pro | Elegant, matches the black and gold logo |

## Chosen direction
**Direction C**: keeps the brand DNA (a black and gold logo), the gold price stands out on black, and text contrast meets WCAG AA.

## Conventions
- One accent color, 4 px corner radius for buttons and inputs, 2 px for images, rounded chips.
- Light motion, switched off when the user enables reduced motion.
- No emoji; icons come from a single library.