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
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Default Body TextLabel TextTheme 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.
Footer
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.
Header
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.