Skip to content
Delta

Style guide

The colours, type, shapes and pictures of Delta in one place.

Brand

Delta
On a light page
Delta
On a dark page

Restaurant & Food - Warm, appetising and relaxed: earthy colours, food and drink in every picture.

Palette Bright Blue 2 · Minimal Luxury style · pictures: Isometric blocks with restaurant & food subjects · fonts DM Serif Display and Josefin Sans

Colours

Every colour is a token in assets/css/theme.css (--wt-primary ...). The contrast of the text colours is shown against the page; WCAG AA needs 4.5:1 for text.

Light mode

Primary
#142af5
text on it 7.8:1
Secondary
#8e2efa
 
Accent
#99ed1d
text on it 12.2:1
Page
#f7f8ff
 
Surface
#ffffff
 
Surface 2
#eff1ff
 
Text
#1e2430
14.7:1 on the page
Muted text
#4f5867
6.8:1 on the page
Border
#d8dcec
 
Links and brand text
#142af5
7.4:1 on the page

Dark mode

Primary
#142af5
text on it 7.8:1
Secondary
#8e2efa
 
Accent
#99ed1d
text on it 12.2:1
Page
#020419
 
Surface
#04082c
 
Surface 2
#111437
 
Text
#e5e9f0
16.7:1 on the page
Muted text
#9aa4b5
8.1:1 on the page
Border
#272b4a
 
Links and brand text
#a2abfc
9.4:1 on the page

Type

DM Serif Display

Headings

Josefin Sans

Text, buttons and forms (Google Fonts)

Come hungry, leave happy

Why our food tastes different

Our favourite tips for busy weeks

Cooking classes for twelve, where our chefs teach three dishes and you sit down to eat everything you made.

We listen first, then build a plan around what you actually need. Order for pickup or delivery and enjoy the same dishes at home. Our team has done this many times, so you never have to guess. Every detail is handled by people who care about getting it right.

Book a table online in seconds, or call us for groups of eight or more.

Corners and depth

Corners
0.125rem
Large corners
0.25rem
Pills
50rem
Shadow --wt-shadow
Large shadow --wt-shadow-lg

Components

NewPaidPendingOverdue12
Start in minutes and get help from a real person whenever you need it.

Pictures

Isometric blocks in the template colours, with restaurant & food subjects. Every product picture shows its product. Replace them with your own photos of the same size (see PHOTOS.md for the photos of the live demo).

Restaurant & Food picture 1
Restaurant & Food picture 2
Restaurant & Food picture 3
Truffle pasta
Truffle pasta
Grilled salmon
Grilled salmon
Garden salad
Garden salad
Wood-fired pizza
Wood-fired pizza

Design files

  • design-tokens/tokens.json - every token in the W3C Design Tokens format: in Figma, install the Tokens Studio plugin and load the file; Style Dictionary turns it into code for other platforms.
  • design-tokens/style-guide.svg - this page as a board: drag it into Figma, Sketch or Illustrator and every swatch, text and shape stays editable.
  • design-tokens/tokens.css - the same values as CSS variables for other projects in the brand.