{"id":"19838cf8-0dc3-4695-80e7-78ea0bfddce6","shortId":"buwSYm","kind":"skill","title":"elevation-and-depth","tagline":"Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined with border-radius, it creates the tactile quality of cards, modals, and interactive surfaces. Use when designing cards, dropdowns, modals, tooltips, or any flo","description":"# Elevation and Depth\n\nElevation uses shadow and layering to communicate that an element sits above the base surface — giving UI a sense of physical depth. Combined with border-radius, it creates the tactile quality that makes cards graspable, modals clearly floating, and dropdowns feel like they've appeared on top of content.\n\n## The Elevation Scale\n\nDefine a small set of elevation levels as tokens. Each level maps to a specific UI role.\n\n| Level | Token | Shadow | Role |\n|---|---|---|---|\n| 0 | `--shadow-none` | none | Flat surface, inline elements |\n| 1 | `--shadow-xs` | `0 1px 2px rgba(0,0,0,0.06)` | Subtle card, table row hover |\n| 2 | `--shadow-sm` | `0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)` | Card, input focus ring area |\n| 3 | `--shadow-md` | `0 4px 6px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.06)` | Dropdown, popover |\n| 4 | `--shadow-lg` | `0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.05)` | Modal, dialog, side drawer |\n| 5 | `--shadow-xl` | `0 20px 25px rgba(0,0,0,0.08), 0 8px 10px rgba(0,0,0,0.04)` | Command palette, full-screen overlay |\n\nKeep shadows subtle. Dark, heavy shadows feel dated and visually aggressive. Light, diffuse shadows feel modern and material.\n\n### The \"Shadow + Border\" Rule\nA subtle shadow on a white surface can sometimes \"wash out,\" making the edge of a card feel fuzzy or indistinct.\n- **Rule:** For elevated white cards or sections, pair the shadow with a **1px border** that is slightly darker (1.5x to 2x) than the shadow's core tone (e.g., a medium grey like `#E2E8F0` or `grey-200`).\n- **Effect:** The border defines the physical boundary of the card, while the shadow provides the depth. Together, they make the component \"pop\" with much higher clarity than using either alone.\n\n### Subtle Gradients for Depth\nGradients can be used to bring \"liveliness\" to an interface and reinforce the sense of elevation.\n- **The Lighting Metaphor:** A subtle linear gradient (top-to-bottom) that is slightly lighter at the top mimics natural overhead lighting. This makes a surface feel more physical and elevated than a flat fill.\n- **The 5% Rule:** Keep the gradient extremely subtle. A change in lightness of only 2–5% between the top and bottom is usually enough. If the user can easily see where the gradient starts and ends, it is likely too heavy.\n- **Usage:** Apply to primary buttons, hero cards, and header sections to improve visual hierarchy and brand personality.\n\n## Pairing Elevation with Border-Radius\n\nBorder-radius and shadow work together to define the character of a surface. The combination signals the element's role and the product's visual tone.\n\n| Surface | Shadow | Border-Radius | Tone |\n|---|---|---|---|\n| Inline chip / tag | none | `--radius-full` (pill) | Flat, lightweight |\n| Card | `--shadow-sm` | `--radius-md` (8–12px) | Graspable, contained |\n| Dropdown / popover | `--shadow-md` | `--radius-md` (8px) | Floating, contextual |\n| Modal / dialog | `--shadow-lg` | `--radius-lg` (12–16px) | Prominent, focused |\n| Toast / notification | `--shadow-md` | `--radius-md` | Ephemeral, above content |\n| Button | none or `--shadow-xs` | **consistent across all buttons** — see below |\n\n## Border-Radius Consistency Rule\n\n**Button border-radius must not vary within a product.** All buttons — primary, secondary, destructive, ghost — use the same radius token. Varying radius between button types breaks visual consistency and implies a semantic difference that does not exist.\n\n```css\n/* Correct: one radius for all buttons */\n.btn { border-radius: var(--radius-button); }\n\n/* Wrong: different radii for different button variants */\n.btn-primary { border-radius: 8px; }\n.btn-secondary { border-radius: 4px; }  /* ← breaks consistency */\n```\n\nThe button radius token is a brand decision — set it once, apply it everywhere.\n\n## Text Shadow for Contrast and Separation\n\n`text-shadow` can lift text off a background without changing colours — useful when contrast is marginal or text sits on a photograph, gradient, or complex background.\n\nThe effect must be imperceptible as a shadow. If the user notices the shadow, it is too strong.\n\n```css\n/* On images or complex backgrounds */\n.hero-title {\n  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);\n}\n\n/* Very subtle separation from a near-matching background */\n.label-on-tinted-surface {\n  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);\n}\n\n/* White text on light background — use a dark shadow, not white */\n.inverted-text {\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);\n}\n```\n\n**Rules:**\n- Opacity: stay below `0.30` — above that it reads as a design choice rather than a refinement\n- Blur: `2–4px` maximum — higher values make text feel dirty\n- Offset: `0 1px` or `0 0` — directional offsets above 2px look like retro Web 2.0\n- Never use `text-shadow` to compensate for a contrast failure — fix the colour first. Use it only when colours are already close to passing and a nudge is needed, or when text sits on unpredictable imagery\n\n## Dark Mode Shadows\n\nShadows are less visible on dark backgrounds. On dark surfaces, compensate with:\n- Slightly higher opacity on shadow values\n- Adding a subtle border (`1px solid rgba(255,255,255,0.08)`) to define card edges\n- Increasing the elevation level by one step for the same perceived depth\n\n## Review Checklist\n\n- [ ] Is there a defined elevation scale as design tokens (not one-off shadow values per component)?\n- [ ] Does each elevated element use the correct level for its role (card ≠ modal)?\n- [ ] Are shadows light and diffuse, avoiding heavy black (#000) defaults?\n- [ ] For white cards on light backgrounds, is the shadow paired with a 1px border for better definition?\n- [ ] Is border-radius consistent across all button variants?\n- [ ] Do shadows feel subtle and diffuse rather than heavy and dark?\n- [ ] On dark surfaces, are card/panel edges visible through border or adjusted shadow?\n- [ ] Is elevation used to communicate layering — not just decoration?\n- [ ] If gradients are used, are they subtle (2–5% lightness change) and used to reinforce the lighting/elevation metaphor?\n\n## Common Anti-Patterns\n\n| Anti-pattern | Problem | Fix |\n|---|---|---|\n| Different border-radius on primary vs secondary buttons | Implies semantic difference that doesn't exist | Single `--radius-button` token for all buttons |\n| Heavy `box-shadow: 0 8px 16px rgba(0,0,0,0.4)` | Feels dated and visually aggressive | Use low-opacity, multi-layer diffuse shadows |\n| Shadow on every element regardless of role | Elevation loses meaning when everything is elevated | Reserve shadow for genuinely floating elements |\n| Flat cards with no elevation on a white background | Card edge disappears into the page | Use `--shadow-sm` or a `1px` border to define the card boundary |","tags":["elevation","and","depth","dembrandt","skills","accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens"],"capabilities":["skill","source-dembrandt","skill-elevation-and-depth","topic-accessibility","topic-agent-skills","topic-claude-code-skills","topic-claude-skills","topic-cursor-skills","topic-design-system","topic-design-tokens","topic-enterprise-ux","topic-gestalt","topic-skills-sh","topic-typography","topic-ui-design"],"categories":["dembrandt-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/dembrandt/dembrandt-skills/elevation-and-depth","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add dembrandt/dembrandt-skills","source_repo":"https://github.com/dembrandt/dembrandt-skills","install_from":"skills.sh"}},"qualityScore":"0.454","qualityRationale":"deterministic score 0.45 from registry signals: · indexed on github topic:agent-skills · 9 github stars · SKILL.md body (6,753 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-05-18T19:08:26.713Z","embedding":null,"createdAt":"2026-05-18T13:14:01.133Z","updatedAt":"2026-05-18T19:08:26.713Z","lastSeenAt":"2026-05-18T19:08:26.713Z","tsv":"'-200':324 '0':122,135,139,140,141,152,156,157,158,160,164,165,166,177,181,182,183,185,189,190,191,199,203,204,205,207,211,212,213,223,227,228,229,231,235,236,237,732,736,737,738,757,761,762,763,782,786,787,788,818,821,822,1072,1076,1077,1078 '0.04':238 '0.05':214 '0.06':142,167,192 '0.08':184,206,230,900 '0.10':159 '0.12':764 '0.25':739 '0.30':789,794 '0.4':1079 '000':957 '1':131 '1.5':306 '10px':200,233 '12':547 '12px':525 '15px':201 '16px':548,1074 '1px':136,153,161,300,733,758,783,819,894,971,1135 '2':148,424,808,1024 '2.0':831 '20px':224 '255':897,898,899 '25px':225 '2px':137,162,186,759,826 '2x':309 '3':173 '3px':154,734 '4':195 '4px':178,187,208,652,784,809 '5':219,411,425,1025 '6px':179,209 '8':524 '8px':232,536,645,1073 'across':569,981 'ad':890 'adjust':1006 'aggress':255,1084 'alon':354 'alreadi':853 'anti':1037,1040 'anti-pattern':1036,1039 'appear':93 'appli':452,666 'area':172 'avoid':954 'background':683,701,725,748,769,878,964,1122 'base':61 'better':974 'black':956 'blur':807 'border':22,73,265,301,327,472,475,504,575,581,626,643,650,893,972,978,1004,1046,1136 'border-radius':21,72,471,474,503,574,580,625,642,649,977,1045 'bottom':385,430 'boundari':331,1141 'box':1070 'box-shadow':1069 'brand':466,661 'break':605,653 'bring':364 'btn':624,640,647 'btn-primari':639 'btn-secondari':646 'button':455,562,571,579,590,603,623,631,637,656,983,1052,1063,1067 'card':30,38,82,144,168,283,292,334,457,517,903,947,961,1115,1123,1140 'card/panel':1000 'chang':419,685,1027 'charact':484 'checklist':918 'chip':508 'choic':802 'clariti':350 'clear':85 'close':854 'colour':686,845,851 'combin':19,70,489 'command':239 'common':1035 'communic':10,54,1012 'compens':838,882 'complex':700,724 'compon':345,935 'consist':568,577,607,654,980 'contain':527 'content':97,561 'contextu':538 'contrast':672,689,841 'core':314 'correct':618,942 'creat':25,76 'css':617,720 'dark':248,772,869,877,880,995,997 'darker':305 'date':252,1081 'decis':662 'decor':1016 'default':958 'defin':101,328,482,902,922,1138 'definit':975 'depth':4,47,69,340,358,916 'design':37,801,926 'destruct':593 'dialog':216,540 'differ':612,633,636,1044,1055 'diffus':257,953,990,1092 'direct':823 'dirti':816 'disappear':1125 'doesn':1057 'drawer':218 'dropdown':39,88,193,528 'e.g':316 'e2e8f0':321 'easili':438 'edg':280,904,1001,1124 'effect':325,703 'either':353 'element':15,57,130,492,939,1097,1113 'elev':2,5,45,48,99,106,290,374,405,469,907,923,938,1009,1101,1107,1118 'elevation-and-depth':1 'end':445 'enough':433 'ephemer':559 'everi':1096 'everyth':1105 'everywher':668 'exist':616,1059 'extrem':416 'failur':842 'feel':89,251,259,284,401,815,987,1080 'fill':409 'first':846 'fix':843,1043 'flat':127,408,515,1114 'flo':44 'float':86,537,1112 'focus':170,550 'full':242,513 'full-screen':241 'fuzzi':285 'genuin':1111 'ghost':594 'give':63 'gradient':356,359,381,415,442,698,1018 'graspabl':83,526 'grey':319,323 'header':459 'heavi':249,450,955,993,1068 'hero':456,727 'hero-titl':726 'hierarchi':12,464 'higher':349,811,885 'hover':147 'imag':722 'imageri':868 'impercept':706 'impli':609,1053 'improv':462 'increas':905 'indistinct':287 'inlin':129,507 'input':169 'interact':33 'interfac':368 'invert':777 'inverted-text':776 'keep':245,413 'label':750 'label-on-tinted-surfac':749 'layer':9,52,1013,1091 'less':874 'level':107,111,118,908,943 'lg':198,543,546 'lift':14,679 'light':256,376,396,421,768,951,963,1026 'lighter':389 'lighting/elevation':1033 'lightweight':516 'like':90,320,448,828 'linear':380 'liveli':365 'look':827 'lose':1102 'low':1087 'low-opac':1086 'make':81,278,343,398,813 'map':112 'margin':691 'match':747 'materi':262 'maximum':810 'md':176,523,532,535,555,558 'mean':1103 'medium':318 'metaphor':377,1034 'mimic':393 'modal':31,40,84,215,539,948 'mode':870 'modern':260 'much':348 'multi':1090 'multi-lay':1089 'must':583,704 'natur':394 'near':746 'near-match':745 'need':861 'never':832 'none':125,126,510,563 'notic':713 'notif':552 'nudg':859 'offset':817,824 'one':619,910,930 'one-off':929 'opac':791,886,1088 'overhead':395 'overlay':244 'page':1128 'pair':295,468,968 'palett':240 'pass':856 'pattern':1038,1041 'per':934 'perceiv':915 'person':467 'photograph':697 'physic':68,330,403 'pill':514 'pop':346 'popov':194,529 'primari':454,591,641,1049 'problem':1042 'product':497,588 'promin':549 'provid':338 'qualiti':28,79 'radii':634 'radius':23,74,473,476,505,512,522,534,545,557,576,582,598,601,620,627,630,644,651,657,979,1047,1062 'radius-button':629,1061 'radius-ful':511 'radius-lg':544 'radius-md':521,533,556 'rather':803,991 'read':798 'refin':806 'regardless':1098 'reinforc':370,1031 'reserv':1108 'retro':829 'review':917 'rgba':138,155,163,180,188,202,210,226,234,735,760,785,896,1075 'ring':171 'role':117,121,494,946,1100 'row':146 'rule':266,288,412,578,790 'scale':100,924 'screen':243 'secondari':592,648,1051 'section':294,460 'see':439,572 'semant':611,1054 'sens':66,372 'separ':674,742 'set':104,663 'shadow':7,50,120,124,133,150,175,197,221,246,250,258,264,269,297,312,337,478,502,519,531,542,554,566,670,677,709,715,731,756,773,781,836,871,872,888,932,950,967,986,1007,1071,1093,1094,1109,1131 'shadow-lg':196,541 'shadow-md':174,530,553 'shadow-non':123 'shadow-sm':149,518,1130 'shadow-x':132,565 'shadow-xl':220 'side':217 'signal':490 'singl':1060 'sit':58,694,865 'skill' 'skill-elevation-and-depth' 'slight':304,388,884 'sm':151,520,1132 'small':103 'solid':895 'sometim':275 'source-dembrandt' 'specif':115 'start':443 'stay':792 'step':911 'strong':719 'subtl':6,143,247,268,355,379,417,741,892,988,1023 'surfac':18,34,62,128,273,400,487,501,753,881,998 'tabl':145 'tactil':27,78 'tag':509 'text':669,676,680,693,730,755,766,778,780,814,835,864 'text-shadow':675,729,754,779,834 'tint':752 'titl':728 'toast':551 'togeth':341,480 'token':109,119,599,658,927,1064 'tone':315,500,506 'tooltip':41 'top':95,383,392,428 'top-to-bottom':382 'topic-accessibility' 'topic-agent-skills' 'topic-claude-code-skills' 'topic-claude-skills' 'topic-cursor-skills' 'topic-design-system' 'topic-design-tokens' 'topic-enterprise-ux' 'topic-gestalt' 'topic-skills-sh' 'topic-typography' 'topic-ui-design' 'type':604 'ui':64,116 'unpredict':867 'usag':451 'use':35,49,352,362,595,687,770,833,847,940,1010,1020,1029,1085,1129 'user':436,712 'usual':432 'valu':812,889,933 'var':628 'vari':585,600 'variant':638,984 've':92 'visibl':875,1002 'visual':11,254,463,499,606,1083 'vs':1050 'wash':276 'web':830 'white':272,291,765,775,960,1121 'within':586 'without':684 'work':479 'wrong':632 'x':307 'xl':222 'xs':134,567","prices":[{"id":"aa088d20-18e3-4cdc-a8ba-ed723de25fec","listingId":"19838cf8-0dc3-4695-80e7-78ea0bfddce6","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"dembrandt","category":"dembrandt-skills","install_from":"skills.sh"},"createdAt":"2026-05-18T13:14:01.133Z"}],"sources":[{"listingId":"19838cf8-0dc3-4695-80e7-78ea0bfddce6","source":"github","sourceId":"dembrandt/dembrandt-skills/elevation-and-depth","sourceUrl":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/elevation-and-depth","isPrimary":false,"firstSeenAt":"2026-05-18T13:14:01.133Z","lastSeenAt":"2026-05-18T19:08:26.713Z"}],"details":{"listingId":"19838cf8-0dc3-4695-80e7-78ea0bfddce6","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"dembrandt","slug":"elevation-and-depth","github":{"repo":"dembrandt/dembrandt-skills","stars":9,"topics":["accessibility","agent-skills","claude-code-skills","claude-skills","cursor-skills","design-system","design-tokens","enterprise-ux","gestalt","skills-sh","typography","ui-design","ux","wcag"],"license":"mit","html_url":"https://github.com/dembrandt/dembrandt-skills","pushed_at":"2026-05-14T22:34:06Z","description":"UX and design system skills for AI agents based on 20 years of experience","skill_md_sha":"c2ad9042fed72a8010cb6c76b04d53dc6e9a04e0","skill_md_path":"skills/elevation-and-depth/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/dembrandt/dembrandt-skills/tree/main/skills/elevation-and-depth"},"layout":"multi","source":"github","category":"dembrandt-skills","frontmatter":{"name":"elevation-and-depth","description":"Elevation — subtle shadows and layering — communicates visual hierarchy by lifting elements above the surface. Combined with border-radius, it creates the tactile quality of cards, modals, and interactive surfaces. Use when designing cards, dropdowns, modals, tooltips, or any floating UI element."},"skills_sh_url":"https://skills.sh/dembrandt/dembrandt-skills/elevation-and-depth"},"updatedAt":"2026-05-18T19:08:26.713Z"}}