Design decisions

Foundations

Blue, cream, and the decisions they belong to.

Color

brand

canvas

surface

text

textMuted

border

danger

onBrand

Askrob keeps its light palette in both system color schemes. Brand blue and cream are intentional.

Spacing

none

xxl

none, xs, s, m, l, xl, xxl resolve to 0, 4, 8, 12, 16, 24, and 32 pixels.

Type

Ask me anything.

Neue Haas Grotesk Display for the page and controls. System monospace for code.

Interaction

Keyboard focus stays visible. Controls use native disabled states. Transitions follow reduced motion preferences.

Example

import { Box, Text } from '@/design-system';

// Component consumers choose named props.
<Box background="canvas" padding="xl" gap="m">
  <Text color="brand">Askrob</Text>
</Box>