SUNY Non-Credit LearningDesign system, working draft

Design system

Foundations

SUNY steady, set in Source Sans 3.

Color

Status and messages

Seats available Waitlist open Full Registration closed Coming soon Ask the campus

Information

7.0:1

Success

5.8:1

Warning

6.8:1

Error

6.4:1

Logo

SUNY's own website files. Use outside this draft needs SUNY's written approval.

Backgrounds

With the service name

Non-Credit Learning
Non-Credit Learning

Size and space

Keep a quarter of the logo's height clear on every side
72 px wide screens · 48 px phones · never smaller

Don't

Favicon

SUNY's 16 px favicon. A sharper square mark for phones and high-resolution screens has to come from SUNY.

Type

Display
32 / 44Find learning that fits
Heading 1
28 / 36Health Care Assistant
Heading 2
24 / 28Choose a section
Heading 3
20 / 22Who can join
Description
19Practice patient care skills such as vital signs and safe transfers.
Body
17Each class covers the same material.
Label
16 semiboldRegister with SUNY Adirondack
Small
14, minimumEach campus confirms final costs.

Languages

Iconography

Phosphor Icons. Outline for actions and facts; duotone for destinations.

Outline: actions and facts

Duotone: destinations

In use

Beside a link

Find courses near youGet help choosing

Icon buttons

1 to 4 of 12

In a button and a status

Seats available

Destination tile

On dark blue

EnglishSign in

Sizes: 16, 18, 22, 36

Space, shape and focus

Spacing, 4 px steps
Corners 4, 8, round
Flat, hover, floating
FocusOn dark
Focus outline
Tap sizes