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 TextTheme Output
{
"useColorSchemeMediaQuery": true,
"printColorModeName": "light",
"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",
"3.000rem",
"5.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": {
"light": {
"text": "var(--theme-ui-colors-modes-light-text)",
"background": "var(--theme-ui-colors-modes-light-background)",
"muted": "var(--theme-ui-colors-modes-light-muted)",
"highlight": "var(--theme-ui-colors-modes-light-highlight)"
},
"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"
]
},
"h2:not(:first-of-type)": {
"marginTop": [
"3.000rem"
]
},
"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"
},
".tidbyt-gif-container": {
"backgroundColor": "#000",
"width": "fit-content"
},
".tidbyt-gif": {
"imageRendering": "pixelated",
"maskSize": "contain",
"webkitMaskSize": "contain",
"maskImage": "url('/assets/projects/tidbyt/mask.png')",
"webkitMaskImage": "url('/assets/projects/tidbyt/mask.png')"
},
"li > p": {
"margin": 0
}
},
"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",
"3.000rem",
"5.000rem"
]
},
"layout": {
"container": {
"paddingX": "1.000rem"
}
},
"buttons": {
"primary": {
"&:hover": {
"color": "text",
"cursor": "pointer"
}
},
"small": {
"fontSize": [
0
],
"color": "muted",
"bg": "highlight",
"borderColor": "muted",
"borderStyle": "solid",
"borderWidth": "1px",
"&:hover": {
"color": "highlight",
"bg": "muted",
"cursor": "pointer"
}
}
},
"rawColors": {
"text": "#050708",
"background": "#ffffff",
"muted": "#666666",
"highlight": "#efefef",
"primary": "#f1553a",
"secondary": "#1d93b2",
"tertiary": "#b8c05d",
"accent": "#fcbb1a",
"modes": {
"light": {
"text": "#050708",
"background": "#ffffff",
"muted": "#666666",
"highlight": "#efefef"
},
"dark": {
"text": "#dddddd",
"background": "#050708",
"muted": "#898989",
"highlight": "#333333"
}
}
}
}Components
DarkModeToggle
Toggles dark mode using Theme UI's useColorMode().
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.
Buttons
These are buttons, for use wherever a button is needed.
TidbytGif
This is to display a Tidbyt preview gif with the nicer "rounded" appearance from Pixlet's UI.
