Brighter Shores:Theme
This page contains information about the look of the Brighter Shores Wiki.
Colours Edit
Brand Edit
Body
--body-main
#fdfcfc
--body-light
#e7e5e4
--body-mid
#ad9e9a
--body-border
#bdb2ae
--body-dark
#6d5b54
--body-darker
#47403d
--body-background-color
#173a4d
Buttons and links
--button-border
#3c352a
--button-dark
#18140c
--button-light
#3a301d
--link-color
#8b694f
--table-header-link
#c7b8b3
--background-link-color
#e2bd8a
@infobox-link
#a5918a
Game class colors
@hopeport
#FFE233
@hopeport-dark
#3b382f
@mantuban
#68ABF1
@mantuban-dark
#26323d
@hopeforest
#72D757
@hopeforest-dark
#2e3930
@crenopolis
#979797
@crenopolis-dark
#3f3f3f
Status Edit
@mocaccino
#801c13
@old-brick
#9f261e
@flamingo
#ee4231
@apricot-peach
#fbc0ba
@bridesmaid
#feecea
@antique-bronze
#7a3f08
@korma
#b55e0c
@ecstasy
#f7861b
@corvette
#fbcfa6
@lace
#fef0e4
@cinnamon
#786300
@olive
#a48900
@supernova
#f9d000
@golden
#fcea94
@half-dutch
#fef9de
@san-felix
#2e5e05
@la-palma
#3c780a
@lima
#6bc71f
@caper
#c3e8a3
@frost
#ecf8e3
@regal-blue
#03436b
@venice-blue
#0b5884
@curious-blue
#3ea6e6
@jordy-blue
#aad9f5
@tropical-blue
#e5f3fc
@honey-flower
#3d276b
@seance
#4f348b
@medium-purple
#855cd8
@perfume
#cfc0f0
@heliotrope
#f0ecfa
@cosmic
#6d3662
@cannon-pink
#984c89
@lavender
#e874cf
@cherub
#f5c8ec
@french-lilac
#fceef9
@river-bed
#444e5a
@shuttle-gray
#5d6773
@gray-chateau
#949eaa
@mystic
#e4eaee
@black-haze
#f9fafa
Recommended pairings Edit
Having good color contrast benefits all users, but it is particularly beneficial to users with certain types of color blindness and other similar conditions, who experience low contrast, and have trouble differentiating between similar colors (MDN). To achieve at least a passing WCAG AA contrast ratio (4.5), these are the recommended color pairings for backgrounds against the default text colors in light mode and dark mode:
Base color | Background for dark text[1] | Ratio | Background for light text[2] | Ratio | |
---|---|---|---|---|---|
Red | @apricot-peach (#fbc0ba) |
6.55 | @old-brick (#9f261e) |
5.35 | |
Orange | @corvette (#fbcfa6) |
7.19 | @antique-bronze (#7a3f08) |
5.84 | |
Yellow | @golden (#fcea94) |
8.55 | @cinnamon (#786300) |
4.51 | |
Green | @caper (#c3e8a3) |
7.57 | @san-felix (#2e5e05) |
5.45 | |
Blue | @jordy-blue (#aad9f5) |
6.88 | @venice-blue (#0b5884) |
5.39 | |
Purple | @perfume (#cfc0f0) |
5.96 | @seance (#4f348b) |
6.76 | |
Pink | @cherub (#f5c8ec) |
7.08 | @cosmic (#6d3662) |
6.29 | |
Grey | @mystic (#e4eaee) |
8.52 | @river-bed (#444e5a) |
5.95 |
Classes Edit
The wiki stylesheets contain various helper classes for applying colours, some of which are documented here.
Components Edit
Typography Edit
Typography is used to create hierarchy and structure that guides users through information, giving them a smooth experience. The Brighter Shores Wiki's primary typefaces are PT Serif for headings and IBM Plex Sans for body copy.
Layout Edit
Elements should have adequate whitespace and margins; at least 20px padding and 15px margins are recommended for elements like the example below.
The quick brown fox jumps over the lazy dog.
Pig boudin chicken fatback shankle jowl kielbasa ball tip. Swine fatback porchetta, spare ribs brisket flank burgdoggen doner short loin. Frankfurter tenderloin pork loin alcatra kielbasa.
The quick brown fox jumps over the lazy dog.
Pig boudin chicken fatback shankle jowl kielbasa ball tip. Swine fatback porchetta, spare ribs brisket flank burgdoggen doner short loin. Frankfurter tenderloin pork loin alcatra kielbasa.