Keyzen · Style guide · Phase 2 review
Type in zen.
Every color, type size and keycap the store is built from. Check this page first. If something feels off here, it will feel off everywhere.
Press K for keyboards. Press ? for every shortcut.
Color tokens · Elementor global variables
Warm ink, one ember.
kz-ink
#141210
Page background
kz-graphite
#1E1B18
Cards, header, keycaps
kz-seam
#2E2924
Borders, dividers, grid lines
kz-paper
#F3EDE4
Text on dark, paper sections
kz-dust
#A39A8F
Secondary text on dark
kz-stone
#6B635A
Secondary text on paper
kz-ember
#FF4F28
Primary buttons, active keys, badges
kz-ember-deep
#C2370F
Accent text and links on paper
kz-lamp
#FFB547
Glows, highlights, focus ring
Type scale
H1 · Unbounded 700 · 112 / 80 / 44 px
Type in zen.
H2 · Unbounded 600 · 64 / 48 / 32 px
On the desk right now.
H3 · Manrope 700 · 28 / 24 / 22 px
Gasket mount, explained.
H4 · Manrope 700 · 22 / 20 px
Hot-swap friendly
H5 · Manrope 700 · 18 px
Inside Dhaka delivery
H6 · Manrope 700 · 16 px
In the box
Body · Manrope 400 · 17 / 16 px · line-height 1.6
A hot-swap board lets you pull a switch out and push a new one in. No soldering. Try linear switches this month and tactile ones next month.
Lead · Manrope 400 · 19 px · dust
Mechanical keyboards, keycaps and switches, tuned for calm focus and that deep, satisfying thock.
Label · JetBrains Mono 500 · 13 / 12 px · uppercase · 0.08em
Mechanical keyboards · Keycaps · Switches
Hint · JetBrains Mono 500 · 13 px
Press K for keyboards. Press ? for every shortcut.
Price · JetBrains Mono 600 · 18 / 16 px
৳11,500 ৳12,500
Accent text · Ember on ink
Hear it before you buy it.
Keycap component · kz-keycap
Press anything.
Hover lifts a key 1 px with a soft lamp glow. Pressing drops it 3 px. Tab to a key to see the lamp focus ring.
A row of the keyboard plate
Chips and badges
Gasket mount
Hot-swap
Tri-mode
Sale
Cards · 16 px radius
On the desk right now.
Keyboards
Keyzen K65 Flow
65% · Aluminum · Gasket mount · Tri-mode
৳11,500 ৳12,500
01
Hot-swap friendly
Pull a switch, push a new one in. No soldering, no tools beyond the puller in the box.
Product card note
Real cards come from WooCommerce
The card on the left is a visual mock. Shop and category pages render real WooCommerce cards with the same look in Phase 7.
Paper section · kz-paper
Find your feel.
Light sections use paper with ink text. Secondary text turns stone, links and accents turn ember deep so they still pass contrast.
Imagery · cleaned from your 5 images
The desk at night.
Home hero · moss keyboard cutout
404 page · claw and Shift key
Keyboard club · bloom keyboard