Brighter Shores:Theme: Difference between revisions

From Brighter Shores Wiki
Jump to navigation Jump to search
Browse history interactively
Content added Content deleted
VisualWikitext
 
(4 intermediate revisions by 2 users not shown)
Line 75: Line 75:
<p class="variable">@hopeport-dark</p>
<p class="variable">@hopeport-dark</p>
<p class="hexcode">#3b382f</p>
<p class="hexcode">#3b382f</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #68ABF1;">
⚫
<p class="variable">@mantuban</p>
⚫
<p class="hexcode">#68ABF1</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #26323d;">
⚫
<p class="variable">@mantuban-dark</p>
⚫
<p class="hexcode">#26323d</p>
</div>
</div>
<div class="color-group" style="background: #72D757;">
<div class="color-group" style="background: #72D757;">
Line 91: Line 83:
<p class="variable">@hopeforest-dark</p>
<p class="variable">@hopeforest-dark</p>
<p class="hexcode">#2e3930</p>
<p class="hexcode">#2e3930</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #68ABF1;">
⚫
<p class="variable">@mantuban</p>
⚫
<p class="hexcode">#68ABF1</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #26323d;">
⚫
<p class="variable">@mantuban-dark</p>
⚫
<p class="hexcode">#26323d</p>
</div>
</div>
<div class="color-group dark" style="background: #979797;">
<div class="color-group dark" style="background: #979797;">
Line 107: Line 107:
<p class="variable">@stonemaw-dark</p>
<p class="variable">@stonemaw-dark</p>
<p class="hexcode">#3b3430</p>
<p class="hexcode">#3b3430</p>
⚫
</div>
⚫
</div>

⚫
<div class="color-column">
⚫
<h3>Dark mode</h3>
⚫
<div class="color-group dark" style="background: #2b231e;">
⚫
<p class="variable">@cocoa-brown</p>
⚫
<p class="hexcode">#2b231e</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #39312a;">
⚫
<p class="variable">@woody-brown</p>
⚫
<p class="hexcode">#39312a</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #483c37;">
⚫
<p class="variable">@merlin</p>
⚫
<p class="hexcode">#483c37</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #5b4d48;">
⚫
<p class="variable">@armadillo</p>
⚫
<p class="hexcode">#5b4d48</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #736059;">
⚫
<p class="variable">@russett</p>
⚫
<p class="hexcode">#736059</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #d4ab9b;">
⚫
<p class="variable">@eunry</p>
⚫
<p class="hexcode">#d4ab9b</p>
</div>
</div>
</div>
</div>
Line 299: Line 327:
<p class="variable">@black-haze</p>
<p class="variable">@black-haze</p>
<p class="hexcode">#f9fafa</p>
<p class="hexcode">#f9fafa</p>
⚫
</div>
⚫
</div>

</div>

===Dark mode===
<div class="color-container">

⚫
<div class="color-column">
⚫
<h3>Body</h3>
⚫
<div class="color-group dark" style="background: #2b231e;">
⚫
<p class="variable">@cocoa-brown</p>
⚫
<p class="hexcode">#2b231e</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #39312a;">
⚫
<p class="variable">@woody-brown</p>
⚫
<p class="hexcode">#39312a</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #4d413d;">
⚫
<p class="variable">@armadillo</p>
⚫
<p class="hexcode">#4d413d</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #423834;">
⚫
<p class="variable">@merlin</p>
⚫
<p class="hexcode">#423834</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #736059;">
⚫
<p class="variable">@russett</p>
⚫
<p class="hexcode">#736059</p>
⚫
</div>
⚫
<div class="color-group dark" style="background: #d4ab9b;">
⚫
<p class="variable">@eunry</p>
⚫
<p class="hexcode">#d4ab9b</p>
</div>
</div>
</div>
</div>

Latest revision as of 21:42, 17 December 2024

Shortcuts:

This page contains information about the look of the Brighter Shores Wiki.

Colors[edit source]

Brand[edit source]

Body

--body-main

#fdfcfc

--body-light

#e7e5e4

--body-mid

#cbb7ae

--body-dark

#9f847a

--body-darker

#755c52

--body-background-color

#173a4d

Buttons and links

--button-border

#3c352a

--button-dark

#18140c

--button-light

#3a301d

--link-color

#8b694f

--table-header-link

#6d5248

--background-link-color

#e2bd8a

@infobox-link

#d5ab9c

Game class colors

@hopeport

#FFE233

@hopeport-dark

#3b382f

@hopeforest

#72D757

@hopeforest-dark

#2e3930

@mantuban

#68ABF1

@mantuban-dark

#26323d

@crenopolis

#979797

@crenopolis-dark

#3f3f3f

@stonemaw

#C57F41

@stonemaw-dark

#3b3430

Dark mode

@cocoa-brown

#2b231e

@woody-brown

#39312a

@merlin

#483c37

@armadillo

#5b4d48

@russett

#736059

@eunry

#d4ab9b

Status[edit source]

@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 source]

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
Gray @mystic
(#e4eaee) 		8.52 @river-bed
(#444e5a) 		5.95
  1. ↑ This is the darkest the background should be, assuming the text color is the light mode default, #36414f; the background should only be adjusted lighter.
  2. ↑ This is the lightest the background should be, assuming the text color is the dark mode default, #cbd9f4; the background should only be adjusted darker.

Classes[edit source]

Main article: /Classes

The wiki stylesheets contain various helper classes for applying colors, some of which are documented here.

Components[edit source]

Typography[edit source]

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 source]

Elements should have adequate whitespace and margins; at least 20px padding and 15px margins are recommended for elements like the example below.

Byline

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.

Byline

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.

Shadows[edit source]

Retrieved from ‘https://brightershoreswiki.org/w/Brighter_Shores:Theme?oldid=78748’