(add order template mockup)

resources/assets/less/backgrounds.less

@@ -1,9 +1,11 @@
 @bg-light: @color-white;
 @bg-soft: @color-gray-lightest;
 @bg-muted: @color-gray-lighter;
+@bg-gray: @color-gray-dark;
 @bg-dark: @color-black;
 
 .bg-light   { background-color: @bg-light; }
 .bg-soft    { background-color: @bg-soft; }
 .bg-muted   { background-color: @bg-muted; }
+.bg-gray    { background-color: @bg-gray; }
 .bg-dark    { background-color: @bg-dark; }

resources/assets/less/flex.less

@@ -17,6 +17,11 @@
     align-items: center;
 }
 
+.flex-baseline {
+    display: flex;
+    align-items: baseline;
+}
+
 .flex-y-end {
     display: flex;
     align-items: flex-end;

resources/assets/less/layout.less

@@ -2,10 +2,14 @@
     max-width: 33rem;
 }
 
+.constrain-sm {
+    max-width: 26rem;
+}
+
 .constrain-lg {
     max-width: 40rem;
 }
 
-.constrain-sm {
-    max-width: 26rem;
+.constrain-xl {
+    max-width: 48em;
 }

resources/assets/less/typography.less

@@ -1,2 +1,3 @@
 @import "typography/base";
 @import "typography/headings";
+@import "typography/links";

resources/assets/less/typography/base.less

@@ -27,6 +27,8 @@
 @text-dark-soft: fade(@text-dark, 60%);
 @text-dark-muted: fade(@text-dark, 35%);
 @text-brand: hsv(@hue-brand-primary, 100%, 86%);
+@text-brand-soft: hsv(@hue-brand-primary, 85%, 86%);
+@text-brand-muted: hsv(@hue-brand-primary, 65%, 86%);
 
 
 small {

resources/assets/less/typography/links.less

@@ -0,0 +1,73 @@
+a, .link {
+    font-weight: @font-weight-normal;
+    color: @text-dark;
+    text-decoration: none;
+
+    &:hover, &:focus {
+        color: darken(@text-dark, 15%);
+        text-decoration: underline;
+    }
+    &:focus {
+        .tab-focus;
+    }
+}
+
+.link-brand {
+    color: @text-brand;
+
+    &:hover, &:focus {
+        color: darken(@text-brand, 15%);
+    }
+}
+
+.link-brand-soft {
+    color: @text-brand-soft;
+
+    &:hover, &:focus {
+        color: darken(@text-brand-soft, 15%);
+    }
+}
+
+.link-underline {
+    text-decoration: underline;
+}
+
+.link-plain {
+    &:hover, &:focus {
+        text-decoration: none;
+    }
+}
+
+.link-soft {
+    color: @text-dark-soft;
+
+    &:hover, &:focus {
+        color: @text-dark;
+    }
+}
+
+.link-muted {
+    color: @text-dark-muted;
+
+    &:hover, &:focus {
+        color: @text-dark;
+    }
+}
+
+.link-light {
+    color: @text-light;
+
+    &:hover, &:focus {
+        color: @text-light;
+    }
+}
+
+.link-light-muted {
+    color: @text-light-muted;
+
+    &:hover, &:focus {
+        color: @text-light-soft;
+    }
+}
+
+

resources/assets/less/typography/utilities.less

@@ -18,6 +18,9 @@
 .text-dark          { color: @text-dark; }
 .text-dark-soft     { color: @text-dark-soft; }
 .text-dark-muted    { color: @text-dark-muted; }
+.text-brand         { color: @text-brand; }
+.text-brand-soft    { color: @text-brand-soft; }
+.text-brand-muted    { color: @text-brand-muted; }
 
 .text-em { font-style: italic; }