Skip to main content

Colour

Brand colour #FF6D1F
Brand colour (alt) #47B806
Action colour #F7BE30
Action colour (alt) #C39158
Base colours (light) #EDEDED #F2F2F2 #F1F1F1
Base colours (medium) #B31A9C #B31A9C #B31A9C #C7C7C7
Base colours (dark) #4d4d4d #262626 #0e0e0e

Text colours

Text colour #242424
Text colour (inverted) #F2F2F2
Link colour #242424
Link decoration colour #F7BE30

Messaging colours

Positive colour #15892a
Negative colour #7a0c17

Back to top

Typography

Signature typeface

Early Sans

Early Sans is an old design yet its not a revival. While an 1894 metal type specimen inspired and educated the design, Early Sans adapted the general softness and feeling but proportions, forms and specific shapes were aligned to be fitting for a modern sans.

Back to top

Typographic scale

A a
xsmall
A a
small
A a
step-0
A a
step-1
A a
step-2
A a
step-3
A a
step-4
A a
step-5
A a
step-6

Back to top

Headings

Dolores omnis ullam nisi tempore pariatur ut rerum

Aspernatur aliquam molestiae voluptatum eos voluptatum quis mollitia culpa provident aliquid soluta nostrum. Sequi at odit incidunt qui fuga veritatis autem non vitae error voluptas. Quos quisquam et tempore molestiae est.

Heading 1

Dolores omnis ullam nisi tempore pariatur ut rerum ut aut aspernatur sunt aut qui culpa aut

Aspernatur aliquam molestiae voluptatum eos voluptatum quis mollitia culpa provident aliquid soluta nostrum. Sequi at odit incidunt qui fuga veritatis autem non vitae error voluptas. Quos quisquam et tempore molestiae est.

Heading 2

Dolores omnis ullam nisi tempore pariatur ut rerum ut aut aspernatur sunt aut qui culpa aut

Aspernatur aliquam molestiae voluptatum eos voluptatum quis mollitia culpa provident aliquid soluta nostrum. Sequi at odit incidunt qui fuga veritatis autem non vitae error voluptas. Quos quisquam et tempore molestiae est.

Heading 3

Dolores omnis ullam nisi tempore pariatur ut rerum ut aut aspernatur sunt aut qui culpa aut

Aspernatur aliquam molestiae voluptatum eos voluptatum quis mollitia culpa provident aliquid soluta nostrum. Sequi at odit incidunt qui fuga veritatis autem non vitae error voluptas. Quos quisquam et tempore molestiae est.

Heading 4
Dolores omnis ullam nisi tempore pariatur ut rerum ut aut aspernatur sunt aut qui culpa aut, ea ipsum quaerat sed dicta dolor voluptas voluptatem

Aspernatur aliquam molestiae voluptatum eos voluptatum quis mollitia culpa provident aliquid soluta nostrum. Sequi at odit incidunt qui fuga veritatis autem non vitae error voluptas. Quos quisquam et tempore molestiae est.

Heading 5
Dolores omnis ullam nisi tempore pariatur ut rerum ut aut aspernatur sunt aut qui culpa aut, ea ipsum quaerat sed dicta dolor voluptas voluptatem

Aspernatur aliquam molestiae voluptatum eos voluptatum quis mollitia culpa provident aliquid soluta nostrum. Sequi at odit incidunt qui fuga veritatis autem non vitae error voluptas. Quos quisquam et tempore molestiae est.

Heading 6

14 Day Beekeeper

Black Mountain NUCs

Black Mountain Queens

Black Mountain Honey

Back to top

Paragraphs

Aspernatur aliquam molestiae voluptatum eos voluptatum quis mollitia culpa provident aliquid soluta nostrum. Sequi at odit incidunt qui fuga veritatis autem non vitae error voluptas. Quos quisquam et tempore molestiae est.

Lead paragraph

Aspernatur aliquam molestiae voluptatum eos voluptatum quis mollitia culpa provident aliquid soluta nostrum. Sequi at odit incidunt qui fuga veritatis autem non vitae error voluptas. Quos quisquam et tempore molestiae est.

Standard paragraph

Aspernatur aliquam molestiae voluptatum eos voluptatum quis mollitia culpa provident aliquid soluta nostrum. Sequi at odit incidunt qui fuga veritatis autem non vitae error voluptas. Quos quisquam et tempore molestiae est.

Small paragraph

This is a paragraph with an inline link text, some of which is of strong importance, emphasis, stylistic offset, an alternate voice, deleted text, inserted text, highlighted text, Subscripts and superscripts: H 2O, E = mc 2, and small print.

Text-level semantics

Back to top

Quotations and citations

Beekeeping doesn't have to be complicated or take years to master. You just need a proven system, practical knowledge from experts, and access to a supportive community. That’s exactly what you’ll get with 14 Day Beekeeper.

Standard blockquote

Beekeeping doesn't have to be complicated or take years to master. You just need a proven system, practical knowledge from experts, and access to a supportive community. That's exactly what you'll get with 14 Day Beekeeper.

Testimonial quotation

Laurence Edwards said, Beekeeping doesn’t have to be complicated or take years to master.

Inline quote

Back to top

Lists

Unordered list

  • Orange
  • Apple
  • Rhubarb
  • Rasberry
  • Unordered list item with a lot of text inside of it. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Blueberry
  • Cherry

Ordered list

  1. First
  2. Second
  3. Third
  4. Fourth Ordered list item with a lot of text inside of it. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.
  5. Fifth
  6. Sixth

Definition list

Maine
Augusta
California
Sacremento
Oregon
Salem
New York
Albany

Definition list 2

Ascender
The part of certain lowercase letters that extends above the x-height of a font.
Font
Traditionally, a complete set of characters for one typeface at one particular type size. Often used more loosely as a synonym for "typeface".
Golden Section
The ideal proportion according to the ancient Greeks. It is visualized as the division of a line into two unequal segments in such a way that the ratio of the smaller segment to the larger segment is equal to the ratio of the larger to the whole. It is usually defined as 21:34, that is, 21/34 and 34/(21+34) both equal approximately 0.618. A rectangle whose sides are of this proportion is called a "golden rectangle". Golden rectangles can be found in the proportions of the Parthenon and many medieval manuscripts.

Back to top

Numerals and symbols

£149

1 2 3 4 5 6 7 8 9 0

Heading numbers
£149

1 2 3 4 5 6 7 8 9 0

Body numbers

Back to top

Forms

Date of birth DD MM YYYY
Do you agree to the T&Cs?
Which do you like?

Back to top

Buttons

We use button shapes to distinguish a variety of calls to actions and we’ve designed these shapes to be easily recognisable and visually appealing.

Where possible use only one primary action button per content region or on one page. Don’t choose a different colour without considering the reason why that button has been included.

Standard

Secondary actions

Tertiary links

Positive and negative

 

Button sizes

Use standard size button shapes for the majority of calls-to-action to reserve smaller and larger sizes for specific purposes. Use large buttons for a single important action and small buttons in confined spaces, for example inside tables. Use block buttons to fill 100% of the width of their parent container.

Small

Standard

Large

Full (Block)

Back to top

Tables

Standard

This is a caption for a table
Movie Title Genre Year Gross
Footer content 1 Footer content 2 Footer content 3 Footer content 4
Star Wars Adventure, Sci-fi 1977 $460,935,665
Howard The Duck "Comedy" 1986 $16,295,774
American Graffiti Comedy, Drama 1973 $115,000,000

Back to top

Media

Figure with caption below

Back to top

Tiles

This is a tile with some text content inside

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. An example link. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

This is a raised tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

This is a bordered and rounded tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

This is a light tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

This is a dark tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

This is a subtle tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

This is a CTA tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

This is a loud tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

Alert success tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

Alert info tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

Alert warning tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

Alert danger tile

Sed posuere consectetur est at lobortis. Nulla vitae elit libero, a pharetra augue. Nullam quis risus eget urna mollis ornare vel eu leo. An example link. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Donec ullamcorper nulla non metus auctor fringilla. Etiam porta sem malesuada magna mollis euismod.

Back to top

Blocks

A block with some text content inside

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.

A block with half top and bottom padding

Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras mattis consectetur purus sit amet fermentum.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue.

Back to top