diff options
Diffstat (limited to 'frontend/app/design-tokens.css')
| -rw-r--r-- | frontend/app/design-tokens.css | 206 |
1 files changed, 206 insertions, 0 deletions
diff --git a/frontend/app/design-tokens.css b/frontend/app/design-tokens.css new file mode 100644 index 0000000..3a70aea --- /dev/null +++ b/frontend/app/design-tokens.css @@ -0,0 +1,206 @@ +@font-face { + font-family: "EB Garamond"; + src: + url("/design-system/fonts/EBGaramond-VariableFont_wght.ttf") format("truetype-variations"), + url("/design-system/fonts/EBGaramond-VariableFont_wght.ttf") format("truetype"); + font-weight: 400 800; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "EB Garamond"; + src: + url("/design-system/fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype-variations"), + url("/design-system/fonts/EBGaramond-Italic-VariableFont_wght.ttf") format("truetype"); + font-weight: 400 800; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Sans"; + src: + url("/design-system/fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth,wght.ttf") format("truetype-variations"), + url("/design-system/fonts/IBM_Plex_Sans/IBMPlexSans-VariableFont_wdth,wght.ttf") format("truetype"); + font-weight: 100 700; + font-stretch: 85% 100%; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Sans"; + src: + url("/design-system/fonts/IBM_Plex_Sans/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf") format("truetype-variations"), + url("/design-system/fonts/IBM_Plex_Sans/IBMPlexSans-Italic-VariableFont_wdth,wght.ttf") format("truetype"); + font-weight: 100 700; + font-stretch: 85% 100%; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-Light.ttf") format("truetype"); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-LightItalic.ttf") format("truetype"); + font-weight: 300; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-Regular.ttf") format("truetype"); + font-weight: 400; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-Italic.ttf") format("truetype"); + font-weight: 400; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-Medium.ttf") format("truetype"); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-MediumItalic.ttf") format("truetype"); + font-weight: 500; + font-style: italic; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBold.ttf") format("truetype"); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: "IBM Plex Mono"; + src: url("/design-system/fonts/IBM_Plex_Mono/IBMPlexMono-SemiBoldItalic.ttf") format("truetype"); + font-weight: 600; + font-style: italic; + font-display: swap; +} + +:root { + --ink-0: #0b0e13; + --ink-1: #11151c; + --ink-2: #181d26; + --ink-3: #222934; + --ink-4: #2c3340; + --line-1: #232934; + --line-2: #2e3645; + --line-3: #3d4658; + --fg-1: #f2ecdc; + --fg-2: #c7c0ae; + --fg-3: #8e8676; + --fg-4: #5e5849; + --brass: #c2aa7a; + --brass-bright: #dcc79e; + --brass-deep: #8f7a50; + --brass-ink: #17120a; + --positive: #4f8c5e; + --positive-bg: #15241a; + --negative: #b5494b; + --negative-bg: #2a1517; + --warning: #c49545; + --warning-bg: #2a1f0f; + --info: #4a78b5; + --info-bg: #11202e; + --focus-ring: rgba(194, 170, 122, 0.55); + --selection-bg: rgba(194, 170, 122, 0.25); + --font-display: "EB Garamond", Georgia, serif; + --font-sans: "IBM Plex Sans", system-ui, sans-serif; + --font-mono: "IBM Plex Mono", monospace; + --fs-12: 0.75rem; + --fs-13: 0.8125rem; + --fs-14: 0.875rem; + --fs-16: 1rem; + --fs-18: 1.125rem; + --fs-20: 1.25rem; + --fs-24: 1.5rem; + --fs-30: 1.875rem; + --fs-38: 2.375rem; + --fs-48: 3rem; + --fs-64: 4rem; + --sp-1: 4px; + --sp-2: 8px; + --sp-3: 12px; + --sp-4: 16px; + --sp-5: 24px; + --sp-6: 32px; + --sp-7: 48px; + --sp-8: 64px; + --sp-9: 96px; + --r-1: 2px; + --r-2: 4px; + --r-3: 6px; + --r-4: 8px; + --r-full: 999px; + --tr-wide: 0.04em; + --tr-wider: 0.12em; + --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-2: 0 1px 0 rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.45); +} + +*, +*::before, +*::after { + box-sizing: border-box; +} + +html, +body { + min-height: 100%; + margin: 0; + background: var(--ink-0); + color: var(--fg-2); + font-family: var(--font-sans); +} + +body { + background-image: + linear-gradient(to bottom, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0)), + url("/design-system/grain.svg"); + background-size: auto, 240px 240px; +} + +::selection { + background: var(--selection-bg); +} + +a { + color: inherit; +} + +button, +input { + font: inherit; +} + +button { + cursor: pointer; +} + |