UI Elements - The Hub

Description

Color Scheme:

  • c1: #697585

  • c2: #ced6e3

  • c3: #f3f3f3

  • c4: #4f5762

  • c5: #1f2227

  • c6: #71757e

  • ac1: #0a78d1

  • ac-warning: #ffcc33

  • ac-success: #00aa54

  • ac-error: #c64750

Font

Font sizes

  • big-title: 1.458em (35px)

  • small-title: 1.250em (30px)

  • list-title: 1.042em (25px)

  • big-body: 0.917em (22px)

  • small-body: 0.833em (20px)

Font colors

  • dark-text: c5

  • light-text: c6

Warnings, Success and Error Messages

UI Elements

Use button (cta-colored-button)

  • font size: small-body

  • background color: ac1

  • padding top and bottom: 0.708em

  • padding left and right: 1.375em

  • font-color: white

  • (use,get buttons.jpg)

Get button (cta-outlined-button)

  • font size: small-body

  • background color: none

  • border-color: ac1

  • border: 0.083em (2px)

  • padding top and bottom: 0.708em

  • padding left and right: 1.375em

  • icon: e906 (rotate 90° counterclockwise)

  • font-color: ac1

  • (use,get buttons.jpg)

Content Demo (gray-button)

  • font size: small-body

  • background color: c2

  • padding top and bottom: 0.708em

  • padding left and right: 1.375em

  • font-color: c5

Radio

  • color: c6

  • icon: e90e

  • icon-selected: e90d

  • (radio-check.jpg)

Check

  • color: c6

  • icon: e90c

  • icon-selected: e90a

  • (radio-check.jpg)

Icon pack

  • the-hub-icons.zip

Acceptance Criteria

Should provide color and fonts sylteguide for the Hub

Assignee

Unassigned

Reporter

Jelena Milinovic

Labels

Funding

None

Code reviewer

None

Released

None

Priority

Medium
Configure