Design

This is a document in development.

Colors

There are 16 colors, 4 grays, black and white that can be chosen from.

#ff0000

HEX: #ff0000
RGB: 255, 0, 0

#ff6600

HEX: #ff6600
RGB: 255, 102, 0

#eebb00

HEX: #eebb00
RGB: 238, 187, 0

#eeee00

HEX: #eeee00
RGB: 238, 238, 0

#bbee00

HEX: #bbee00
RGB: 187, 238, 0

#55bb00

HEX: #55bb00
RGB: 85, 187, 0

#00aa44

HEX: #00aa44
RGB: 0, 170, 68

#00aa88

HEX: #00aa88
RGB: 0, 170, 136

#00aabb

HEX: #00aabb
RGB: 0, 170, 187

#00aaee

HEX: #00aaee
RGB: 0, 170, 238

#0066cc

HEX: #0066cc
RGB: 0, 102, 204

#1133bb

HEX: #1133bb
RGB: 17, 51, 187

#331188

HEX: #331188
RGB: 51, 17, 136

#771177

HEX: #771177
RGB: 119, 17, 119

#aa0099

HEX: #aa0099
RGB: 170, 0, 153

#dd0077

HEX: #dd0077
RGB: 221, 0, 119

#ffffff

HEX: #ffffff
RGB: 255, 255, 255

#eeeeee

HEX: #eeeeee
RGB: 238, 238, 238

#cccccc

HEX: #cccccc
RGB: 204, 204, 204

#999999

HEX: #999999
RGB: 153, 153, 153

#666666

HEX: #666666
RGB: 102, 102, 102

#000000

HEX: #000000
RGB: 0, 0, 0

Typography online

Headers: Ubuntu
Body text: Open Sans

Both font are already embedded in Historiana. Use the following CSS rules to specify these families:

font-family: 'Open Sans', sans-serif; font-family: 'Ubuntu', sans-serif;

Ubuntu

Open Sans

https://fonts.google.com/specimen/Open+Sans

Icons

Icons that are needed for usage in a tool can be chosen from the Pro version from FontAwesome. Only the solid and regular options are permitted. Do not use the Light, Duotone or Brands option.

https://fontawesome.com/

Shape, design, placing etc. based on different functionality / actions

To be defined, please contact Webtic for consultation!

Round buttons vs square buttons
Usage of color (orange vs black vs grey etc.)
Size of buttons
Push buttons, shades.
Pop-up layer different functionality (layer with info, layer with other buttons/interactions)
Placing on the buttons on the canvas
Placing of the buttons on a source

Consistency: now buttons that leads to meat information and bigger size of the picture are represented by an ‘i’ or a magnifier. We will be using only an ‘i’ in this case. The magnifier will be used for zooming in on images and PDFs.

…..