Radius and elevation

Nearly square corners (2–3px) and almost no shadow. Structure comes from borders and gray bands; shadows are for things that float above the page.

Elevation in use

Three card tones cover nearly every case.

On the page, grouped, floating

On the page

tone="outline": 1px border, no shadow. The default.

Grouped

tone="subtle": gray fill for secondary groups.

Floating

tone="raised": shadow.md, for popovers and menus.

Show code

shape/elevation.tsx

import { Card, CardContent, CardTitle, Grid, Text } from '@jsonresume/ui';

// Most things sit on the page (borders, no shadow). Only things that float
// above it get elevation.
export default function ShapeElevation() {
  return (
    <Grid minColumnWidth="12rem" gap={6}>
      <Card>
        <CardContent>
          <CardTitle>On the page</CardTitle>
          <Text size="xs" tone="muted">
            tone=&quot;outline&quot;: 1px border, no shadow. The default.
          </Text>
        </CardContent>
      </Card>
      <Card tone="subtle">
        <CardContent>
          <CardTitle>Grouped</CardTitle>
          <Text size="xs" tone="muted">
            tone=&quot;subtle&quot;: gray fill for secondary groups.
          </Text>
        </CardContent>
      </Card>
      <Card tone="raised">
        <CardContent>
          <CardTitle>Floating</CardTitle>
          <Text size="xs" tone="muted">
            tone=&quot;raised&quot;: shadow.md, for popovers and menus.
          </Text>
        </CardContent>
      </Card>
    </Grid>
  );
}

Guidelines

Do

Use radius.sm (2px) for cards and inputs, radius.md (3px) for buttons.
Use borders to separate, shadows only to lift things off the page.

Don’t

Round cards or buttons into pills; jsonresume.org is nearly square.
Stack shadows, or put a shadow on something that does not float.

Radius

radius.none

2px

radius.sm

3px

radius.md

6px

radius.lg

9999px

radius.full

Elevation

md for popovers and raised cards, lg for dialogs.

none

shadow.none

shadow.sm

shadow.md

shadow.lg