Sentre Legacy
  • 🥳Welcome
  • Getting Started
  • DApp Manifest
  • Folder Structure
  • Available Scripts
  • Development
    • View
    • Model & Controllers
    • Providers
      • UI Provider
      • Wallet Provider
      • Account Provider
      • Mint Provider
    • Static
    • Global variables
    • Configs
  • Advanced Usage
    • ☀️Theme
    • 👘Customizing Styles
    • 🪝Hooks
  • 🤩Submitting DApps
  • References
  • Best Practices
  • Troubleshoots
  • 🎨Design Pricinples
    • Button
    • Card
    • Checkbox
    • Color
    • Corner radius
    • Drawer
    • Dropdown
    • Grid
    • Icons
    • Input
    • List
    • Menu
    • Modal
    • Radio
    • Select
    • Shadow
    • Spacing
    • Switch
    • Tabs
    • Tooltip
    • Table
    • Typography
  • 📄Litepaper
    • Introduction
    • Industry Problems
    • Sentre: An All-in-one Solution
      • The Open Protocol
      • Liquidity Efficiency
    • SEN as the Heart of the Ecosystem
      • Asymmetric Deposit
      • Adaptive Fee Model
      • The Triad Pool
      • Simulated Mesh Trading
      • Token Use Cases
    • Conclusion
Powered by GitBook
On this page
  • Rounded corners
  • When not to round?
  • Sample code
  1. Design Pricinples

Corner radius

Sen OS applies rounded corners to almost UI elements. The same applies to most common controls such as Button, Card, Input...

PreviousColorNextDrawer

Last updated 3 years ago

Rounded corners

There are three areas of the controls where the rounded corner styles are used: large, medium and small dimension UI elements.

1. Large dimension UI elements

The default radius value we use for these UI elements is 16px.

Sen OS uses max two levels of rounding depending on inside contents.

UI elements:

  • Card

  • Modal

  • Popconfirm

2. Medium dimension UI elements

The default radius value we use for these UI elements is 8px.

UI elements:

  • Button

  • Input

  • Select

  • Tooltip

  • List

  • Radio button

  • Dropdown

3. Small dimension UI elements

The default radius value we use for these UI elements is 4px.

UI elements:

  • ScrollBar

  • Slider

  • Checkbox

When not to round?

There are instances where the corner of a control should not be rounded, and we don't round these by default:

  • Dropdown

Sample code

// Some code

🎨