Design reference

This is a collection of bootstrap elements (styled) as well as any common reused custom elements.

We use a system font, so the font family depends on the device you are using.

@goskills-yellow	#ffd723
@goskills-panel-yellow	#faf2d4
@goskills-pink	#ef5350
@goskills-charcoal-background	#36373c
@goskills-charcoal	#1d1e20
@goskills-dark-grey	#4d4f56
@goskills-grey	#767677
@goskills-grey-second	#89949b
@goskills-light-grey	#d0d9df
@goskills-off-white	#f9f9f9
@goskills-off-white-hover	#f1f4f6
@goskills-feature-bg	#54606c
@goskills-design-green	#50e3c2
@goskills-office-orange	#ff8a4e
@goskills-dev-red	#ff2d55
@goskills-lean-blue	#4088fc
@brand-info	#0075cd
@brand-success	#1fb08a
@brand-danger	#e00001

Old icons

Note also the newer style yellow and grey svg icons, e.g. on a course about page and the Business page.

New icons

New inline SVG style.

actual-off	actual-on	add
align	apple-filled	area-graph-filled
area-graph	arrow-down	arrow-left
arrow-right	arrow-up	article-filled
article	bar-graph-filled	bar-graph
bell-filled	bell	bin-filled
bin	book-filled	book
bookmark-filled	bookmark	brightness-high
brightness-low	burger	calendar-check-filled
calendar-check	calendar-filled	calendar-minus-filled
calendar-minus	calendar-plus-filled	calendar-plus
calendar	camera-filled	camera
cancel	cap-filled	cart-filled
certificate	chat-filled	chat
check-filled	check	checkmark-cirle
circle-filled	circle	classroom
clock-filled	clock	cog-filled
cog	comment	copy
course-report	credit-card-filled	credit-card
cross	dashboard	database-filled
database	desktop-filled	desktop
dots-horizontal	dots-vertical	download
eject	envelope-filled	envelope
exclamation-circled	exclamation-filled	eye-closed
eye-filled	eye	facebook
fast-forward-filled	fast-forward	file
filter	fire-filled	fire
flag	focus	folded-aeroplane-filled
folded-aeroplane	folder-filled	folder-open
form	frown-circled	frown-filled
game-filled	game	gift-filled
gift	googleplus	gradient
grid-filled	half-star-filled	hat
heart-filled	heart	history
home-filled	home	info-circled
info-filled	instagram	learner-report
library-assignements	library-recommended	library
light-bulb	line-curve	line-graph-filled
line-graph	link	linkedin
list-filled	location-filled	location
lock-closed-filled	lock-closed	lock-open-filled
lock-open	meh-circled	meh-filled
microphone-filled	microphone	minus
mobile	move	multilesson
nav-bottom-filled	nav-right-filled	original-price
overview	paintbrush	paper-clip
pause	pencil-filled	pencil
phone-filled	phone	picture
pie-chart	pie-graph-filled	pie-graph
play-filled	play	pocket-filled
printer-filled	printer	question-circled
question-filled	question	repeat
resize-large	resize-small	rewind-filled
rewind	save	search
server-filled	server	share-filled
share	shopping-cart	smile-circled
smile-filled	sort	speaker-filled
speaker-loud-filled	speaker-loud	speaker-mute
speaker-on-filled	speaker-on	speaker
speech-filled	speech	star-filled
star	tablet-filled	tablet
tag-discount	tag-filled	tag-price-filled
tag-price	tag	teams-report
test	trophy-filled	trophy
tutor	tv-filled	tv
twitter	upload	user-filled
user-manage	user-minus-filled	user-minus
user-plus-filled	user-plus	user
users-filled	users	webinar
whatsapp-filled	whatsapp	windows
x	youtube

Buttons

Default Primary Success Info Danger Link

Default Primary

Default Primary Success Info Danger Link

Extra large button Large button Default button

Small button Mini button

Block level button

Button Button Button Button

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

This is the lead paragraph style.

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

This line of text is meant to be treated as fine print.

The following snippet of text is rendered as bold.

Fusce dapibus, tellus ac cursus commodo.

Nullam id dolor id nibh ultricies vehicula ut id elit.

Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

Maecenas sed diam eget risus varius blandit sit amet non magna.