Skip to content

Commit

Permalink
Merge pull request #56 from adzshaf/shafiya/visual-language
Browse files Browse the repository at this point in the history 
add visual language
  • Loading branch information
@adzshaf
adzshaf authored Nov 27, 2020
2 parents 46acfa9 + bf870a6 commit 7e0c37b
Show file tree
Hide file tree
Showing 44 changed files with 20,340 additions and 196 deletions.
148 changes: 148 additions & 0 deletions docusaurus/docs/color.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
---
id: color
title: Visual Language/Brand Color
sidebar_label: Brand Color
---

import ColorCard from "../helper/ColorCard"
import SmallColorCard from "../helper/SmallColorCard"
import SequenceColorCard from "../helper/SequenceColorCard"
import ColorRoles from "../helper/ColorRoles"
import GradientCard from "../helper/GradientCard"

###### COMPFEST is ready to create impact with out <span><h5>vibrant, bold, and optimistic</h5></span> persona. It is the personalities that became the foundation of our brand, reflecting on our values, culture, theme, vision, and mission.

## Main Colors

###### Our main palette symbolizes the optimistic and bold value of our brand. The colors signifies compassion and ambition, reflecting our mission to _Empower Breakthrough_.

<div className="row-wrap" style={{ marginBottom: "24px" }}>
<ColorCard colorName="Black" hex="#000000" rgb="0, 0, 0" style={{ margin: "12px 12px 0 0" }} />
<ColorCard colorName="Red Violet" hex="#D619B7" rgb="214, 25, 183" style={{ margin: "12px 12px 0 0" }} />
<ColorCard colorName="Cerulean" hex="#0EB1E0" rgb="14, 177, 224" style={{ margin: "12px 12px 0 0" }} />
<ColorCard colorName="Razzmatazz" hex="#F2195F" rgb="242, 25, 95" style={{ margin: "12px 12px 0 0" }} />
<ColorCard colorName="Porsche" hex="#EFB567" rgb="239, 181, 103" style={{ margin: "12px 12px 0 0" }} />
<ColorCard colorName="Shamrock" hex="#32C9AD" rgb="50, 201, 173" style={{ margin: "12px 12px 0 0" }} />
</div>

<div className="row-wrap" style={{ marginBottom: "24px" }}>
<div className="column">
<h3>Phase 1 - Recruitment</h3>

<div className="row-wrap">
<ColorCard colorName="Lipstick" hex="#CB0058" rgb="203, 0, 88" style={{ marginRight: "12px" }} />
<ColorCard colorName="Royal Heath" hex="#992F8B" rgb="153, 47, 139" style={{ marginRight: "12px" }} />
</div>
</div>

<div className="column">
<h3>Phase 2 - Academy</h3>
<div className="row-wrap">
<ColorCard colorName="Azure Radiance" hex="#0083FB" rgb="0, 131, 251" style={{ marginRight: "12px" }} />
<ColorCard colorName="Bright Turqoise" hex="#00DDF1" rgb="0, 221, 241" style={{ marginRight: "12px" }} />
</div>
</div>
</div>

<div className="row-wrap" style={{ marginBottom: "24px" }}>
<div className="column">
<h3>Phase 3 - Competition</h3>

<div className="row-wrap">
<ColorCard colorName="Pomegranate" hex="#F12711" rgb="241, 39, 17" style={{ marginRight: "12px" }} />
<ColorCard colorName="Buttercup" hex="#F5AF19" rgb="245, 175, 25" style={{ marginRight: "12px" }} />
</div>
</div>

<div className="column">
<h3>Phase 4 - Playground</h3>

<div className="row-wrap">
<ColorCard colorName="Rose" hex="#EC006A" rgb="236, 0, 106" style={{ marginRight: "12px" }} />
<ColorCard colorName="Candlelight" hex="#FFCB15" rgb="255, 203, 21" style={{ marginRight: "12px" }} />
</div>
</div>
</div>

<h3>Phase 5 - Job Fair</h3>

<div className="row-wrap">
<ColorCard colorName="Lochinvar" hex="#279686" rgb="39, 150, 134" style={{ marginRight: "12px" }} />
<ColorCard colorName="Goldenrod" hex="#FDD262" rgb="253, 210, 98" style={{ marginRight: "12px" }} />
</div>

## Secondary Colors

###### Our secondary palette symbolizes the vibrant value of our brand. The colors signifies COMPFEST 12’s value of competence, creativitity, and confidence.

<div className="row-wrap">
<ColorCard colorName="Concrete" hex="#F3F3F3" rgb="243, 243, 243" style={{ marginRight: "12px" }} />
<ColorCard colorName="Candlelight" hex="#FFCB15" rgb="255, 203, 21" style={{ marginRight: "12px" }} />
<ColorCard colorName="Cod Gray" hex="#131313" rgb="19, 19, 19" style={{ marginRight: "12px" }} />
</div>

## Extended Colors

###### Our extended palette consists of tints and shades originated from the main and secondary colors in the palette. Below are some of the shade reference.

<div className="row-wrap" style={{ marginBottom: "24px" }}>
<SequenceColorCard style={{ flex: "1"}} colorName="Black" hexList={["#000009", "#131313", "#212121", "#2E2E2E"]} />
<SequenceColorCard style={{ flex: "1"}} colorName="Blue" hexList={["#0083FB", "#0EB1E0", "#00DDF1", "#44C3DB"]} />
</div>

<div className="row-wrap" style={{ marginBottom: "24px" }}>
<SequenceColorCard style={{ flex: "1"}} colorName="Red" hexList={["#CB0000", "#CB0058", "#EC006A", "#F2195F"]} />
<SequenceColorCard style={{ flex: "1"}} colorName="Purple" hexList={["#383089", "#992F8B", "#D619B7"]} />
</div>

<SequenceColorCard colorName="Yellow" hexList={["#EFB567", "#F5AF19", "#FFCB15", "#FDD262", "#FFB23E"]} />
<SequenceColorCard colorName="Orange" hexList={["#F12711", "#FE6616", "#EC544F", "#F66C3D", "#FF8849", "#EE965F","#FB9661"]} />
<SequenceColorCard colorName="Green" hexList={["#3E422D", "#97A561", "#279686", "#51AA9D", "#97A561"]} />

## Color Roles

###### Our color branding includes the art of vibrant gradients. We combine contrasting colors to create a vibrant gradient that brings our designs to life.

<div className="row-wrap" style={{ margin: "24px 0" }}>
<ColorRoles style={{ flex: "1"}} hex="#F3F3F3" description="Text color, tab color, icons, captions and links" />
<ColorRoles style={{ flex: "1"}} hex="#51AA9D" description="Successful state, gradient" />
</div>
<div className="row-wrap" style={{ marginBottom: "24px" }}>
<ColorRoles style={{ flex: "1"}} hex="#FDD262" description="Warning state, near complete state" />
<ColorRoles style={{ flex: "1"}} hex="#EB5757" description="Negative state, erros, fatal action warning" />
</div>
<ColorRoles hex="#000000" description="Main body color" />

## Primary Gradients

###### Our color branding includes the art of vibrant gradients. We combine contrasting colors to create a vibrant gradient that could bring our designs to life.

##### Usage: Only use primary gradients for assets, logo, and icons. Never use primary gradients for cards, buttons or text backgrounds!

<div className="row-wrap space-between" style={{ margin: "24px 0" }}>
<GradientCard title="Phase 1 - Recruitment" colorList={[{firstColor: "#EC006A", secondColor: "#992F8B"}, {firstColor: "#D418B6", secondColor: "#F1185E"}]} />

<GradientCard title="Phase 2 - Academy" colorList={[{firstColor: "#0083FB", secondColor: "#00DDF1"}]} />
<GradientCard title="Phase 3 - Competition" colorList={[{firstColor: "#F12711", secondColor: "#F5AF19"}]} />
</div>

<div className="row-wrap" style={{ margin: "24px 0" }}>
<GradientCard style={{ flex: "1"}} title="Phase 4 - Playground" colorList={[{firstColor: "#EC006A", secondColor: "#FFCB15"}]} />
<GradientCard style={{ flex: "1"}} title="Phase 5 - Job Fair" colorList={[{firstColor: "#279686", secondColor: "#FDD262"}]} />
</div>

## Secondary Gradients

###### We also use gradients of colors from the same color family to provide a subtler and less vibrant gradients.

##### Usage: Good for long text backgrounds, since too much vibrant and contrasting gradients are uncomfortable to read to.

<div className="row-wrap space-between" style={{ margin: "24px 0" }}>
<GradientCard title="Phase 1 - Recruitment" colorList={[{firstColor: "#EC006A", secondColor: "#F66C3D"}, {firstColor: "#383089", secondColor: "#992F8B"}]} />

<GradientCard title="Phase 2 - Academy" colorList={[{firstColor: "#0083FB", secondColor: "#44C3DB"}]} />
<GradientCard title="Phase 3 - Competition" colorList={[{firstColor: "#EC544F", secondColor: "#EE965F"}]} />

</div>
<GradientCard style={{ marginBottom: "24px" }} title="Phase 4 - Playground" colorList={[{firstColor: "#CB0000", secondColor: "#FFCB15"}, {firstColor: "#FF8849", secondColor: "#FFCB15"}, {firstColor: "#EC006A", secondColor: "#F66C3D"}]} />
<GradientCard style={{ marginBottom: "24px" }} title="Phase 5 - Job Fair" colorList={[{firstColor: "#FE6616", secondColor: "#FFB23E"}, {firstColor: "#279686", secondColor: "#97A561"}, {firstColor: "#FB9661", secondColor: "#FDD262"}, {firstColor: "#279686", secondColor: "#3E422D"}]} />
2 changes: 1 addition & 1 deletion docusaurus/docs/installation.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: installation
title: Installation
title: Getting Started/Installation
sidebar_label: Installation
---

Expand Down
78 changes: 78 additions & 0 deletions docusaurus/docs/logo.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
id: logo
title: Visual Language/The COMPFEST Logo
sidebar_label: The COMPFEST Logo
---

###### It’s the legendary COMPFEST logo that’s been around since 2014. This year, we retained the same logo, with the purpose of focusing on the brand more. Various color and pattern shall be used to fill the logo.

## The Original Logo
###### The original COMPFEST logo is the plain black or white logo. It has been used for the basic of logo derivations since 2014.

<h3 className="h3-subtitle">Dark Version</h3>
<img src="../static/img/logo/compfest-dark.png" alt="COMPFEST Logo Dark Version" />

<h3 className="h3-subtitle">Light Version</h3>
<img src="../static/img/logo/compfest-light.png" alt="COMPFEST Logo Light Version" />

## Logo Gradients
###### The logo has been a subject for various derivations. In accordance to this year’s theme, we aim to achive our values of vibrant, bold, and optimistic through the use of gradients on our logo.

<div className="row-wrap">
<div className="column">
<h3 className="h3-subtitle">Main Logo - Desktop</h3>
<img src="../static/img/logo/main-logo-desktop.png" alt="Main Logo Desktop Version" />
</div>

<div className="column">
<h3 className="h3-subtitle">Main Logo - Mobile</h3>
<img src="../static/img/logo/main-logo-mobile.png" alt="Main Logo Mobile Version" />
</div>
</div>

<div className="row-wrap">
<div className="column">
<h3 className="h3-subtitle">Academy Logo - Desktop</h3>
<img src="../static/img/logo/academy-logo-desktop.png" alt="Academy Logo Desktop Version" />
</div>

<div className="column">
<h3 className="h3-subtitle">Academy Logo - Mobile</h3>
<img src="../static/img/logo/academy-logo-mobile.png" alt="Academy Logo Mobile Version" />
</div>
</div>
<div className="row-wrap">
<div className="column">
<h3 className="h3-subtitle">Competition Logo - Desktop</h3>
<img src="../static/img/logo/competition-logo-desktop.png" alt="Competition Logo Desktop Version" />
</div>

<div className="column">
<h3 className="h3-subtitle">Main Logo - Mobile</h3>
<img src="../static/img/logo/competition-logo-mobile.png" alt="Competition Logo Mobile Version" />
</div>
</div>

<div className="row-wrap">
<div className="column">
<h3 className="h3-subtitle">Job Fair Logo - Desktop</h3>
<img src="../static/img/logo/jobfair-logo-desktop.png" alt="Job Fair Logo Desktop Version" />
</div>

<div className="column">
<h3 className="h3-subtitle">Job Fair Logo - Mobile</h3>
<img src="../static/img/logo/jobfair-logo-mobile.png" alt="Job Fair Logo Mobile Version" />
</div>
</div>

<div className="row-wrap">
<div className="column">
<h3 className="h3-subtitle">Playground Logo - Desktop</h3>
<img src="../static/img/logo/playground-logo-desktop.png" alt="Playground Logo Desktop Version" />
</div>

<div className="column">
<h3 className="h3-subtitle">Playground Logo - Mobile</h3>
<img src="../static/img/logo/playground-logo-mobile.png" alt="Playground Logo Mobile Version" />
</div>
</div>
13 changes: 13 additions & 0 deletions docusaurus/docs/mascot.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
---
id: mascot
title: Visual Language/Mascot
sidebar_label: Mascot
---

###### Mascots are the main branding asset that helped COMPFEST became a notable event for our target market. Every year, COMPFEST has different mascots in accordance to the annual respective theme.

### Our Mascot, Ev

###### Our mascot, EV (read: ee-vee) comes from the word ‘twElVe’. EV will join us at the long awaited journey to empower breakthrough towards the shifting digital culture.

<h3 className="h3-subtitle">Mascot Variations</h3>
15 changes: 8 additions & 7 deletions docusaurus/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
module.exports = {
title: "Jasper",
tagline: "Modern React Component Library from COMPFEST",
url: "https://jasper.compfest.id",
baseUrl: "/",
favicon: "img/favicon.ico",
organizationName: "COMPFEST",
projectName: "jasper",
title: 'Jasper',
tagline: 'Modern React Component Library from COMPFEST',
url: 'https://jasper.compfest.id',
baseUrl: '/',
favicon: 'img/favicon.ico',
organizationName: 'COMPFEST',
projectName: 'jasper',
plugins: ['font-loader'],
themeConfig: {
navbar: {
title: "Jasper",
Expand Down
55 changes: 55 additions & 0 deletions docusaurus/helper/ColorCard.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
import React from "react"
import styled from "styled-components"

const Container = styled.div`
border-radius: 10px;
width: 188px;
h3 {
color: #000000;
}
p {
color: #000000;
}
`

const Color = styled.div`
background: ${props => props.hex};
height: 150px;
border-radius: 10px 10px 0px 0px;
`

const Description = styled.div`
background: #f3f3f3;
border-radius: 0px 0px 10px 10px;
padding: 11px 14px 0 14px;
.title {
margin-bottom: 6px;
color: #747373;
}
`

const ColorCard = ({ colorName, hex, rgb, ...props }) => {
return (
<Container {...props} >
<Color hex={hex} />
<Description>
<h3>{colorName}</h3>
<div style={{ display: "flex", flexDirection: "row" }}>
<div style={{ flex: "1"}}>
<h6 className="title">Hex</h6>
<p>{hex}</p>
</div>
<div style={{ flex: "1"}}>
<h6 className="title">RGB</h6>
<p>{rgb}</p>
</div>
</div>
</Description>
</Container>
)
}

export default ColorCard
32 changes: 32 additions & 0 deletions docusaurus/helper/ColorRoles.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from "react"
import styled from "styled-components"
import SmallColorCard from "./SmallColorCard"

const RolesContainer = styled.div`
display: flex;
flex-direction: row;
.title {
margin-bottom: 6px;
color: #747373;
}
`

const Column = styled.div`
display: flex;
flex-direction: column;
margin-left: 16px;
`

const ColorRoles = ({ hex, description, ...props }) => {
return (
<RolesContainer {...props}>
<SmallColorCard hex={hex} />
<Column>
<h6 className="title">{hex}</h6>
<p>{description}</p>
</Column>
</RolesContainer>
)
}

export default ColorRoles
Loading

0 comments on commit 7e0c37b

Please sign in to comment.