History: Colors

• «
• »

{maketoc}

{DIV(class="container")}
    {DIV(class="display-5 fw-bold mb-3")}Color & Palette{DIV}
    {DIV(class="lead mb-0")}Built around the signature radial gradient from the logo, with supporting navy and neutrals for UI and print.{DIV}
{DIV}

!! The brand signature 
This radial gradient is the core of the logo. Treat it as a primary brand asset not just a decorative effect. These colors are most frequently used and associated with our brand.
* To be used on http://info.tiki.org
* FiveAlive theme option: Blueberry
~tc~^[tiki-download_file.php?fileId=58|Download the primary palette Adobe Swatch Exchange (ASE)]^ 
{img fileId=43}~/tc~
{DIV(class="grad-bar mb-3")}{DIV}
{DIV(class="d-flex flex-wrap gap-4 mb-5")}
    {DIV()}Start: {DIV(class="text-primary")}__#28AAE1__{DIV}Bright Cyan-Blue {DIV}
    {DIV()}End: {DIV(class="text-primary")}__#004B78__{DIV} Deep Blue {DIV}
    {DIV()}Type: {DIV(class="text-primary")}__Radial__{DIV}{DIV}
{DIV}

{DIV(class="bg-body-secondary py-5")}
    {DIV(class="container-lg")}    
        {DIV(class="text-start mb-4")}
!!!!!Core solid colors
        {DIV}
        {DIV(class="row g-1 g-lg-2")}
            {DIV(class="col-12 col-md-6 col-lg-6 col-xl-3")}
                {DIV(class="bg-body rounded-3 shadow-sm h-auto border text-start")}
                    {DIV(class="rounded-top px-2 py-3 fs-5 text-black" style="background:#28AAE1;")}__Bright Blue__{DIV}
                    {DIV(class="p-2")}
                        HEX: #28AAE1
                        RGB: 40, 170, 225
                        CMYK: 70, 15, 0, 0
                        {DIV(class="small text-secondary-subtle")}Gradient start -- Accents{DIV}
                    {DIV}
                {DIV}
            {DIV}
            {DIV(class="col-12 col-md-6 col-lg-6 col-xl-3")}
                {DIV(class="bg-body rounded-3 shadow-sm h-auto border text-start")}
                    {DIV(class="rounded-top px-2 py-3 fs-5 text-white" style="background:#004B78;")}__Deep Blue__{DIV}
                    {DIV(class="p-2")}
                        HEX: #004B78
                        RGB: 0, 75, 120
                        CMYK: 100, 75, 30, 10
                        {DIV(class="small text-secondary-subtle")}Gradient end -- Primary dark{DIV}
                    {DIV}
                {DIV}
            {DIV}
            {DIV(class="col-12 col-md-6 col-lg-6 col-xl-3")}
                {DIV(class="bg-body rounded-3 shadow-sm h-auto border text-start")}
                    {DIV(class="rounded-top px-2 py-3 fs-5 text-white" style="background:#143C64;")}__Navy__{DIV}
                    {DIV(class="p-2")}
                        HEX: #143C64
                        RGB: 20, 60, 100
                        CMYK: 100, 80, 35, 25
                        {DIV(class="small text-secondary-subtle")}Logo secondary{DIV}
                    {DIV}
                {DIV}
            {DIV}
            {DIV(class="col-12 col-md-6 col-lg-6 col-xl-3")}
                {DIV(class="bg-body rounded-3 shadow-sm h-auto border text-start")}
                    {DIV(class="rounded-top border-bottom px-2 py-3 fs-5 text-black" style="background:#fff;")}__White__{DIV}
                    {DIV(class="p-2")}
                        HEX: #FFFFFF
                        RGB: 255, 255, 255
                        CMYK: 0, 0, 0, 0
                        {DIV(class="small text-secondary-subtle")}Text, Surface{DIV}
                    {DIV}
                {DIV}
            {DIV}
        {DIV}
    {DIV}
{DIV}

{DIV(class="container-lg")}    
    {DIV(class="text-start mb-4")}
        {DIV(class="fs-4 fw-bold")}How to use these colors{DIV} 
    {DIV}
    {DIV(class="row g-3 g-lg-4")}
        {DIV(class="col-12 col-md-6 col-lg-6 col-xl-4")}
            {DIV(class="bg-body p-3 rounded-3 shadow h-100 border text-start")}
                ~~green:{icon name="check" size="2"}~~
                {DIV(class="fs-5 my-2 fw-bold")}Do{DIV}
* Maintain clear space equal to the 'i' height on all four sides of the mark.
* Use the SVG source file for all digital to preserve gradient fidelity at any size.
* Use the logo on white, light-grey, Ocean Deep, or Midnight backgrounds only.
            {DIV}
        {DIV}
        {DIV(class="col-12 col-md-6 col-lg-6 col-xl-4")}
            {DIV(class="bg-body p-3 rounded-3 shadow h-100 border text-start")}
                ~~red:{icon name="xmark" size="2"}~~
                {DIV(class="fs-5 my-2 fw-bold")}Don't{DIV}
* Replace the logo gradient with a linear one
* Recolour, re-gradient, or alter the two anchor stop values (#28AAE1 / #004B78).
* Stretch, skew, rotate, or distort the diamond form in any direction.
* Add drop shadows, glows, outlines, or decorative effects around the logo mark.
            {DIV} 
        {DIV}
        {DIV(class="col-12 col-md-6 col-lg-6 col-xl-4")}
            {DIV(class="bg-body p-3 rounded-3 shadow h-100 border text-start")}
                ~~#28AAE1:{icon name="eye" size="2"}~~
                {DIV(class="fs-5 my-2 fw-bold")}Accessibility{DIV}
                Navy (#143C64) on White meets AA. Bright Blue on White is suitable for large text and UI accents. Always verify new combinations.
            {DIV}
        {DIV}
    {DIV}
{DIV}
%%%
! Secondary
^[tiki-download_file.php?fileId=59|Download the secondary palette Adobe Swatch Exchange (ASE)]^

!! Development
* To be used on http://dev.tiki.org
* FiveAlive theme option: Watermelon

{SPLIT()}
{img fileId=50}
---
%%%
{img fileId=28}
{SPLIT}

!! Documentation
* To be used on http://doc.tiki.org
* FiveAlive theme option: Kiwi

{SPLIT()}
{img fileId=47}
---
%%%
{img fileId=25}
{SPLIT}

!! Community
* To be used on http://tiki.org/Home
* FiveAlive theme option: Orange

{SPLIT()}
{img fileId=46}
---
%%%
{img fileId=24}
{SPLIT}

!! Themes
* To be used on http://themes.tiki.org
* FiveAlive theme option: Grape

{SPLIT()}
{img fileId=49}
---
%%%
{img fileId=26}
{SPLIT}{REMARKSBOX(type="information" title="RGB values wrong")}RGB for the second color in the gradient is wrong here. Should be __85,30,60__ instead of 0,75,120. Also the third (complementary) color is __60,40,75__ in RGB. -- luci{REMARKSBOX}

!! Profiles
* To be used on http://profiles.tiki.org
* FiveAlive theme option: Lemon

{SPLIT()}
{img fileId=48}
---
%%%
{img fileId=27}
{SPLIT}

!! Live (formerly known as 'Chat')
* To be used on http://irc.tiki.org
* FiveAlive theme option: Akebi

Will eventually be live.tiki.org for a [http://bigbluebutton.org/|Big Blue Button] instance.

{SPLIT()}
{img fileId=45}
---
%%%
{img fileId=23}
{SPLIT}

!! Branding
* To be used on http://branding.tiki.org
* FiveAlive theme option: Raspberry

{SPLIT()}
{img fileId=44}
---
%%%
{img fileId=22}
{SPLIT}

-=Aliases=-
* (alias(Colours))

• «
• 1 (current)
• 2
• 3
• »