Skip to content

Sinopia Design Document

Jump to bottom
Astrid Usong edited this page Sep 21, 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
  • border color of line between text and icons: 979797
  • font size = body text bold
  • 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 []
  • 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
  • If user wants to change the language, they click on the language icon fa-language []
  1. Literal allows multiple inputs
  2. 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 []

Lookup Modal

When user clicks the magnifying glass icon in a lookup field, this modal will open.

  • Text field at top where user can search
  • Results are displayed by authority
  • Authorities are listed as tabs. When user clicks tab, they see the results that are returned with that authority.
  • Results display in a list with the search result bolded and other content below it in plain text.
  • Images appear to the left of the search result if available.
  • User can click on any of the items listed, and it will be populated in the field on the previous page.
  • If user can't find items, they can click the 'x' in the upper right corner to close the modal.
  • Dark beige for header bgcolor = D0C1A8
  • Light beige for modal bgcolor = F0EAE4

Clone this wiki locally