Shadow
Overview
Shadows are used to create visual depth, helping users distinguish between content layers and understand hierarchy within the interface.
The Shadow system is designed to work consistently across both light mode and dark mode.
Shadow supports two main types:
-
Light Mode
-
Dark Mode
Each shadow supports three states:
-
Small
-
Medium
-
Large
Light Mode
Shadows in light mode help components stand out against bright backgrounds while keeping the interface clean and balanced.
Small
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Medium
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Large
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Dark Mode
Shadows in dark mode are carefully adjusted to avoid heavy or muddy visuals on dark backgrounds.
Small
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Medium
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
Large
<h1>Welcome to My Project</h1>
<p>This is a <strong>bold</strong> paragraph with a <a href="/tools">link to our tools</a>.</p>
<h2>Features</h2>
<ul>
<li>Easy <strong>markdown</strong> editing</li>
<li><strong>HTML</strong> export functionality</li>
</ul>
User Experience
✨ Use shadows to communicate hierarchy and importance, not just decoration.
✨ Choose the shadow level based on the role of the component (small / medium / large).
✨ Avoid using large shadows on small or low-priority elements.
✨ Ensure shadows in Dark Mode remain visible without feeling heavy.
✨ Apply shadows consistently across screens to help users quickly understand structure and interaction.
Figma
All details and specifications in the design can be referenced through the Figma link below.