Design/Appearance: Difference between revisions
m (→Logo: Added Fullstop) |
|||
| (5 intermediate revisions by one other user not shown) | |||
| Line 1: | Line 1: | ||
This page describes MediaGoblin's appearance and style. If you're looking to contribute to its design, this is good reading material. |
This page describes MediaGoblin's appearance and style. If you're looking to contribute to its design, this is good reading material. |
||
It is, however, '''not meant to be a definitive up-to-date guide'''. It serves as an introduction, but experiments with the design are common and the latest design specifications will always be found in the MediaGoblin software itself. |
|||
== Default theme == |
== Default theme == |
||
| Line 7: | Line 9: | ||
* Text: we use a typeface called [http://www.google.com/webfonts/specimen/Lato Lato], created by Łukasz Dziedzic. The MediaGoblin logo is a custom design, though it takes hints from Lato. |
* Text: we use a typeface called [http://www.google.com/webfonts/specimen/Lato Lato], created by Łukasz Dziedzic. The MediaGoblin logo is a custom design, though it takes hints from Lato. |
||
* Background: a very dark grey with a slight texture. The texture was added to make it easier to distinguish the background from media with similar colors. Fallback color is #161616. |
* Background: a very dark grey with a slight texture. The texture was added to make it easier to distinguish the background from media with similar colors. Fallback color is #161616. |
||
[[File:Background.png]] |
|||
* Colors |
|||
** Text grey: #C3C3C3. Used for: body text. |
|||
The basic color palette used for MediaGoblin is shown below. Many other colors based on the same hues are also used. |
|||
** Pure white: #FFFFFF. Used for: headers, logo. |
|||
** Highlight green: #86D4B1. Used for: links, button backgrounds. |
|||
** Faint red: #D49086. Used for: form headers. |
|||
{| class="wikitable" width="400px" |
|||
Many other colors based on these hues are used across the MediaGoblin and related websites. |
|||
! Color || Hex || Sample || Used for e.g. |
|||
|- |
|||
| Text grey || #C3C3C3 || [[File:Color_text_grey.png]] || Body text |
|||
|- |
|||
| Pure white || #FFFFFF || [[File:Color_pure_white.png]] || Headers, logo |
|||
|- |
|||
| Highlight green || #86D4B1 || [[File:Color_highlight_green.png]] || Links, buttons |
|||
|- |
|||
| Faint red || #D49086 || [[File:Color_faint_red.png]] || Form headers |
|||
|} |
|||
== Light theme == |
== Light theme == |
||
Besides the regular theme, we've created a lighter version for use on the wiki, documentation and other places that might require reading longer pieces of text. It is meant to increase readability through the use of a |
Besides the regular theme, we've created a lighter version for use on the wiki, documentation and other places that might require reading longer pieces of text. It is meant to increase readability through the use of a black-on-white design and increased contrast. |
||
Color differences include: |
|||
{| class="wikitable" width="400px" |
|||
FIXME |
|||
! Color || Hex || Sample |
|||
|- |
|||
| A light background || #FCFCFC || [[File:Color_light_background.png]] |
|||
|- |
|||
| Dark text || #3C3C3C || [[File:Color_light_text.png]] |
|||
|- |
|||
| Black headers || #000000 || [[File:Color_light_headers.png]] |
|||
|- |
|||
| Adapted link color || #499776 || [[File:Color_light_link.png]] |
|||
|} |
|||
== Logo == |
== Logo == |
||
Get and use the MediaGoblin logo at http://www.mediagoblin.org/pages/logo.html |
Get and use the MediaGoblin logo at http://www.mediagoblin.org/pages/logo.html . |
||
Latest revision as of 16:05, 26 November 2016
This page describes MediaGoblin's appearance and style. If you're looking to contribute to its design, this is good reading material.
It is, however, not meant to be a definitive up-to-date guide. It serves as an introduction, but experiments with the design are common and the latest design specifications will always be found in the MediaGoblin software itself.
Default theme
By default, MediaGoblin the software and many of the MediaGoblin websites use a dark, relatively neutral theme. While beauty is important, we try to keep the theme simple and avoid unnecessary decoration. One of the reasons for this is that we believe MediaGoblin itself should stay in the background and put media in the spotlight. Another is that this makes it easier for others to theme their own MediaGoblin instances, which is also why we try to use as little images as possible in the design.
- Text: we use a typeface called Lato, created by Łukasz Dziedzic. The MediaGoblin logo is a custom design, though it takes hints from Lato.
- Background: a very dark grey with a slight texture. The texture was added to make it easier to distinguish the background from media with similar colors. Fallback color is #161616.
The basic color palette used for MediaGoblin is shown below. Many other colors based on the same hues are also used.
| Color | Hex | Sample | Used for e.g. |
|---|---|---|---|
| Text grey | #C3C3C3 |  |
Body text |
| Pure white | #FFFFFF |  |
Headers, logo |
| Highlight green | #86D4B1 |  |
Links, buttons |
| Faint red | #D49086 |  |
Form headers |
Light theme
Besides the regular theme, we've created a lighter version for use on the wiki, documentation and other places that might require reading longer pieces of text. It is meant to increase readability through the use of a black-on-white design and increased contrast.
Color differences include:
| Color | Hex | Sample |
|---|---|---|
| A light background | #FCFCFC | 
|
| Dark text | #3C3C3C | 
|
| Black headers | #000000 | 
|
| Adapted link color | #499776 | 
|
Logo
Get and use the MediaGoblin logo at http://www.mediagoblin.org/pages/logo.html .