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

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.

Andrew M WestlingBrooklyn, NYhi@andrewwestling.comResumeAWDS
expandrewexpandrewandrewwestlingandwestandwest1283883

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.

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