Blaxi Styleguide
The foundation of Blaxi’s brand and product design. Explore our visual language, tone, and UI standards to ensure consistency across every experience.
Branding
Logos
Colors
Content
Background
Border
Typography
Headings
H1 - 56px/56px
Introduction
H2 - 40px/44px
Introduction
H3 - 32px/40px
Introduction
H4 - 24px/32px
Introduction
Body text
H1 - 18px/24px
Introduction
H1 - 16px/20px
Introduction
H1 - 14px/20px
Introduction
Colour38
--bx-off-white#fffbf8--bx-zinc-700#52525b--bx-zinc-950#09090b--bx-zinc-850#27272a--bx-zinc-150#e4e4e7--bx-whitewhite--bx-warm-white#fffdfb--bx-primary-500#be0f00--bx-transparenttransparent--bx-zinc-50#fafafa--bx-zinc-800#3f3f46--bx-neutral-75#f4f4f5--bx-black-soft#0a0a0a--bx-zinc-400#a1a1aa--bx-blackblack--bx-neutral-500#888--bx-zinc-600#71717a--bx-zinc-300#d4d4d8--bx-zinc-900#18181b--bx-info-500#227dd8--bx-neutral-650#525252--bx-surface-dark#1a1a1a--bx-danger#d82225--bx-neutral-550#646468--bx-surface-light#fbfbfb--bx-warning#ffb92c--bx-accent-dark#16101e--bx-danger-light#f77368--bx-accent-orange#973700--bx-neutral-100whitesmoke--bx-neutral-200#e3e3e3--bx-neutral-125#f6f6f6--bx-orange-500#ff5c00--bx-neutral-175#f7f7f8--bx-neutral-300#d5d5d5--bx-neutral-warm-50#fff9f6--bx-neutral-250#d9d9d9--bx-orange-700#b24000Type scale96 responsive
--bx-fs-xxs12px--bx-fs-xs14px--bx-fs-s16px--bx-fs-m18px≤767px: 16px--bx-fs-l24px≤991px: 22px≤767px: 20px≤479px: 18px--bx-fs-xl32px≤991px: 28px≤767px: 24px≤479px: 20px--bx-fs-2xl40px≤991px: 36px≤767px: 32px≤479px: 28px--bx-fs-3xl48px≤991px: 40px≤767px: 36px≤479px: 32px--bx-fs-4xl56px≤991px: 48px≤767px: 40px≤479px: 36pxFont families2
--bx-family-primaryvar(--bx-font-inter), Inter, sans-serif--bx-family-secondaryvar(--bx-font-urbanist), Urbanist, sans-serifWeights & line heights12
--bx-weight-regular400--bx-weight-semi-bold600--bx-weight-medium500--bx-weight-bold700--bx-leading-l125%--bx-leading-xs110%--bx-leading-xl133%--bx-leading-3xl150%--bx-leading-2xl143%--bx-leading-xxs100%--bx-leading-s117%--bx-leading-m120%Spacing3219 responsive
--bx-space-none0px--bx-tracking-none0px--bx-space-xxs2px--bx-space-xs4px--bx-space-s6px--bx-space-m8px--bx-space-l10px--bx-space-xl12px--bx-space-xxl14px--bx-space-2xl16px--bx-space-3xl18px≤767px: 16px--bx-space-4xl20px≤767px: 18px≤479px: 16px--bx-space-5xl24px≤991px: 22px≤767px: 20px≤479px: 16px--bx-space-6xl28px≤991px: 24px≤767px: 20px≤479px: 18px--bx-space-7xl30px≤991px: 24px≤767px: 20px--bx-space-8xl32px≤991px: 28px≤767px: 20px--bx-space-9xl36px≤991px: 30px≤479px: 24px--bx-space-10xl40px≤991px: 35px≤767px: 30px≤479px: 24px--bx-space-11xl48px≤991px: 40px≤767px: 35px≤479px: 30px--bx-space-12xl60px≤991px: 50px≤767px: 40px≤479px: 30px--bx-space-13xl80px≤991px: 60px≤767px: 50px≤479px: 40px--bx-container-width1312px≤479px: 1192px--bx-tracking-2xl-2.24px≤991px: -1.92px≤767px: -1.6px≤479px: -1.36px--bx-tracking-l-1.6px≤991px: -1.36px≤767px: -1.28px≤479px: -1.12px--bx-tracking-xl-1.92px≤991px: -1.6px≤767px: -1.36px≤479px: -1.28px--bx-tracking-m-1.28px≤991px: -1.12px≤767px: -.96px≤479px: -.8px--bx-tracking-s-.96px≤991px: -.88px≤767px: .8px≤479px: -.72px--bx-tracking-xs-.64px≤991px: -.48px≤767px: -.4px≤479px: -.32px--bx-tracking-xxs-.56px≤991px: .4px≤767px: .32px≤479px: .24px--bx-full-width100%--bx-full-height100%--bx-radius-circle50%Motion3
--bx-reveal-duration0.6s--bx-reveal-distance100px--bx-ease-revealcubic-bezier(0.22, 0.61, 0.36, 1)