Building pattern library...

CM&S DESIGN SYSTEM Design System

Design Elements

Colour: Brand

#2e008b
#ec008c
#00b6ed
#666666
#C8C9C7
#E3E3E3

Colour: Grayscale

#fafafa
#f2f2f2
#e3e3e3
#d8d8d8
#c7c7c7
#b2b2b2
#999999
#8c8c8c
#7f7f7f
#727272
#666666
#4c4c4c
#333333
#191919
#000000
#ffffff

Colour: Extended

#f7fcff
#e6e4df
#ffe0ec
#ef5350
#ebf9ff
#6c5c99
#bfe8f6
#007eff
#fdc02f
#8bc34a

Heading

  • Add your component markup to /components/designElements/fonts_heading/markup.html

Base fonts

  • Add your component markup to /components/designElements/fonts_base/markup.html

Typography

  • Add your component markup to /components/designElements/typography/markup.html

Paragraph

  • Add your component markup to /components/designElements/paragraph/markup.html

Body text

  • Add your component markup to /components/designElements/body_text/markup.html

Text link

  • Add your component markup to /components/designElements/text_link/markup.html

Page width

  • Add your component markup to /components/designElements/page-width/markup.html

Breakpoint

  • Add your component markup to /components/designElements/breakpoint/markup.html

Spacing

  • Add your component markup to /components/designElements/spacing/markup.html

CSS Grid

  • Add your component markup to /components/designElements/grid/markup.html

Divider

  • Add your component markup to /components/designElements/divider/markup.html

UI Components

Save time with reusable, accessible components for forms, navigation, panels, tables and more.

Call to action

  • Add your component markup to /components/uiComponents/cta/markup.html

List

  • Add your component markup to /components/uiComponents/list/markup.html

Search

  • Add your component markup to /components/uiComponents/search/markup.html

Collapsible

  • Add your component markup to /components/uiComponents/collapsible/markup.html

Navigation Block

  • Add your component markup to /components/uiComponents/navigation_block/markup.html

Related Links

  • Add your component markup to /components/uiComponents/related.links/markup.html

Header

  • Add your component markup to /components/uiComponents/header/markup.html

Mega Menu

  • Add your component markup to /components/uiComponents/menu/markup.html

Breadcrumb

  • Add your component markup to /components/uiComponents/breadcrumb/markup.html

Footer

  • Add your component markup to /components/uiComponents/footer/markup.html

Video

  • Add your component markup to /components/uiComponents/video/markup.html

© 2019 - 2025 Cancer Research UK Currently v1.0.0.