KauryGitHubGet started← Library
7 pieces
Headers & navs
The top of a site, in every mood. Menus fold on phones by themselves.
Minimal
minimal
10 lines
See the code
site "Minimal"
colors ink #141414, paper #FAFAF7
fonts "Satoshi"
style background paper, color ink
page "/"
section header, border-bottom 1 #14141414
logo "Northwind"
links Product, Pricing, Customers, Blog
button "Sign in", small
```Floating glass
glass
16 lines
See the code
site "Floating glass"
colors deep #0E0B1F, violet #7B5CFF, rose #FF7AC6, aqua #4DE1FF
fonts "General Sans"
style background deep, color white
style float-nav
glass, radius 999, padding 10 12 10 26, margin 24 auto 0, max-width 860, border 1 #FFFFFF2E
link color white, plain, weight 500
button background white, color deep, shadow none
page "/"
section fullscreen, mesh violet rose aqua, padding 0 16
section header, float-nav
logo "Aurora"
links Features, Pricing, Docs
button "Get the app", small
```Bold dark
bold
17 lines
See the code
site "Bold dark"
colors night #0B0B0C, lime #C6FF4D
fonts "Satoshi", "Clash Display"
style background night, color white
style big-logo
font "titles", size 30, weight 700, tracking -1
style loud
link uppercase, tracking 2, size 13, weight 600, plain, color #FFFFFFB3
button background lime, color night, radius 999, weight 700
page "/"
section header, loud, padding 26 40
logo "VOLT®", big-logo
links Work, Studio, Journal, Contact
button "Start a project ↗", small
```Brutalist bar
brutalist
15 lines
See the code
site "Brutalist bar"
colors acid #D7FF3A, ink #111111, paper #F2F0E9
fonts "Space Mono", "Space Grotesk"
style background paper, color ink
style brutal-bar
background acid, border-bottom 3 ink, padding 18 28
link font "mono", uppercase, size 13, weight 700, plain, color ink
button background ink, color acid, radius 0, shadow none, font "mono", uppercase
page "/"
section header, brutal-bar
logo "[ KILN ]"
links Index, Objects, Archive, Info
button "Cart (0)", small
```Centered logo
luxury
20 lines
See the code
site "Centered logo"
colors noir #15120F, ivory #F4EEE3, gold #B08D57
fonts "Satoshi", "Gambetta"
style background ivory, color noir
style serif-logo
font "titles", size 34, italic, tracking -1
style small-caps
uppercase, tracking 3, size 12, weight 500
page "/"
section header, border-bottom 1 #B08D5766, padding 22 40
row gap 28, small-caps
link "Collections" "#"
link "Atelier" "#"
logo "Maison Ivre", serif-logo
row gap 28, small-caps
link "Journal" "#"
link "Appointment" "#"
```Pill tabs
minimal
23 lines
See the code
site "Pill tabs"
colors ink #121212, mist #EEEEEA, white #FFFFFF
fonts "Satoshi"
style background white, color ink
state tab = 0
let tabs = ["Overview", "Features", "Pricing", "Changelog"]
style tab-bar
background mist, radius 999, padding 6, gap 4
style tab-pill
background transparent, color ink, radius 999, padding 10 20, size 15, weight 500, shadow none
hover background #12121210
selected background ink, color white
page "/"
section header, padding 24 32
logo "◐ Halo"
row tab-bar, attr "role" "tablist"
for t, i in tabs
button t, tab-pill, selected (tab == i) -> tab = i
button "Try it", small
```Announcement bar
colorful
18 lines
See the code
site "Announcement"
colors grape #6C3BFF, candy #FF4FA3, cream #FFF8F0, ink #1D1630
fonts "Cabinet Grotesk"
style background cream, color ink
style news
gradient grape candy, color white, center, padding 10 16, size 14, weight 600
link color white, underline
page "/"
section top, news, full-width
row center, gap 10
text "✨ New: dark mode and 3D charts are here."
link "See what's new →" "#"
section header
logo "Plume"
links Product, Templates, Pricing
button "Start free", small
```