diff --git a/.changeset/olive-wolves-tan.md b/.changeset/olive-wolves-tan.md
new file mode 100644
index 00000000..800ab995
--- /dev/null
+++ b/.changeset/olive-wolves-tan.md
@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': minor
+---
+
+Add token values for breakpoints. Create the mixins folder and use tokens to as basis for media query mixins.
diff --git a/css/src/mixins/index.scss b/css/src/mixins/index.scss
new file mode 100644
index 00000000..3db06b8b
--- /dev/null
+++ b/css/src/mixins/index.scss
@@ -0,0 +1 @@
+@import 'media-queries.scss';
diff --git a/css/src/mixins/media-queries.scss b/css/src/mixins/media-queries.scss
new file mode 100644
index 00000000..23900214
--- /dev/null
+++ b/css/src/mixins/media-queries.scss
@@ -0,0 +1,70 @@
+// Responsiveness
+
+@mixin from($device) {
+	@media screen and (min-width: $device) {
+		@content;
+	}
+}
+
+@mixin until($device) {
+	@media screen and (max-width: $device - 1px),
+		screen and (min-resolution: 120dpi) and (max-width: $device - 0.1px) {
+		@content;
+	}
+}
+
+// Orientation
+
+@mixin orientation-portrait {
+	@media screen and (max-aspect-ratio: 1/1),
+		screen and (min-resolution: 120dpi) and (max-aspect-ratio: 1/1) {
+		@content;
+	}
+}
+
+@mixin orientation-landscape {
+	@media screen and (min-aspect-ratio: 1/1),
+		screen and (min-resolution: 120dpi) and (min-aspect-ratio: 1/1) {
+		@content;
+	}
+}
+
+@mixin orientation-square {
+	@media screen and (aspect-ratio: 1/1),
+		screen and (min-resolution: 120dpi) and (aspect-ratio: 1/1) {
+		@content;
+	}
+}
+
+// Mobile-first media queries
+
+@mixin small-only {
+	@media screen and (max-width: $breakpoint-medium - 1),
+		screen and (min-resolution: 120dpi) and (min-width: $breakpoint-small) and (max-width: $breakpoint-medium - 0.1px) {
+		@content;
+	}
+}
+
+@mixin small {
+	@media screen and (min-width: $breakpoint-small), print {
+		@content;
+	}
+}
+
+@mixin medium {
+	@media screen and (min-width: $breakpoint-medium), print {
+		@content;
+	}
+}
+
+@mixin large {
+	@media screen and (min-width: $breakpoint-large) {
+		@content;
+	}
+}
+
+@mixin massive {
+	@media screen and (min-width: $breakpoint-massive) {
+		@content;
+	}
+}
diff --git a/css/src/tokens/breakpoints.scss b/css/src/tokens/breakpoints.scss
new file mode 100644
index 00000000..ae9c3136
--- /dev/null
+++ b/css/src/tokens/breakpoints.scss
@@ -0,0 +1,8 @@
+// The horizontal gap tied to containers
+$container-gap: 64px !default;
+
+// Breakpoints
+$breakpoint-small: 540px !default;
+$breakpoint-medium: 768px !default;
+$breakpoint-large: 1088px !default;
+$breakpoint-massive: 1472px !default;