Skip to content
tmr Design System

Borders and shadows

Incorporating radius and shadow effects in design can greatly enhance the visual appeal and user experience of a product. This document provides guidelines on effectively using radius and shadows, emphasizing the preference for slightly rounded shapes over sharp edges for consistency and aesthetic appeal.

Radius

  1. Avoid Sharp Edges: Opt for slightly rounded corners instead of sharp, angular edges. Corners should recreate the radius of the squares in tmr logo.

  2. Consistency: Maintain a consistent radius across all elements. This consistency is key to a cohesive design.

  3. Balance: The radius should be balanced and not too pronounced. Overly rounded corners can detract from the design’s professionalism.

  4. Responsive Design: Ensure that the radius looks good on all screen sizes and does not distort the layout.

  5. Accessibility: Consider how rounded corners affect the visibility and interaction of elements, especially for users with visual impairments.

Shadows

  1. Subtlety: Shadows should be subtle and not overpower the elements they’re applied to.

  2. Depth and Dimension: Use shadows to create a sense of depth and dimension, making the interface more intuitive and engaging.

  3. Consistent Light Source: Ensure shadows are consistent with a single light source to maintain a realistic and cohesive look.

  4. Avoid Overuse: Excessive use of shadows can make a design look cluttered. Use them sparingly to highlight or differentiate elements.

  5. Testing: Always test shadows in different lighting conditions and on various devices to ensure they appear as intended.

Practical Tips

  • Use Tools for Precision: Utilize design tools that offer precise control over the radius and shadow effects.
  • Experiment with Different Levels: Experiment with different levels of radius and shadow intensity to find the perfect balance for your design.
  • Get Feedback: Regular feedback from users can provide valuable insights into how these elements are perceived and interacted with.

By following these guidelines on radius and shadows, designers can create more engaging, modern, and user-friendly interfaces.