Radius
The corner radius values of page modules and elements convey design language and express stylistic tone.
Corner radius parameter
Applied to all basic rounded card scenarios with 16px and 12px, in order to unify the visual language and strictly limit usage.
Large
Small
16px
12px
*Due to the special nature of the transaction page, this standard does not apply to the main transaction page, but the subsidiary pages of the transaction page can follow the above rules.
Corner Radius Specifications
Scope:
16px
Level 1 card rounded corners
12px
Level 2 card corners
Overlay specification
Card stacking
When layering relationships, strictly follow the guideline that the internal card corners should be smaller than the external card corners.
12px
16px
*If there are special customization requirements, define card rules using a corner radius size based on a multiple of 4px (be sure to consult DS before customizing).
Component corner radius parameters (maintained by DS)
Rounded corners applied to all components, with a scene of 8px and 4px, to unify the visual language and strictly control usage.
Large size
Medium
Small
Small
Small
Full Round Corners
8px
4px
infinity
Input box, selector, dropdown menu, date picker, segmented controller, text bubble, bubble card, bubble confirmation box, notification reminder box, warning prompt, global prompt...
Checkboxes, labels, paginators ...
Red dot, button...