// foundations
Corners and depth
How round the interface is, and how things lift off the page. Softened for the interface, square for brand graphics.
Try both
The interface uses softened corners. Brand graphics stay square: the logo, the patterns, the glyphs and the tiles. The switch is still here so the difference is easy to see. Flip it and every page changes, including Components.
newbranding
// worlds · 01
The Assembly
Twelve robot basketball teams, twelve identity systems, a rulebook, and a site.
A form field, to compare.
The two sets
| Token | Used on | Softened | Square |
|---|---|---|---|
| --radius-tag | Tags, badges | 4px | 0 |
| --radius-control | Buttons, form fields, menu items | 6px | 0 |
| --radius-card | Cards, panels, menus, dialogs | 10px | 0 |
| --radius-media | Images and video | 10px | 2px |
| --radius-round | Avatars only | Circle | Circle |
| --radius-none | Logo, patterns, tiles, glyphs, dividers | 0 | 0 |
The case for softened
- Friendlier, and closer to what people use every day.
- The square logo and patterns stand out more against it.
- Suits small business owners more than a hard-edged look.
The case for square
- Matches the pointed M and the square brand graphics exactly.
- One rule for everything. Nothing to remember.
- Looks more like a design studio and less like an app.
What never changes
- The logo, patterns, number tiles, glyphs and dividers are always square, with sharp points.
- Nothing is ever a pill. Fully rounded ends are for avatars only.
- Lines are 1 pixel. Control outlines are 1.5 pixels. No heavy rules.
Depth
A raised thing is one step lighter than what it sits on. A shadow is added only when something floats above the page.
Level 0The page
Level 1Cards. No shadow.
Level 2Menus, hovered cards
Level 3Dialogs
The square unit
Supporting graphics are built from one square on a grid: a square of 16, a gap of 6, repeating every 22. Scale it to any size, but keep the ratio. The patterns, glyphs and dividers in Elements all use it.