SG2 · Design Reference
The "bones" technique: a 5-layer shadow stack that gives surfaces physical weight. Sourced from Song Social design. Adapted for GenC light, dark, and lith surfaces.
4px 6px 0px rgba(0,0,0,.08)Zero-blur drop — the crisp physical "lift" from the surface. This is the defining layer.
6px 10px 24px rgba(0,0,0,.09)Same direction, large blur. Adds atmospheric depth behind the card.
-1px -1px 0 rgba(255,255,255,.95)Top-left outer white line. Simulates ambient light catching the leading edge.
inset 0 1.5px 0 rgba(255,255,255,1)Inset top highlight. The bright inner rim — light falling onto the top face of the card.
inset 0 -3px 8px rgba(0,0,0,.05)Inset bottom shadow. The card is slightly darker at the bottom — completes the bevel.
Card
Panel Title
White card on cream. Warm ink shadows at low opacity. Top bevel + bottom depth complete the lift.
box-shadow:
4px 6px 0px rgba(13,15,13,.08), /* hard lift */
6px 10px 24px rgba(13,15,13,.09), /* diffuse */
-1px -1px 0 rgba(255,255,255,.95), /* edge catch */
inset 0 1.5px 0 rgba(255,255,255,1),/* bevel rim */
inset 0 -3px 8px rgba(13,15,13,.05);/* depth */Use on: white cards, secondary buttons, pills — any surface lighter than the cream page bg.
Pill + Button
Card
Dark Panel
Dark glass on near-black. White inset bevel + heavy diffuse. The bones source material.
box-shadow:
5px 7px 0px rgba(0,0,0,.6), /* hard lift */
7px 10px 26px rgba(0,0,0,.5), /* diffuse */
-1px -1px 0px rgba(255,255,255,.06), /* edge catch */
inset 0 1.5px 0 rgba(255,255,255,.1),/* bevel rim */
inset 0 -3px 10px rgba(0,0,0,.3); /* depth */Use on: dark cards on the A6/A7 profiles, A3 streak widget, boost/history panels.
Pill + Button
Card
Lith Panel
Maximum contrast. Pure black. Heavier shadow values — the harshest version of bones for the lith aesthetic.
box-shadow:
6px 8px 0px rgba(0,0,0,.9), /* hard lift */
8px 12px 30px rgba(0,0,0,.7), /* diffuse */
-1px -1px 0px rgba(255,255,255,.05), /* edge catch */
inset 0 1.5px 0 rgba(255,255,255,.09),/* bevel rim */
inset 0 -4px 12px rgba(0,0,0,.5); /* depth */Use on: A7 lith profile. Pure black bg only — the shadows need full darkness to read.
Pill + Button
Light
Opacity .06–.09 on ink shadows. White inset at full opacity (1). Bottom depth .04–.05.
Dark
Opacity .5–.6 on black shadows. White inset at .08–.12. Bottom depth .25–.35.
Lith
Opacity .7–.9 on black shadows. White inset at .06–.10. Bottom depth .4–.5. Max contrast.
Never mix
Never put a light bevel card on a light bevel background — the hard offset vanishes. Always need contrast between card and page bg.