Neubrutalism

1. Select a frame and add a Drop shadow in the Effects section.
2. Set X 4, Y 4, Blur 0, Spread 0, and the ink color at 100% opacity.
3. Save it as an effect style named Shadow/Base.
4. Duplicate it at X 8, Y 8 as Shadow/Large for featured cards.

A parent frame with Clip content on cuts the shadow off. Turn clipping off or pad the parent by the offset.

1. Draw a frame 4px wider and taller than the button face, with no fill and Auto Layout off.
2. Inside it, build the face with Auto Layout, a flat fill, a 2px inside stroke in ink, a 4px radius, and Shadow/Base.
3. Make it a component with a State property: Default, Hover, and Pressed.
4. In Pressed, move the face 4px right and down and remove its shadow.
5. On Default, add a While pressing interaction that changes to Pressed with Smart animate.

The fixed outer frame keeps neighbors from shifting when the face moves.

1. Create a color collection with Ink, Ground, and four Fill variables.
2. Add a Dark mode and give Ink and Ground new values there.
3. Bind every fill and stroke to a variable.
4. Check each text and fill pair with a contrast plugin before publishing the library.

When ink text fails on a fill, lighten the fill rather than changing the text color.

1. Draw a star or circle, fill it yellow, and add a 2px ink stroke.
2. Apply Shadow/Base.
3. Set a short label in Archivo Black, all caps.
4. Group, rotate 6 to 10 degrees, and overlap a panel corner.

One tilted element per view reads as a choice. Several read as disorder.