Activity Builder

Design

This is a document in development. In the future

Colors

There are 16 colors, 4 grays, black and white that can be cosen 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

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.

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

To be defined, please contact Webtic for consultation!

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.

…..