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
Theme Output
{
"useColorSchemeMediaQuery": true,
"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.125rem",
"1.275rem",
"1.450rem",
"1.600rem",
"2.000rem"
],
"fontWeights": {
"body": 400,
"heading": 600
},
"lineHeights": {
"body": 1.5,
"heading": 1.125
},
"colors": {
"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"
}
}
},
"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"
},
"default": {
"fontSize": "1.000rem",
"lineHeight": "body"
}
},
"styles": {
"root": {
"fontFamily": "body",
"lineHeight": "body",
"fontWeight": "body",
"h1": {
"variant": "text.heading",
"fontSize": [
"1.600rem",
"2.000rem"
]
},
"h2": {
"variant": "text.heading",
"fontSize": [
"1.450rem",
"1.600rem"
]
},
"h3": {
"variant": "text.heading",
"fontSize": [
"1.275rem",
"1.450rem"
]
},
"h4": {
"variant": "text.heading",
"fontSize": [
"1.125rem",
"1.275rem"
]
},
"h5": {
"variant": "text.heading",
"fontSize": [
"1.125rem",
"1.275rem"
]
},
"h6": {
"variant": "text.heading",
"fontSize": [
"1.125rem",
"1.275rem"
]
},
".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"
}
}
}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.
