Radius
Rounded corners make surfaces feel soft, friendly, and safe to touch — the opposite of a sharp, technical ledger tool. DayTwo uses a small, consistent set of radii so everything feels like it belongs to one family.
The scale
none0px
sm10px
md16px
lg20px
xl28px
2xl36px
pillpill
How to use it
sm(10) — small tags and tight controls.md(16) — input fields and dropdowns.lg(20) /xl(28) — cards and surfaces that hold content.2xl(36) — large sheets and modals.pill— buttons, chips, badges, segmented controls — anything fully rounded.
Match the radius to the element's size: a bigger surface takes a bigger radius so the curve looks proportional.
When NOT to
- ❌ Don't mix many radii on one screen — it reads as inconsistent and unpolished.
- ❌ Don't put a large radius on a small element (or vice-versa); the corner will look wrong.
- ❌ Don't use
0(sharp corners) for touch surfaces — it makes the UI feel rigid and clinical.
What user problem this solves
Trust and approachability. Soft, consistent corners signal a friendly, modern app rather than a spreadsheet — which matters for a first-time user deciding whether this tool is "for them". Consistency also makes the whole system feel intentional and reliable.
Pick by size, stay in the set
When in doubt, use md for fields and lg for cards; buttons and chips go
pill. Always choose from the scale — never a one-off radius.