PsycInfo Branding Guidelines - Web Components

Colors

Visit the IUX Team's Pattern Library Colors page to see the APA Branding Colors, along with 6 APA Publishing-specific colors at the bottom of the page.

Buttons

Button Colors & Styles

Red Squared - .btn-pubs-1

Blue Squared - .btn-pubs-2

Purple Squared - .btn-pubs-3

Purple Squared - Outline Style - .btn-pubs-7 - Made for full-text no/maybe states

Blue Squared - Outline Style - .btn-pubs-8 - Made for button group and form submit buttons on modals

Red Outline Rounded - .btn-pubs-4

Blue Outline Rounded - .btn-pubs-5

Purple Outline Rounded - .btn-pubs-6

Outline Button - Dismiss (used for dismissive buttons in modals; has border-radius: 0; override class for IUX PL) - class="btn btn-outline--dismiss btn-apapub-squared-override"

Outline Button (from the IUX Pattern Library stylesheet; used for "special" buttons, such as the Mapper Legend buttons) - class="btn btn-outline"

Text Button (from the IUX Pattern Library stylesheet; used for "special" buttons, such as the Mapper Legend buttons) - class="btn btn-textbutton"

Button Sizes & Types

Button Tag Buttons (full width at <767px)

Large (.btn-lg)
Medium (.btn-md)
Small (.btn-sm)
X-Small (.btn-xs) - Note: Not part of BS4, modified code taken from BS3

Button with Icon on Right

Button with Icon on Left

Anchor Tag Button (display:flex; default; external link icon put on with CSS)

Button Text

Anchor Tag Button (display:inline; inline override; display:block at <767px; external link icon put on with CSS)

Button Text class="graybackground">PsycInfo Button Styles - Full-width vs. Display Inline

Full Text From Publisher

Anchor Button - Full-Width (external link icon put on with CSS)
Full Text From Publisher
Anchor Button - Inline (display:inline; inline override; display:block at <767px; external link icon put on with CSS)
Full Text From Publisher

PDF

Anchor Button - Full-Width
PDF
Anchor Button - Inline
PDF

PI Entitlement Status Button Styles - GetFTR usability guidelines
Legend:
  • Solid color buttons indicate full access.
  • Outline style buttons indicate alternative version, "maybe" status, "no state" and non-GetFTR publishers.

1. GetFTR = Yes; Access type = Paid; Full entitlement to VOR

2. GetFTR = Yes; User not authenticated; Full entitlement to VOR

3. GetFTR = No; Alternative version = True - Alternative version provided by the publisher

4. GetFTR = No; Alternative version = False; "No state" - No alternative version provided by the publisher

5. GetFTR = Maybe; Access unknown until user authenticates

6. GetFTR = Yes; Access type = Open

7. GetFTR = Yes; Access type = Free|permFree

8. GetFTR = Updates

9. GetFTR = Retraction

10. APA PsycNet = Yes
PDF
11. APA PsycNet = Open Access
PDF
12. APA PsycNet = Free to read
PDF
Free to read

13. APA PsycNet: CHORUS AM

14. APA PsycNet: CHORUS AM available after embargo

15. Records without a DOI = Title link to PI record - No FT link
PsycInfo Record - Non-APA Publisher: Accounts for About 90% of All Records
16. Preprint

17. Conference

18. Google Scholar (used on the Record Display screen (top CTA and References citations), Explore All Notifications cards, and Related Content Cards)

Popovers

Images

class="graybackground">Open Access Icon - SVG (current default sizing on psycinfo.apa.org)

Open Access Icon - SVG (2x current default size)

Orchid ID - SVG (default: 100px x 100px)

Orchid ID - SVG (smaller resize for psycinfo.apa.org: 20px x 20px)

PubMed - SVG (possibly to be used for Related Content cards: 128px x 360px)

TrendMD - Color Logo - SVG (possibly to be used for Related Content cards)

TrendMD - White Logo on Purple Background - SVG (possibly to be used for Related Content cards)

GetFTR Icons - usability guidelines

SVG - Alternative Version - Green Indicator - 16x16.svg
Indicator/Option1/BAV/16x16 Created with Sketch.
SVG - Alternative Version - Green Indicator - 24x24.svg
Indicator/Option1/BAV/24X24 Created with Sketch.
SVG - Alternative Version - Green Indicator - 36x36.svg
Indicator/Option1/BAV/36x36 Created with Sketch.
SVG - Alternative Version - White Indicator - 16x16.svg
Indicator/Option1/BAV/16x16-White Created with Sketch.
SVG - Alternative Version - White Indicator - 24x24.svg
Indicator/Option1/BAV/24x24-White Created with Sketch.
SVG - Alternative Version - White Indicator - 36x36.svg
Indicator/Option1/BAV/36x36-White Copy Created with Sketch.
SVG - Full-Text Version - Green Indicator - 16x16.svg
Indicator/Option1/FTR/16x16 Created with Sketch.
SVG - Full-Text Version - Green Indicator - 24x24.svg
Indicator/Option1/FTR/24x24 Created with Sketch.
SVG - Full-Text Version - Green Indicator - 36x36.svg
Indicator/Option1/FTR/36X36 Created with Sketch.
SVG - Full-Text Version - White Indicator - 16x16.svg
Indicator/Option1/FTR/16x16-White Created with Sketch.
SVG - Full-Text Version - White Indicator - 24x24.svg
Indicator/Option1/FTR/24x24-White Created with Sketch.
SVG - Full-Text Version - White Indicator - 36x36.svg
Indicator/Option1/FTR/36x36-White Created with Sketch.

Misc

Tri-Band