Skip to content

Sinopia Design Document

Jump to bottom
Astrid Usong edited this page Sep 16, 2020 · 17 revisions

Copied from this document

Text styles

  • Heading 1: Black, Source Sans Pro, 24
  • Heading 2: Black, Source Sans Pro, 18 Bold
  • Heading 3: Black, Source Sans Pro, 18
  • Body text: Black, Source Sans Pro, 14
  • Link text: 00548F, Source Sans Pro, 14
  • Font awesome: If a link, use 00548F, size 14, otherwise, black or red if error icon.
  • Dropdown text default selection: 3A3A3A, Source Sans Pro Light, 14 Italic

Error styles

Red: B1020F

Field-level errors

  • Text field is highlighted red.
  • Error message in red appears below field with an exclamation mark next to it.
  • If user is on a part of the page where the error is not in view, it would be nice to scroll user to the first error on the page so they can go down the page and fix errors.

Page-level errors

TBD

Left panel navigation colors

Highlight of section user has selected to view in right panel. It would be nice if the color of the tabs at the top of the screen corresponded with the colors below (e.g. selected resource template tabs would be orange, selected record tabs would be the light brown color):

  • If resource template: Heading 2 in white; bgcolor = B26F16
  • Otherwise: Heading 2 in black; bgcolor=D0C1A8

First subsection uses body text but is bold. Subsequent subsections are in regular body text.

Right panel colors

Section header

  • If resource template: Heading 2 in white; bgcolor = B26F16
  • Otherwise: Heading 2 in black; bgcolor=D0C1A8

First subsection

  • Heading 3
  • bgcolor=F7F4F1

Second subsection

  • Body text bold
  • Border color = 928B81

Third subsection

  • Body text
  • bgcolor=F7F4F1

Fourth subsection

  • Body text
  • Border color = 928B81

Multiple values in a text field

  1. Lookup allows single input
  • Box is grayed out once one value is entered to indicate user may only enter one value into this field.
  • Gray bgcolor = F3F3F3, Gray border color = C9C9C9
  • Beige bgcolor of value = D7CEC4
  • If user wants to edit input, they click on the input and can edit it.
  • If user wants to delete input, they click on the trash icon fa-trash-o []
  • If user wants to change the language, they click on the language icon fa-language []
  • User clicks on the magnifying glass to open modal fa-search []
  1. Lookup allows multiple inputs: Box remains editable even if user enters multiple inputs.
  2. Literal allows single input: same as 1 above, except no magnifying glass, instead show diacritic which links to diacritic panel
  3. Literal allows multiple inputs
  4. Literal with extra long input: If input wraps, begin on new line. Place trash and language icons on last line, aligned right.
  • Language icon=fa-language [] (use this icon. I couldn't find the globe shown below as a font awesome icon)

Clone this wiki locally