Ge 骨

A design system is not decoration. It is the bone structure beneath everything — invisible when done right, catastrophic when missing. Ge provides only what is necessary: the skeleton. Flesh, skin, expression — that belongs to what is built on top.

bone · skeleton · framework · spirit

Deployment

@layer base,pages,components,etc;

@import "./css/vars.css" layer(base); /*CSS Export Output*/
@import "./css/base.css" layer(base);

headings — h1 through h6

h1

Lorem ipsum dolor sit amet consectetur

h2

Adipiscing elit sed do eiusmod tempor

h3

Incididunt ut labore et dolore magna aliqua

h4

Ut enim ad minim veniam quis nostrud

h5

Exercitation ullamco laboris nisi aliquip

h6

Duis aute irure dolor in reprehenderit

typography

--font-sans · body

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

--font-mono · code

const token = color-mix(in srgb, cyan, var(--fg) 50%);

--font-serif · editorial

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

--muted · secondary text

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

a · link hover

Hover over this link to see the color and underline transition.

functional colors

--pr · primary

--sc · success

--da · danger

--wr · warning

accent variants

primary

--pr-bg

--pr-subtle

--pr-border

success

--sc-bg

--sc-subtle

--sc-border

danger

--da-bg

--da-subtle

--da-border

warning

--wr-bg

--wr-subtle

--wr-border

backgrounds

--bg

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

--bg-subtle

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

--bg-overlay

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

--bg-inset

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

borders

--border-muted

--border

--border-hover

spacing

--xxs

.25rem

--xs

.5rem

--sm

1rem

--md

1.5rem

--lg

2rem

--xlg

2.5rem

buttons

badges

primary success danger warning muted

forms

text input

select

textarea

table

token	value	use
`--xxs`	.25rem	Tight inline gaps
`--xs`	.5rem	Small padding
`--sm`	1rem	Base unit
`--md`	1.5rem	Medium spacing
`--lg`	2rem	Section spacing
`--xlg`	2.5rem	Large section spacing

code block

--pr-bg: color-mix(in srgb, var(--bg), var(--pr) 20%);
--pr-subtle: color-mix(in srgb, var(--bg), var(--pr) 10%);
--pr-border: color-mix(in srgb, var(--bg), var(--pr) 40%);

utilities — flex

.flex.row.gap-3

.flex.column.center.middle

.flex.between

.flex.grow