Close

You have no items in your shopping basket.

Web Style Guide

This page outlines the web style guides for Dean & DeLuca

Brand Colors

  • #000@brand-primary
  • #557c56@brand-secondary, @brand-green
  • #92be81@brand-green-light
  • #06503c@brand-green-dark
  • #f6f6f6@brand-gray
  • #a7a9ac@brand-gray-light
  • .black
  • .green
  • .light-green
  • .dark-green
  • .gray
  • .light-gray

Typography

  • H1: Heading 1

    &:extend(h1) or .h1

  • H2: Heading 2

    &:extend(h2) or .h2

  • H3: Heading 3

    &:extend(h3) or .h3

  • H4: Heading 4

    &:extend(h4) or .h4

  • H5: Heading 5

    &:extend(h5) or .h5

  • H6: Heading 6

    &:extend(h6) or .h6

Body Text

Paragraph Text: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Unordered list item
  • Unordered list item
  • Unordered list item
    • Nested list item
    • Nested list item
    • Nested list item with an Anchor
  1. Ordered list item
  2. Ordered list item
    1. Nested list item
    2. Nested list item
    3. Nested list item with an Anchor
  3. Ordered list item
  4. Ordered list item last

Icons

  • .icon-angle-light-up

  • .icon-angle-light-down

  • .icon-angle-light-left

  • .icon-angle-light-right

  • .icon-cart

  • .icon-close

  • .icon-avatar

  • .icon-play

  • .icon-search

  • .icon-instagram

  • .icon-facebook

  • .icon-twitter

  • .icon-pinterest-p

  • .icon-email

  • .icon-arrow-right

Messages

    • Notice: Please enable cookies in your web browser to continue.
    • Error Message.
    • Error Message x2.
    • Error Message x3.
    • Success message.

Forms

  • This is a required field.
  • This is a required field.

Side By Side fields

Address Form

Buttons

X-Small
Large X-Small

Modal

Tables

Name Description Price
Abc Product This is a sample description of the Abc Product. Enjoy! $9.99
Another Product This is a sample description of the Abc Product. Enjoy! $12.99
Another Product #3 This is a sample description of the Abc Product. Enjoy! $12.99