Visual identity article

components/Heading/Heading.css

@@ -72,7 +72,7 @@
 
 .msrd .msrd-Heading--1 {
   font-size: var(--font-09-size);
-  font-weight: 400;
+  font-weight: 366;
   line-height: var(--font-09-line-height);
 }
 
@@ -85,7 +85,7 @@
 
 .msrd .msrd-Heading--display3 {
   font-size: var(--font-10-size);
-  font-weight: 400;
+  font-weight: 300;
   line-height: var(--font-10-line-height);
 }
 
@@ -98,7 +98,7 @@
 
 .msrd .msrd-Heading--display2 {
   font-size: var(--font-11-size);
-  font-weight: 400;
+  font-weight: 250;
   line-height: var(--font-11-line-height);
 }
 

components/Space/index.tsx

@@ -1,7 +1,7 @@
 import "./Space.css";
 
 export type SpaceProps = {
-  size:
+  size?:
     | "01"
     | "02"
     | "03"

components/Surface/Surface.css

@@ -1,7 +1,13 @@
+.msrd .msrd-Surface--dark,
 .msrd .msrd-Surface--graphicDark {
   --color-brand: var(--color-azure-07);
 
-  --color-background: var(--color-azure-02);
+  --color-background: var(--color-azure-01);
+  --color-background-emphasis: color-mix(
+      in srgb,
+      var(--color-text) 2%,
+      transparent
+    );
   --color-background-highlight: color-mix(
     in srgb,
     var(--color-text) 8%,
@@ -57,14 +63,18 @@
   --color-logo: var(--color-white);
 }
 
+.msrd .msrd-Surface--dark,
 .msrd .msrd-Surface--graphicDark {
   background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+.msrd .msrd-Surface--graphicDark {
   background-image: url(https://res.cloudinary.com/measuredco/image/upload/v1732634892/site/site-background-top_v8ll2o.png),
     url(https://res.cloudinary.com/measuredco/image/upload/v1732635074/site/site-background-repeat_kjbjx5.png);
   background-position: center -1rem, center top;
   background-repeat: no-repeat, repeat-y;
   background-size: auto;
-  color: var(--color-text);
 }
 
 @media (min-width: 48em) {
@@ -73,16 +83,19 @@
   }
 }
 
+.msrd .msrd-Surface--dark a:not([class]),
 .msrd .msrd-Surface--graphicDark a:not([class]) {
   color: var(--color-interactive-neutral);
 }
 
 @media (hover: hover) {
+  .msrd .msrd-Surface--dark a:not([class]):hover,
   .msrd .msrd-Surface--graphicDark a:not([class]):hover {
     color: var(--color-interactive-neutral-hover);
   }
 }
 
+.msrd .msrd-Surface--dark a:not([class]):active,
 .msrd .msrd-Surface--graphicDark a:not([class]):active {
   color: var(--color-interactive-neutral-active);
 }

components/Surface/index.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from "react";
 import "./Surface.css";
 
 type SurfaceProps = {
-  background?: "graphicDark" | "";
+  background?: "dark" | "graphicDark" | "";
 };
 
 const Surface = ({ background, children }: PropsWithChildren<SurfaceProps>) => {

components/system.css

@@ -364,6 +364,7 @@
   --color-brand: var(--color-azure-04);
 
   --color-background: var(--color-grey-11);
+  --color-background-emphasis: var(--color-white);
   --color-background-highlight: var(--color-grey-10);
 
   --color-text: var(--color-grey-01);
@@ -411,6 +412,11 @@
     --color-brand: var(--color-azure-07);
 
     --color-background: var(--color-grey-02);
+    --color-background-emphasis: color-mix(
+      in srgb,
+      var(--color-text) 2%,
+      transparent
+    );
     --color-background-highlight: color-mix(
       in srgb,
       var(--color-text) 8%,

puck/components/Post/NewIdentity/NewIdentity.css

@@ -0,0 +1,147 @@
+.msrd:has(.msrd-NewIdentity) {
+  background-color: var(--color-background-emphasis);
+}
+
+@media (prefers-color-scheme: dark) {
+  .msrd:has(.msrd-NewIdentity) {
+    background-color: var(--color-background);
+    background-image: linear-gradient(
+      var(--color-background-emphasis),
+      var(--color-background-emphasis)
+    );
+  }
+}
+
+.msrd .msrd-NewIdentity p:not(.msrd-Paragraph) {
+  font-size: var(--font-03-size);
+  line-height: var(--font-03-line-height);
+  margin: 0;
+  max-width: 35em;
+  text-wrap: pretty;
+}
+
+.msrd .msrd-NewIdentity p.msrd-NewIdentity-callout {
+  margin: 0 auto;
+  max-width: 46em;
+  text-align: center;
+}
+
+.msrd .msrd-NewIdentity p.msrd-NewIdentity-standfirst {
+  font-size: var(--font-05-size);
+  font-style: italic;
+  font-weight: 400;
+  line-height: var(--font-05-line-height);
+  margin: 0 auto;
+  max-width: 38em;
+  text-align: center;
+}
+
+.msrd .msrd-NewIdentity-surfaceDark {
+  --color-background: var(--color-azure-04);
+  --color-text: var(--color-white);
+  --color-text-muted: hotpink;
+  background-color: var(--color-background);
+  color: var(--color-text);
+}
+
+.msrd .msrd-NewIdentity-surfaceLight {
+  --color-background: var(--color-azure-07);
+  --color-text: var(--color-white);
+  --color-interactive: var(--color-azure-01);
+  --color-interactive-focus: var(--color-azure-03);
+  --color-interactive-hover: var(--color-azure-02);
+  --color-interactive-active: var(--color-azure-03);
+  background-color: var(--color-background);
+  color: var(--color-text);
+  font-size: var(--font-04-size);
+  font-weight: 500;
+  line-height: var(--font-04-line-height);
+}
+
+@media (prefers-color-scheme: dark) {
+  .msrd .msrd-NewIdentity-surfaceLight {
+    --color-text: var(--color-grey-01);
+    --color-interactive: var(--color-white);
+    --color-interactive-hover: color-mix(
+      in srgb,
+      var(--color-white) 96%,
+      transparent
+    );
+    --color-interactive-active: color-mix(
+      in srgb,
+      var(--color-white) 88%,
+      transparent
+    );
+  }
+}
+
+.msrd .msrd-NewIdentity-surfaceLight .msrd-NewIdentity-callout {
+  font-size: inherit;
+  line-height: inherit;
+}
+
+.msrd .msrd-NewIdentity-imageWrapper {
+  --border-radius: calc((8 / 16) * 1rem);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow-light-source);
+  display: inline-block;
+  line-height: 0;
+}
+
+.msrd .msrd-NewIdentity-imageWrapper--large {
+  --border-radius: calc((30 / 16) * 1rem);
+}
+
+.msrd .msrd-NewIdentity-image {
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+}
+
+.msrd .msrd-NewIdentity-hiddenMobile {
+  color: var(--color-azure-08);
+  display: none;
+}
+
+@media (min-width: 48em) {
+  .msrd .msrd-NewIdentity-hiddenMobile {
+    display: block;
+  }
+}
+
+.msrd .msrd-NewIdentity-hero {
+  overflow: hidden;
+  position: relative;
+}
+
+.msrd .msrd-NewIdentity-hero::before {
+  background-image: url(https://res.cloudinary.com/measuredco/image/upload/f_auto,q_auto/v1740564389/site/hero-bg_oc1h9z.png);
+  background-position: 100% top;
+  background-repeat: no-repeat;
+  background-size: auto 100%;
+  bottom: 0;
+  content: "";
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+@media (min-width: 48em) {
+  .msrd .msrd-NewIdentity-hero::before {
+    background-position: initial;
+    bottom: -4%;
+    left: 53.5%;
+  }
+}
+
+@media (min-width: 53em) {
+  .msrd .msrd-NewIdentity-hero::before {
+    bottom: 0;
+  }
+}
+
+@media (min-width: 60em) {
+  .msrd .msrd-NewIdentity-hero::before {
+    left: 63%;
+  }
+}