Styleguide - TeselaGen/openVectorEditor GitHub Wiki

Teselagen Color Palette

Design

The TeselaGen app's look and feel embraces minimalism. Make the application seem clean, uncluttered, and simple. Design to reflect the seamless integration of multiple modules as one single application. Highlight key actions distinctly. Maintain consistency of design elements. Create user stories and develop an experience to enable a user to effectively navigate through that story.

We use blueprintjs.com/docs/#core as our main Component library. It is likely the component you are looking for already exists there :) The style of blueprintjs fits well with our core look and feel - clean and uncluttered.

Colors

Teselagen's primary palette emphasizes our brand.

Teselagen's secondary palette draws attention away from main interaction elements but allows for contrasts for neutral elements across the interface.

Teselagen's status palette is useful for referencing specific user interface reactions.

css rules

/* background colors*/
.darkRoyalBlue {
  background-color: #003F66 !important;
}

.eveningBlue {
  background-color: #004A75 !important;
}

.primaryBlue {
  background-color: #006CAB !important;
}

.utahSky {
  background-color: #1585C5 !important;
}

.admiralBlue {
  background-color: #003E53 !important;
}

.twilightBlue {
  background-color: #005E75 !important;
}

.trueBlue {
  background-color: #339BB9 !important;
}

.honoluluBlue {
  background-color: #5BC0DE !important;
}

.coal {
  background-color: #333234 !important;
}

.lavaStone {
  background-color: #4A4B4C !important;
}

.cathedralGray {
  background-color: #949496 !important;
}

.gray {
  background-color: #E0E3E6 !important;
}

.orchidGray {
  background-color: #8898A8 !important;
}

.lavendarIce {
  background-color: #92A4B6 !important;
}

.cinderBlock {
  background-color: #E9E9E9 !important;
}

.nimbusCloud {
  background-color: #F8F8F8 !important;
}

.warmChinchilla {
  background-color: #ECF0F1 !important;
}

.gullGray {
  background-color: #F7F9FA !important;
}

.white {
  background-color: #FEFEFE !important;
}

.sapphire {
  background-color: #1585C5 !important;
}

.blue {
  background-color: #00B7FF !important;
}

.emerald {
  background-color: #2ECC71 !important;
}

.green {
  background-color: #77FF73 !important;
}

.ruby {
  background-color: #E10000 !important;
}

.red {
  background-color: #F54242 !important;
}

.topaz {
  background-color: #FFC737 !important;
}

.yellow {
  background-color: #FFD56E !important;
}

.noBackground {
  background: none;
}

/* font colors */
.darkRoyalBlueFont {
  color: #003F66 !important;
}

.eveningBlueFont {
  color: #004A75 !important;
}

.primaryBlueFont {
  color: #006CAB !important;
}

.utahSkyFont {
  color: #1585C5 !important;
}

.admiralBlueFont {
  color: #003E53 !important;
}

.twilightBlueFont {
  color: #005E75 !important;
}

.trueBlueFont {
  color: #339BB9 !important;
}

.honoluluBlueFont {
  color: #5BC0DE !important;
}

.coalFont {
  color: #333234 !important;
}

.lavaStoneFont {
  color: #4A4B4C !important;
}

.cathedralGrayFont {
  color: #949496 !important;
}

.grayFont {
  color: #E0E3E6 !important;
}

.orchidGrayFont {
  color: #8898A8 !important;
}

.lavendarIceFont {
  color: #92A4B6 !important;
}

.cinderBlockFont {
  color: #E9E9E9 !important;
}

.nimbusCloudFont {
  color: #F8F8F8 !important;
}

.warmChinchillaFont {
  color: #ECF0F1 !important;
}

.gullGrayFont {
  color: #F7F9FA !important;
}

.whiteFont {
  color: #FEFEFE !important;
}

.sapphireFont {
  color: #1585C5 !important;
}

.blueFont {
  color: #00B7FF !important;
}

.emeraldFont {
  color: #2ECC71 !important;
}

.greenFont {
  color: #77FF73 !important;
}

.rubyFont {
  color: #E10000 !important;
}

.redFont {
  color: #F54242 !important;
}

.topazFont {
  color: #FFC737 !important;
}

.yellowFont {
  color: #FFD56E !important;
}

.font12 {
  font-size: 12px;
}

.font14 {
  font-size: 14px;
}