AWDS

"Andrew Westling Design System" - it's exactly what it says on the box

This is just my kitchen sink for testing the local theme on this website.

Colors

text

#050708

background

#ffffff

muted

#666666

highlight

#efefef

primary

#f1553a

secondary

#1d93b2

tertiary

#b8c05d

accent

#fcbb1a

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Default Body TextLabel Text

Theme Output

{
  "useColorSchemeMediaQuery": true,
  "useLocalStorage": false,
  "breakpoints": [
    "40rem"
  ],
  "fonts": {
    "body": "system-ui, sans-serif",
    "heading": "inherit",
    "monospace": "Menlo, monospace"
  },
  "space": [
    "0.000rem",
    "0.250rem",
    "0.500rem",
    "1.000rem",
    "2.000rem",
    "4.000rem",
    "8.000rem"
  ],
  "fontSizes": [
    "0.800rem",
    "1.000rem",
    "1.250rem",
    "1.500rem",
    "2.000rem",
    "2.500rem"
  ],
  "fontWeights": {
    "body": 400,
    "heading": 600
  },
  "lineHeights": {
    "body": 1.5,
    "heading": 1.125
  },
  "colors": {
    "text": "var(--theme-ui-colors-text)",
    "background": "var(--theme-ui-colors-background)",
    "muted": "var(--theme-ui-colors-muted)",
    "highlight": "var(--theme-ui-colors-highlight)",
    "primary": "var(--theme-ui-colors-primary)",
    "secondary": "var(--theme-ui-colors-secondary)",
    "tertiary": "var(--theme-ui-colors-tertiary)",
    "accent": "var(--theme-ui-colors-accent)",
    "modes": {
      "dark": {
        "text": "var(--theme-ui-colors-modes-dark-text)",
        "background": "var(--theme-ui-colors-modes-dark-background)",
        "muted": "var(--theme-ui-colors-modes-dark-muted)",
        "highlight": "var(--theme-ui-colors-modes-dark-highlight)"
      }
    }
  },
  "text": {
    "heading": {
      "fontFamily": "heading",
      "lineHeight": "heading",
      "fontWeight": "heading",
      "&:hover": {
        ".anchor-link": {
          "visibility": [
            null,
            "visible"
          ]
        }
      }
    },
    "label": {
      "fontSize": "0.800rem",
      "color": "muted"
    },
    "footer": {
      "lineHeight": 2,
      "fontSize": "0.800rem",
      "display": "block"
    },
    "default": {
      "fontSize": "1.000rem",
      "lineHeight": "body"
    }
  },
  "styles": {
    "root": {
      "fontFamily": "body",
      "lineHeight": "body",
      "fontWeight": "body",
      "h1": {
        "variant": "text.heading",
        "fontSize": [
          "2.000rem",
          "2.500rem"
        ]
      },
      "h2": {
        "variant": "text.heading",
        "fontSize": [
          "1.500rem",
          "2.000rem"
        ]
      },
      "h3": {
        "variant": "text.heading",
        "fontSize": [
          "1.250rem",
          "1.500rem"
        ]
      },
      "h4": {
        "variant": "text.heading",
        "fontSize": [
          "1.000rem",
          "1.250rem"
        ]
      },
      "h5": {
        "variant": "text.heading",
        "fontSize": [
          "1.000rem",
          "1.250rem"
        ]
      },
      "h6": {
        "variant": "text.heading",
        "fontSize": [
          "1.000rem",
          "1.250rem"
        ]
      },
      ".anchor-link": {
        "visibility": "hidden",
        "float": "left",
        "lineHeight": 1,
        "paddingRight": "0.250rem",
        "marginLeft": "calc(-1.000rem - 0.250rem)",
        "fill": "text"
      },
      "code": {
        "backgroundColor": "highlight",
        "borderRadius": "default",
        "color": "primary",
        "padding": "0.250rem"
      }
    },
    "a": {
      "color": "inherit",
      "&:hover": {
        "color": "primary"
      }
    },
    "p": {
      "variant": "text.default"
    },
    "li": {
      "variant": "text.default"
    },
    "footer": {
      "backgroundColor": "highlight",
      "fontSize": "0.800rem",
      "paddingY": "2.000rem",
      "color": "muted",
      "a": {
        "color": "muted"
      }
    }
  },
  "radii": {
    "default": "3px",
    "large": "10px",
    "full": "9999px"
  },
  "sizes": {
    "container": "50rem",
    "space": [
      "0.000rem",
      "0.250rem",
      "0.500rem",
      "1.000rem",
      "2.000rem",
      "4.000rem",
      "8.000rem"
    ]
  },
  "layout": {
    "container": {
      "paddingX": "1.000rem"
    }
  },
  "rawColors": {
    "text": "#050708",
    "background": "#ffffff",
    "muted": "#666666",
    "highlight": "#efefef",
    "primary": "#f1553a",
    "secondary": "#1d93b2",
    "tertiary": "#b8c05d",
    "accent": "#fcbb1a",
    "modes": {
      "dark": {
        "text": "#dddddd",
        "background": "#050708",
        "muted": "#898989",
        "highlight": "#333333"
      }
    }
  }
}

Components

DarkModeToggle
Footer
Greeting
Header
Message
PhotoOfMe

DarkModeToggle

Toggles dark mode using Theme UI's useColorMode().

This is used on the header. Something about the SVG is broken in Safari on both macOS and iOS and it doesn't render ... I need to figure it out.

Global footer on this website.

Greeting

This is the banner at the top of my index page and my resume.

👋 Hi, I'm Andrew M Westling, a software engineer in Brooklyn, NY.

Global header on this website.

Message

I use this block at the top of pages to give a TL;DR summary of what you're about to read.

This is a Message. I use it at the top of page to summarize what the page is about.

Maybe it's just a response to a shortened attention span, but it's nice to have a TL;DR sometimes.

Sometimes, these include links to external pages. To include an external link, do it like this.

PhotoOfMe

This is the photo of me on the index page, and the caption/attribution.

At Barbican Centre in London, May 2019. Photo by Cecily Devoto

Photo of Andrew at Barbican Centre — At Barbican Centre in London, May 2019. Photo by Cecily Devoto

.css-an7tzy{color:inherit;}.css-an7tzy:hover{color:var(--theme-ui-colors-primary);}AWDS