Responsive Design

Breakpoints

Four core breakpoints based on common device sizes. Each has distinct layout rules.

@media (max-width: 767px) { }

@media (min-width: 768px) and (max-width: 1023px) { }

@media (min-width: 1024px) and (max-width: 1439px) { }

@media (min-width: 1440px) { }

Fluid Typography

Typography scales smoothly using clamp(). No jarring size jumps at breakpoints.

Size Scale by Breakpoint

Component Behavior

Components don't just shrink—they transform to serve each context appropriately.

Touch Targets

Minimum touch target sizes ensure comfortable tapping on mobile devices.

Common Patterns

.container {
  flex-direction: column;
}
@media (min-width: 1024px) {
  .container {
    flex-direction: row;
  }
}

.text {
  text-align: center;
}
@media (min-width: 1024px) {
  .text {
    text-align: left;
  }
}

.button {
  width: 100%;
}
@media (min-width: 768px) {
  .button {
    width: auto;
  }
}

.secondary {
  display: none;
}
@media (min-width: 768px) {
  .secondary {
    display: block;
  }
}

Animation Adjustments

Animations adapt to device capabilities for optimal performance.

Utility Classes

Pre-built utility classes for common responsive patterns.