Quick share for a use case of Svelte's reactivity in building web extensions with wxt.dev and the extension storage API
Design
An overview of the typography, color scheme, and logo used in the Svelte Vietnam project
Typography
| Example | Description |
|---|---|
| Page Heading | The main heading of the page, usually corresponds to H1 |
| Large Heading | Headings for large sections of content on the page, usually corresponding to H1, H2 |
| Medium Heading | Headings for secondary content sections on the page, usually corresponding to H2, H3 |
| Heading | Headings for secondary content sections on the page, usually corresponding to H3, H4 |
| Title | Title of a component, or an item in a list |
| Page Subtitle | Additional description for each page, used alongside the “Page Heading” |
| Medium Body | Prominent content, relatively requiring more attention than normal content. |
| Body | Default content for most text on the page |
| Small Body | Secondary content, relatively less important than other main content |
| Smaller Body | Secondary content that is supplementary, not essential to the interface features |
Sand Palette
The “Sand” color collection, inspired by the palette of the same name from Harmony (Evil Martians), used as the building block for most content foregrounds and backgrounds — surfaces, text, lines, ...
P3
sand-50
105
to 950
oklch(98.83% 0.010 75)
-
sand-100
100
to 950
oklch(96.48% 0.012 75)
-
sand-200
90
to 950
oklch(91.80% 0.012 75)
-
sand-300
77
to 950
oklch(85.35% 0.012 75)
-
sand-400
65
to 950
oklch(78.91% 0.012 75)
-
sand-500
54
to 950
oklch(72.66% 0.012 75)
-
sand-600
65
to 50
oklch(61.33% 0.012 75)
-
sand-700
77
to 50
oklch(52.34% 0.012 75)
-
sand-800
90
to 50
oklch(41.21% 0.012 75)
-
sand-900
100
to 50
oklch(30.27% 0.012 75)
-
sand-950
105
to 50
oklch(19.34% 0.012 75)
* P3 — color is in the P3 color space. The P3 gamut is larger than and includes the sRGB gamut. P3 may not be supported on older devices.
Semantic Colors
Colors that have meaning depending on the position or context of use. These colors also change according to the display mode (light and dark).
Basic Colors
Default colors for most content — surfaces, text, lines, ... The following example lists some common colors.
1
2
3
4
1
--color-surface
2
--color-on-surface
3
--color-outline
4
--color-on-surface-subtle
Status Colors
Colors that indicate the current application status or provide additional context for the element.
info
Example for using status color within some text.
This is a sample “callout” that enhances a text block with some contextual meaning and helps draw user's attention. See more examples and how to use it via "Svelte Vietnam Blog - Writing Guidelines".
Notification Title
This is a sample notification. In practice, notification is fired upon some user interaction when system status changes.
1
2
3
1
--color-info-surface
2
--color-info-on-surface
3
--color-info-on-surface-subtle
Logo
A few words about the inspiration and theme of the logo used in the Svelte Vietnam project
Inspiration
The Svelte Vietnam logo is created from two main components: the official Svelte logo and the image of a conical hat (“nón lá”) with a star - symbolizing the image of the Vietnamese community. The main color of the logo is chosen based on the “Svelte color”, creating uniformity with the iconic color of the international Svelte community.
Inspire
Community
Vietnam
Versions
Svelte Vietnam
Original
Svelte Vietnam
Positive
Svelte Vietnam
Negative