https://gemvale.github.io/

1<!doctype html>
2<html lang="en">
3  <head><meta charset="utf-8">
4<meta name="viewport" content="width=device-width, initial-scale=1">
5<title>Gemvale</title>

6<script>{;const saved = localStorage.getItem('rspress-theme-appearance');const preferDark = window.matchMedia('(prefers-color-scheme: dark)').matches;const isDark = !saved || saved === 'auto' ? preferDark : saved === 'dark';document.documentElement.classList.toggle('dark', isDark);document.documentElement.classList.toggle('rp-dark', isDark);document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';}</script>

6
7<link href="/static/css/styles.dc5d7eb7fd.css" rel="stylesheet">

8<script defer src="/static/js/styles.f526d1bd99.js"></script>

8

9<script defer src="/static/js/lib-react.c7211a2ea3.js"></script>

9

10<script defer src="/static/js/lib-router.9f055804fd.js"></script>

10

11<script defer src="/static/js/880.992e30c212.js"></script>

11

12<script defer src="/static/js/index.1c6f86320f.js"></script>

12
13<meta http-equiv="X-UA-Compatible" content="IE=edge">
14<meta name="generator" content="Rspress v2.0.3">
15<link rel="icon" href="/icon.png">
16<meta property="og:type" content="website">
17<meta property="og:title" content="Gemvale"></head>
18
19  <body>
20    <div id="__rspress_root"><link rel="preload" as="image" href="/icon.png"/><header class="rp-nav"><div class="rp-nav__left"><div class="rp-nav__title"><a href="/" class="rp-nav__title__link rp-link"><div class="rp-nav__title__logo"><img src="/icon.png" alt="logo" id="logo" class="rspress-logo rp-nav__title__logo-image rp-nav__title__logo-image--light"/><img src="/icon.png" alt="logo" id="logo" class="rspress-logo rp-nav__title__logo-image rp-nav__title__logo-image--dark"/></div><span>Gemvale</span></a></div></div><div class="rp-nav__right"><button class="rp-search-button"><div class="rp-search-button__content"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 20 21" class="rp-search-button__icon"><path fill="currentColor" d="M8.333 1.913A6.667 6.667 0 0 1 15 8.58c0 1.54-.525 2.957-1.402 4.085l4.49 4.492a.834.834 0 0 1-1.177 1.178l-4.491-4.49a6.64 6.64 0 0 1-4.087 1.402 6.667 6.667 0 0 1 0-13.334m0 1.667a5 5 0 1 0 0 10 5 5 0 0 0 0-10"></path></svg><span class="rp-search-button__word">Search</span></div><div class="rp-search-button__hotkey" style="opacity:0"><span></span><span>K</span></div></button><div class="rp-search-button--mobile"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="none" viewBox="0 0 20 21"><path fill="currentColor" d="M8.333 1.913A6.667 6.667 0 0 1 15 8.58c0 1.54-.525 2.957-1.402 4.085l4.49 4.492a.834.834 0 0 1-1.177 1.178l-4.491-4.49a6.64 6.64 0 0 1-4.087 1.402 6.667 6.667 0 0 1 0-13.334m0 1.667a5 5 0 1 0 0 10 5 5 0 0 0 0-10"></path></svg></div><ul class="rp-nav-menu rp-nav-menu--right"><li class="rp-nav-menu__item"><a href="/web/introduction.html" class="rp-nav-menu__item__container rp-link">Web</a></li><li class="rp-nav-menu__item"><a href="/lynx/introduction.html" class="rp-nav-menu__item__container rp-link">Lynx</a></li></ul><div class="rp-nav__others"><div class="rp-nav-menu__divider"></div><div class="rp-switch-appearance"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24" class="rp-switch-appearance__icon rp-switch-appearance__icon--sun"><path fill="currentColor" d="m7.001 15.848-1.226 1.226a.58.58 0 0 0 0 .818.58.58 0 0 0 .818 0l1.226-1.226a.58.58 0 0 0 0-.818.58.58 0 0 0-.818 0m-.352-8.735a.584.584 0 0 0 .825-.825L6.237 5.051a.584.584 0 0 0-.825.825zM5.011 11.07h-1.75a.584.584 0 0 0 0 1.167h1.75c.324 0 .584-.26.584-.583a.585.585 0 0 0-.584-.584m7.003-5.835c.324 0 .584-.26.584-.584V2.9a.58.58 0 0 0-.584-.584.58.58 0 0 0-.583.583V4.65c0 .323.262.584.583.584m5.616 1.621 1.226-1.225a.58.58 0 0 0 0-.818.58.58 0 0 0-.818 0l-1.226 1.225a.58.58 0 0 0 0 .818.576.576 0 0 0 .818 0m3.138 4.214h-1.75a.58.58 0 0 0-.584.584c0 .324.26.584.583.584h1.751a.584.584 0 1 0 0-1.167m-3.389 5.124a.584.584 0 0 0-.825.825l1.238 1.238a.584.584 0 0 0 .825-.826zm-5.365-9.795a5.256 5.256 0 0 0-5.257 5.258 5.256 5.256 0 0 0 5.257 5.257 5.256 5.256 0 0 0 5.257-5.257 5.256 5.256 0 0 0-5.257-5.258m0 11.675a.58.58 0 0 0-.583.583v1.751a.582.582 0 1 0 1.167 0v-1.75a.584.584 0 0 0-.584-.584"></path></svg><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" viewBox="0 0 19 19" class="rp-switch-appearance__icon rp-switch-appearance__icon--moon"><path fill="currentColor" d="M9.166 0a9.2 9.2 0 0 1 1.857.188.834.834 0 0 1 .042 1.623 4.47 4.47 0 1 0 5.457 5.457l.048-.135a.834.834 0 0 1 1.575.177q.186.902.188 1.856A9.168 9.168 0 1 1 9.166 0"></path></svg></div><div class="rp-social-links"><a href="https://github.com/gemvale" target="_blank" rel="noopener noreferrer" class="rp-social-links__item"><div class="rp-social-links__icon"><div class="rp-social-links__icon"><svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a><ul class="rp-hover-group rp-hover-group--hidden rp-hover-group--right"></ul></div></div><button aria-label="mobile hamburger" class="rp-nav-hamburger rp-nav-hamburger__sm"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="none" viewBox="0 0 21 21"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.667" d="M3.645 5.225h13.333M3.645 10.225h13.333M3.645 15.225h13.333"></path></svg></button><button aria-label="mobile hamburger" class="rp-nav-hamburger rp-nav-hamburger__md"><svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="none" viewBox="0 0 21 21"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.667" d="M3.645 5.225h13.333M3.645 10.225h13.333M3.645 15.225h13.333"></path></svg><ul class="rp-hover-group rp-hover-group--hidden rp-hover-group--right"><div class="rp-nav-menu__others-mobile__container"><div class="rp-nav-hamburger__md__hover-group"><div class="rp-nav-screen-appearance"><div class="rp-nav-screen-appearance__left">Theme</div><div class="rp-nav-screen-appearance__right"></div></div><div class="rp-nav-screen-divider"></div><div class="rp-social-links"><a href="https://github.com/gemvale" target="_blank" rel="noopener noreferrer" class="rp-social-links__item"><div class="rp-social-links__icon"><div class="rp-social-links__icon">

20<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></div></div></a><ul class="rp-hover-group rp-hover-group--hidden rp-hover-group--right"></ul></div></div></div></ul></button></div></header><style>body:not(.notTopArrived) .rp-nav {background: transparent !important; border-bottom: 1px solid transparent !important;}.rp-nav {background: color-mix(in srgb,var(--rp-c-bg) 60%,transparent);backdrop-filter: blur(25px);}</style><div class="rp-home-background"></div><div class="rp-home-hero"><div class="rp-home-hero__container"><div class="rp-home-hero__content"><div class="rp-home-hero__title"><span class="rp-home-hero__title-brand">Gemvale</span></div><div class="rp-home-hero__subtitle">CSS-in-JS ecosystem</div></div><p class="rp-home-hero__tagline">Type-safe, performant, scalable.</p><div class="rp-home-hero__actions"><a href="/web/installation" class="rp-button rp-button--brand rp-button--big rp-home-hero__action rp-link">Quick Start</a><a href="/lynx/installation" class="rp-button rp-button--alt rp-button--big rp-home-hero__action rp-link">Lynx</a></div></div><div class="rp-home-hero__image"><img src="/icon.png" alt="Logo" width="375" height="375" class="rp-home-hero__image-img rp-home-hero__image-img--light"/><img src="/icon.png" alt="Logo" width="375" height="375" class="rp-home-hero__image-img rp-home-hero__image-img--dark"/></div></div><div class="rp-home-feature"><div style="transform-style:preserve-3d" class="rp-home-feature__item rp-home-feature__item--span-4"><div class="rp-home-feature__item-wrapper"><article class="rp-home-feature__card "><div class="rp-home-feature__title-wrapper"><div class="rp-home-feature__icon"><span>✅</span></div><h2 class="rp-home-feature__title">Type-safe by default</h2></div><p class="rp-home-feature__detail">All the functions are type-safe by default, making it easy to use.</p></article></div><div class="rp-home-feature__item__shine" style="position:absolute;user-select:none;pointer-events:none;top:0;left:0;right:0;bottom:0;border-radius:20px;z-index:8"></div></div><div style="transform-style:preserve-3d" class="rp-home-feature__item rp-home-feature__item--span-4"><div class="rp-home-feature__item-wrapper"><article class="rp-home-feature__card "><div class="rp-home-feature__title-wrapper"><div class="rp-home-feature__icon"><span>🚫</span></div><h2 class="rp-home-feature__title">No runtime overhead by default</h2></div><p class="rp-home-feature__detail">With static functions, all the computations are done at compile time, no runtime overhead is introduced.</p></article></div><div class="rp-home-feature__item__shine" style="position:absolute;user-select:none;pointer-events:none;top:0;left:0;right:0;bottom:0;border-radius:20px;z-index:8"></div></div><div style="transform-style:preserve-3d" class="rp-home-feature__item rp-home-feature__item--span-4"><div class="rp-home-feature__item-wrapper"><article class="rp-home-feature__card "><div class="rp-home-feature__title-wrapper"><div class="rp-home-feature__icon"><span>📦</span></div><h2 class="rp-home-feature__title">Optimized for scale</h2></div><p class="rp-home-feature__detail">With atomic css architecture, it is easy to maintain and scale.</p></article></div><div class="rp-home-feature__item__shine" style="position:absolute;user-select:none;pointer-events:none;top:0;left:0;right:0;bottom:0;border-radius:20px;z-index:8"></div></div></div><footer class="rp-home-footer">

20<div class="rp-home-footer__container"><div class="rp-home-footer__message">Copyright © 2026, Alpheus</div></div></footer></div>
21    <div id="__rspress_modal_container"></div>
22  </body>
23</html>