Gel bevel button
A raised plastic pill with a top specular highlight and dark base edge.
.gel-button {
background: linear-gradient(180deg, #7CBB53 0%, #4E9A28 52%, #3F7C20 100%);
border: 1px solid #305E19;
border-radius: 4px;
color: #fff;
font-weight: 700;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.55), /* top highlight sheen */
inset 0 -2px 3px rgba(0,0,0,0.18), /* base bevel */
0 2px 6px rgba(0,40,90,0.28); /* pillow drop */
transition: box-shadow 250ms cubic-bezier(0.4,0,0.2,1);
}
.gel-button:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 4px 12px rgba(0,40,90,0.32); }
Luna title bar
A glossy blue gradient window header with a rounded top and glass sheen.
.luna-titlebar {
background: linear-gradient(180deg, #6B99E7 0%, #245EDC 48%, #1D4CB6 100%);
border-radius: 8px 8px 0 0;
color: #fff;
font-family: 'Signika', sans-serif;
font-weight: 700;
padding: 6px 12px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45); /* top glass line */
}
Bliss sky ground
The master sky-to-hill gradient split that anchors the whole desktop.
.bliss-ground {
background:
linear-gradient(180deg, transparent 62%, #6DA544 62%, #5C9139 100%),
linear-gradient(180deg, #3E8FD4 0%, #4A93D8 40%, #8FC4EC 62%);
}