• Menu
  • Wilka Zelders

    Style Guide

    This page outlines the current styles and standards for the Wilka Zelders website.

    Colors

    An overview of this site's brand colors.

    Action

    Action

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Primary

    Primary

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Secondary

    Secondary

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Accent

    Accent

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Base

    Base

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Comp

    Shade

    Shade

    Ultra Light

    Light

    Medium

    Dark

    Ultra Dark

    Action

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Primary

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Secondary

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Accent

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Base

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Shade

    Trans 10

    Trans 20

    Trans 40

    Trans 60

    Trans 80

    Trans 90

    Success

    Success

    Success Light

    Success Dark

    Success Hover

    Danger

    Danger

    Danger Light

    Danger Dark

    Danger Hover

    Warning

    Warning

    Warning Light

    Warning Dark

    Warning Hover

    info

    Info

    Info Light

    Info Dark

    Info Hover

    Buttons

    Solid and outline buttons are available across all color sets including black and white.

    BUTTONS ON LIGHT BACKGROUND

    ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineBaseBase Outline

    BUTTONS ON DARK BACKGROUND

    ActionAction OutlinePrimaryPrimary OutlineSecondarySecondary OutlineAccentAccent OutlineWhiteWhite Outline
    Button scale
    Button XS
    btn--primary / btn--xs
    Button S
    btn--primary / btn--s
    Button M
    btn--primary / btn--m
    Button L
    btn--primary / btn--l
    Button XL
    btn--primary / btn--xl
    Button XXL
    btn--primary / btn--xxl

    Typography

    Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.
    Headings
    H1 (--xxl)

    Heading 1 Regular

    Heading 1 Medium

    Heading 1 Bold

    H2 (--xl)

    Heading 2 Regular

    Heading 2 Medium

    Heading 2 Bold

    H3 (--l)

    Heading 3 Regular

    Heading 3 Medium

    Heading 3 Bold

    H4 (--m)

    Heading 4 Regular

    Heading 4 Medium

    Heading 4 Bold

    H5 (--s)
    Heading 5 Regular
    Heading 5 Medium
    Heading 5 Bold
    H6 (--xs)
    Heading 6 Regular
    Heading 6 Medium
    Heading 6 Bold
    Body Text
    BODY TEXT (--m)
    Text m Regular
    Text m Medium
    Text m Bold
    SMALL TEXT (--s)
    Text s Regular
    Text s Medium
    Text s Bold
    XTRA SMALL TEXT (--xs)
    Text xs Regular
    Text xs Medium
    Text xs Bold
    Examples

    Heading 1 (H1)

    This is large text. Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Heading 2 (H2)

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Heading 3 (H3)

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Heading 4 (H4)

    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
    Heading 5 (H5)
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.
    Heading 6 (H6)
    Lorem ipsum dolor sit amet, consectetur adipiscing 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.

    Widths

    There are six values you can use to control element width. They're automatically responsive.
    --width-xs
    --width-s
    --width-m
    --width-l
    --width-xl
    --width-xxl

    Section Padding

    Padding for sections is responsive and based on a multiplier of the core spacing system.
    None
    XS
    S
    M
    L
    XL
    XXL

    Spacing

    There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.
    --space-xs
    --space-s
    --space-m
    --space-l
    --space-xl
    --space-xxl

    Element Padding

    Here are the six levels of spacing visualized as padding.

    Card

    This is a card with XS padding. Its content is pretty close to the edges.

    Card

    This is a card with S padding. It has a little bit tighter padding.

    Card

    This is a card with M padding. It has standard breathing room.

    Card

    This is a card with L padding. It has extra breathing room.

    Card

    This is a card with XL padding. It has significant breathing room.

    Card

    This is a card with XXL padding. Avoid using this in a confined space.

    Shadows

    There are three multi-layer box shadows to choose from.
    Box shadow M
    Box shadow L
    Box shadow XL

    Border radius

    There are six border radius values calculated from a base size and a mathematical scale.
    Rounded XS
    Rounded S
    Rounded M
    Rounded L
    Rounded XL
    Rounded XXL