plaee
Style Guide
Typography, colors, and design tokens. Use these to keep your customizations consistent with the template.
01 — Colors
Brand
Primary
#FFFEFA
Primary Dark
#F7F6F0
Primary Accent
#EFC7FF
Secondary Accent
#021B42
Gray Scale
White
#FFFFFF
Gray 30
#D1D5DB
Gray 40
#ADADAD
Gray 50
#7A7A7A
Gray 60
#616161
Gray 70
#545454
Gray 80
#3D3D3D
Black 90
#262626
Black
#000000
02 — Typography
H1 Serif 48
Hedvig Letters Serif · 48px
Powering the prediction economy.
H2 Serif 48
Hedvig Letters Serif · 48px
Powering the prediction economy.
H2 Serif 32
Hedvig Letters Serif · 32px
Powering the prediction economy.
H3 Serif 32
Hedvig Letters Serif · 32px
Powering the prediction economy.
H2 24
Inter Medium · 24px · -0.04em
Powering the prediction economy.
H3 20
Inter Medium · 20px · -0.04em
Powering the prediction economy.
Body Serif 24
Hedvig Letters Serif · 24px
Powering the prediction economy.
Body 16
Inter Medium · 16px · -0.04em
Powering the prediction economy.
Body 14
Inter Medium · 14px · -0.04em
Powering the prediction economy.
Body 13
Inter SemiBold · 13px · -0.035em
Powering the prediction economy.
Body 12
Inter SemiBold · 12px · -0.03em
Powering the prediction economy.
Body Mono 12
Roboto Mono · 12px · Uppercase
Features · Changelog · Blog
03 — Typefaces
Hedvig Letters Serif
Display / Headings
Aa Bb Cc
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Used for all display headings, hero titles, and editorial moments throughout the template.
Inter
Body / UI
Aa Bb Cc Dd Ee Ff Gg Hh
ABCDEFGHIJKLMNOPQRSTUVWXYZ
Used for all body copy, UI labels, navigation, buttons, and supporting text across the template.
04 — Color Usage
Token
When to use
Primary
#FFFEFA
Default page background. Use for main content areas and top-level section fills.
Primary Dark
#F7F6F0
Alternate section backgrounds, card surfaces, and subtle UI containers.
Primary Accent
#33E9BB
CTAs, active states, badges, highlights, and progress indicators. The core brand color.
Secondary Accent
#021B42
Dark hero sections, dark-mode cards, and high-contrast backgrounds.
White
#FFFFFF
Nav backgrounds, modals, overlapping components, and pure white surfaces.
Border
#C7C7C7
Borders, dividers, input strokes, and placeholder backgrounds.
Gray 50
#7A7A7A
Placeholder text, disabled UI states, and muted supporting copy.
Gray 60
#616161
Secondary body text, captions, timestamps, and meta information.
Black 90
#262626
Primary body text, headings on light backgrounds, and high-emphasis labels.
Black
#000000
Pure black. Use for maximum contrast moments, icon fills on light backgrounds.
05 — Spacing Scale
Core spacing values used for padding, gaps, and margins. Stick to these increments when customizing layout.
4px
8px
12px
16px
20px
24px
32px
40px
48px
64px
80px
06 — Border Radius
Radius tokens used across components, cards, inputs, and buttons.
0px
Sharp
4px
Subtle
8px
Inputs / tags
12px
Cards
16px
Modals
100px
Pill / buttons
![](data:image/svg+xml,<svg display="block" id="4057551008" role="presentation" viewBox="0 0 44 16" xmlns="http://www.w3.org/2000/svg"><g fill="transparent" height="9px" id="lZ0UDY6bX" transform="translate(0 4)" width="44px"><path d="M 0 0 L 44 0 L 44 9 L 0 9 Z" fill="transparent" height="9px" id="Oz20DdtBY" width="44px"/><path d="M 22.271 0.619 C 22.662 -0.163 23.749 -0.207 24.211 0.504 L 26.001 3.895 C 26.323 4.504 26.089 5.259 25.478 5.581 C 25.298 5.676 25.098 5.726 24.896 5.726 C 24.431 5.726 24.005 5.47 23.787 5.059 L 21.868 1.424 Z M 27.13 2.791 C 27.531 3.076 28.011 3.229 28.504 3.228 L 33.317 3.228 L 33.317 3.229 L 33.677 3.229 C 34.368 3.229 34.928 3.789 34.928 4.477 C 34.928 5.166 34.368 5.726 33.677 5.726 L 31.354 5.726 C 29.42 5.726 27.767 4.502 27.13 2.791 Z M 36.122 2.791 C 36.524 3.076 37.004 3.229 37.496 3.228 L 42.309 3.228 L 42.309 3.229 L 42.669 3.229 C 43.361 3.229 43.92 3.789 43.92 4.477 C 43.92 5.166 43.361 5.726 42.669 5.726 L 40.347 5.726 C 38.412 5.726 36.76 4.502 36.122 2.791 Z M 6.706 0.021 C 7.326 0.021 7.916 0.393 7.486 1.138 C 7.057 1.883 6.226 2.518 5.017 2.518 L 3.707 2.518 C 3.043 2.518 2.502 3.057 2.502 3.722 L 2.502 4.477 C 2.502 5.166 1.943 5.725 1.251 5.725 C 0.559 5.725 0 5.165 0 4.477 L 0 3.722 C 0 1.682 1.663 0.021 3.707 0.021 L 6.706 0.021 Z M 9.315 2.639 C 9.747 3.02 10.302 3.229 10.878 3.228 L 14.556 3.228 C 15.248 3.228 15.807 3.788 15.807 4.477 C 15.807 5.165 15.248 5.725 14.556 5.725 L 13.126 5.725 C 11.254 5.725 9.686 4.399 9.315 2.639 Z" fill="rgb(255, 255, 255)" height="5.725657043779325px" id="WY9us925j" transform="translate(0 3.269)" width="43.919913363173464px"/><path d="M 21.524 0.001 L 21.525 0.001 C 21.526 0.001 21.527 0.001 21.529 0.002 C 21.55 0.003 21.57 0.005 21.591 0.007 C 21.614 0.009 21.638 0.013 21.661 0.016 L 21.665 0.016 L 21.666 0.017 L 21.667 0.017 C 21.684 0.019 21.701 0.023 21.717 0.026 L 21.723 0.027 C 21.743 0.032 21.76 0.036 21.777 0.04 L 21.78 0.041 L 21.783 0.041 L 21.783 0.041 C 21.806 0.047 21.818 0.05 21.828 0.054 L 21.835 0.056 L 21.838 0.057 L 21.843 0.058 C 21.856 0.062 21.869 0.067 21.889 0.074 L 21.89 0.074 L 21.895 0.076 L 21.908 0.081 C 21.927 0.088 21.931 0.09 21.941 0.094 L 21.942 0.094 C 21.946 0.096 21.953 0.099 21.964 0.104 L 21.972 0.108 L 21.98 0.111 C 21.983 0.112 21.986 0.114 22 0.12 L 22.003 0.121 L 22.005 0.122 C 22.01 0.124 22.018 0.128 22.037 0.138 C 22.041 0.14 22.044 0.142 22.047 0.143 L 22.05 0.144 L 22.051 0.145 C 22.122 0.183 22.189 0.227 22.252 0.277 L 22.253 0.279 L 22.273 0.294 C 22.281 0.301 22.291 0.309 22.306 0.323 L 22.307 0.324 C 22.314 0.33 22.311 0.328 22.331 0.347 C 22.337 0.353 22.342 0.357 22.344 0.36 C 22.349 0.364 22.349 0.364 22.349 0.364 L 22.349 0.364 L 22.35 0.365 C 22.361 0.376 22.372 0.388 22.385 0.402 L 22.396 0.414 L 22.398 0.416 C 22.459 0.483 22.511 0.557 22.555 0.635 L 23.577 2.571 C 22.83 2.451 22.02 2.783 21.629 3.564 L 21.146 4.532 L 19.143 8.326 C 18.919 8.75 18.485 8.993 18.035 8.993 C 17.838 8.993 17.639 8.947 17.452 8.848 C 16.841 8.527 16.607 7.772 16.929 7.162 L 20.361 0.663 L 20.363 0.658 C 20.36 0.663 20.38 0.627 20.416 0.572 C 20.452 0.515 20.493 0.461 20.537 0.41 L 20.548 0.398 L 20.551 0.395 L 20.559 0.386 C 20.576 0.367 20.595 0.35 20.614 0.333 L 20.636 0.312 L 20.638 0.31 C 20.692 0.263 20.749 0.221 20.808 0.184 L 20.825 0.184 L 20.896 0.136 C 20.908 0.129 20.921 0.123 20.933 0.117 L 20.941 0.114 L 20.954 0.108 L 20.956 0.107 L 20.959 0.106 C 20.968 0.102 20.975 0.099 20.996 0.09 L 20.997 0.09 L 20.999 0.089 L 21.002 0.087 L 21.012 0.084 L 21.022 0.08 C 21.031 0.077 21.039 0.074 21.048 0.07 L 21.05 0.07 L 21.051 0.069 C 21.061 0.065 21.072 0.062 21.082 0.059 L 21.085 0.058 L 21.089 0.057 L 21.099 0.054 C 21.112 0.049 21.127 0.045 21.147 0.04 L 21.153 0.039 L 21.154 0.038 L 21.158 0.037 C 21.173 0.034 21.188 0.03 21.203 0.027 C 21.209 0.026 21.213 0.025 21.217 0.024 C 21.232 0.021 21.246 0.019 21.261 0.016 L 21.268 0.015 L 21.271 0.015 L 21.276 0.014 L 21.281 0.013 L 21.281 0.013 C 21.293 0.011 21.306 0.009 21.319 0.008 L 21.325 0.007 L 21.331 0.006 L 21.334 0.006 L 21.335 0.006 C 21.353 0.004 21.364 0.003 21.375 0.003 L 21.386 0.002 L 21.39 0.002 L 21.391 0.002 L 21.398 0.001 L 21.412 0.001 L 21.422 0 L 21.427 0 L 21.491 0 C 21.505 0 21.515 0.001 21.524 0.001 Z M 10.483 0 C 11.175 0 11.734 0.56 11.734 1.248 L 11.734 5.106 C 11.734 5.35 11.797 5.579 11.907 5.778 L 11.237 5.778 L 11.237 5.777 L 10.878 5.777 C 9.968 5.777 9.232 5.041 9.232 4.135 L 9.232 1.248 C 9.232 0.56 9.791 0 10.483 0 Z M 31.39 3.249 L 32.612 3.249 C 33.303 3.249 33.862 3.809 33.862 4.498 C 33.862 5.187 33.303 5.778 32.612 5.778 L 28.462 5.778 C 27.61 5.757 26.919 5.092 26.856 4.254 C 26.874 3.914 26.931 3.576 27.026 3.249 L 31.382 3.249 C 31.385 3.249 31.387 3.249 31.39 3.249 Z M 40.382 3.249 L 41.603 3.249 C 42.295 3.249 42.854 3.809 42.854 4.498 C 42.854 5.186 42.309 5.778 41.617 5.778 L 37.454 5.778 C 36.602 5.757 35.911 5.092 35.847 4.254 C 35.866 3.914 35.923 3.576 36.018 3.249 L 40.374 3.249 Z M 5.017 0 C 6.616 0 7.916 1.299 7.916 2.893 C 7.916 2.949 7.914 3.004 7.911 3.058 C 7.629 2.721 7.205 2.497 6.706 2.497 L 1.251 2.497 C 0.559 2.497 0 1.937 0 1.248 C 0 0.56 0.559 0 1.251 0 Z M 42.668 0.001 C 43.36 0.001 43.919 0.561 43.919 1.249 C 43.919 1.938 43.36 2.498 42.668 2.498 L 36.312 2.498 C 37.051 1.02 38.581 0.001 40.346 0.001 Z M 33.676 0.001 C 34.368 0.001 34.927 0.561 34.927 1.249 C 34.927 1.938 34.368 2.498 33.676 2.498 L 27.32 2.498 C 28.059 1.02 29.589 0.001 31.354 0.001 Z" fill="rgb(255, 255, 255)" height="8.992799999999999px" id="V5cgm8Fg0" width="43.91883515260784px"/></g></svg>)
