/* ============================================================ BitMart Design System — Colors & Typography Source: BMDS (BitMart Design System), Figma + Skill v2 ============================================================ */ /* Alexandria — sole brand font. Self-hosted from /fonts (uploaded TTFs). CDN fallback kept as a comment. */ @font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 100; font-display: swap; src: url('fonts/Alexandria-Thin___.ttf') format('truetype'); } @font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/Alexandria-Light___.ttf') format('truetype'); } @font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/Alexandria-Regular___.ttf') format('truetype'); } @font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/Alexandria-Medium___.ttf') format('truetype'); } @font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/Alexandria-SemiBold___.ttf') format('truetype'); } @font-face { font-family: 'Alexandria'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/Alexandria-Bold___.ttf') format('truetype'); } /* CDN fallback (not used while self-hosted): https://fonts.font.im/css2?family=Alexandria:wght@400;500;600;700&display=swap */ /* ------------------------------------------------------------ 1. Color tokens — Day (Light) mode ------------------------------------------------------------ */ :root, [data-theme="day"] { /* Text */ --color-primary: #0F0F0F; /* fg1 — headings, body, important fields */ --color-secondary: #B0B0B0; /* fg2 — less important, table headers */ --color-third: #CCCCCC; /* fg3 — input placeholder */ --btn-text: #FFFFFF; /* text on solid colored buttons */ /* Backgrounds */ --color-bg: #FFFFFF; /* page bg */ --color-bgline: #F3F4F7; /* input/select/filter on overlay */ --color-bgline2: #F4F4F4; /* input/select/filter on page */ --color-pop: #363636; /* tooltip */ --dialog-bg: #FFFFFF; /* dialog / drawer */ --color-tab-select: #E8E8E9; /* tertiary tab selected */ --color-carousel: rgba(255, 255, 255, 0.20); --color-mask: rgba(0, 0, 0, 0.70); /* overlay scrim */ /* Border / divider */ --color-border: #E8E8E9; --color-divider: #F3F4F7; /* Functional — CEX mode */ --color-brand: #03B2BD; --color-brand-bg: rgba(3, 178, 189, 0.10); --color-warning: #F19D1E; --color-warning-bg: rgba(241, 157, 30, 0.10); --color-buy: #13C287; /* buy / rise / success */ --color-buy-bg: rgba(19, 194, 135, 0.10); --color-sell: #FA3B61; /* sell / fall / failure */ --color-sell-bg: rgba(250, 59, 97, 0.10); /* Motion */ --motion-enter: 300ms ease-in-out; --motion-exit: 200ms ease-in-out; } /* ------------------------------------------------------------ 2. Color tokens — Night (Dark) mode ------------------------------------------------------------ */ [data-theme="night"] { --color-primary: #F3F3F3; --color-secondary: #787878; --color-third: #4D4D4D; --btn-text: #1C1E1F; --color-bg: #000000; --color-bgline: #262729; --color-bgline2: #1B1D1F; --color-pop: #E5E5E5; --dialog-bg: #141517; --color-tab-select: #2C2F32; --color-carousel: rgba(26, 27, 31, 0.20); --color-mask: rgba(0, 0, 0, 0.70); --color-border: #2C2F32; --color-divider: #2C2F32; --color-brand: #00F8F8; --color-brand-bg: rgba(0, 248, 248, 0.20); --color-warning: #F19D1E; --color-warning-bg: rgba(241, 157, 30, 0.20); --color-buy: #13C287; --color-buy-bg: rgba(19, 194, 135, 0.20); --color-sell: #FA3B61; --color-sell-bg: rgba(250, 59, 97, 0.20); } /* ------------------------------------------------------------ 3. Base typography ------------------------------------------------------------ */ *, *::before, *::after { font-family: 'Alexandria', sans-serif; line-height: 1.35; /* required globally */ } body { font-family: 'Alexandria', sans-serif; font-weight: 400; font-size: 14px; color: var(--color-primary); background: var(--color-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ------------------------------------------------------------ 4. Headings (H1–H7) — semantic CSS vars ------------------------------------------------------------ */ .bm-h1 { font-size: 64px; font-weight: 600; } /* Display / Hero */ .bm-h2 { font-size: 40px; font-weight: 600; } /* Section hero */ .bm-h3 { font-size: 32px; font-weight: 600; } /* Section title */ .bm-h4 { font-size: 28px; font-weight: 600; } /* Sub-section */ .bm-h5 { font-size: 24px; font-weight: 600; } /* Card / modal title */ .bm-h6 { font-size: 20px; font-weight: 600; } /* Component title */ .bm-h7 { font-size: 18px; font-weight: 500; } /* Item title */ /* Subtitle scale */ .bm-s1 { font-size: 16px; font-weight: 600; } .bm-s2 { font-size: 16px; font-weight: 500; } .bm-s3 { font-size: 14px; font-weight: 600; } .bm-s4 { font-size: 14px; font-weight: 500; } .bm-s5 { font-size: 12px; font-weight: 500; } /* Body scale */ .bm-b1 { font-size: 16px; font-weight: 400; } .bm-b2 { font-size: 14px; font-weight: 400; } .bm-b3 { font-size: 12px; font-weight: 400; } .bm-b4 { font-size: 10px; font-weight: 400; } .bm-b5 { font-size: 8px; font-weight: 400; } /* Crypto numerics — large price / amount displays */ .bm-crypto-num { font-size: 40px; font-weight: 500; font-variant-numeric: tabular-nums; } /* Tag default → selected pattern lives in component CSS, not here */ /* ------------------------------------------------------------ 5. Spacing scale (reference) 2 4 6 8 10 12 16 20 24 32 40 48 64 72 80 px ------------------------------------------------------------ */ /* ------------------------------------------------------------ 6. Border-radius scale 2 4 8 12 16 20 24 px — pill: 9999px ------------------------------------------------------------ */ /* ------------------------------------------------------------ 7. Hard rules — copy these guards into component sheets - NEVER box-shadow, drop-shadow, text-shadow, filter:drop-shadow - NEVER emoji as UI iconography - NEVER non-Alexandria fonts - Brand color (--color-brand) usage budget < 10% of pixel area ------------------------------------------------------------ */