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
expandrewantiperformancesexpandrewandrewwestlingandwestandwest1283883

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 Fort Greene Park
At Fort Greene Park in Brooklyn, June 2022. Photo by Candice McCardle