Skip to main content Skip to navigation
Styleguide

Colors design tokens

Neutral

0
50
100
200
300
400
600
800
900
1000

Blue

500
600

Green

500
600

Grey

500
600

Off-white

100
200
300

Palette 1

Text 1

Text 2

Text 3

contrast 1
surface 2
Bekijk formulier elementen
Selecteer een optie

Palette 2

Text 1

Text 2

Text 3

contrast 1
surface 2
Bekijk formulier elementen
Selecteer een optie

Palette 3

Text 1

Text 2

Text 3

contrast 1
surface 2
Bekijk formulier elementen
Selecteer een optie

Palette 4

Text 1

Text 2

Text 3

contrast 1
surface 2
Bekijk formulier elementen
Selecteer een optie

Palette 5

Text 1

Text 2

Text 3

contrast 1
surface 2
Bekijk formulier elementen
Selecteer een optie

Palette 6

Text 1

Text 2

Text 3

contrast 1
surface 2
Bekijk formulier elementen
Selecteer een optie

Heading 1 - The quick brown fox

Heading 2 - The quick brown fox jumps

Heading 3 - The quick brown fox jumps over the lazy dog

Heading 4 - The quick brown fox jumps over the lazy dog

Intro - The quick brown fox jumps over the lazy dog

Body 1 - The quick brown fox jumps over the lazy dog

Body 2 - The quick brown fox jumps over the lazy dog

Body 3 - The quick brown fox jumps over the lazy dog

Body 4 - The quick brown fox jumps over the lazy dog

Scoped text

Amet aspernatur dolores esse laborum maxime obcaecati quis quos similique veniam voluptatum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ducimus ea eius, harum ipsa nihil odio pariatur provident ratione reprehenderit voluptas voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing.

Consectetur adipisicing elit. Animi asperiores assumenda beatae delectus, doloremque ducimus ea eveniet facilis fuga harum id in iste iure laudantium maxime nam perspiciatis provident quasi quod reiciendis reprehenderit sint, sunt tempora vero vitae accusantium aliquid distinctio.

Scoped unordered list

  • Consectetur elit.
  • Dignissimos explicabo ipsam maiores nemo non nulla odio pariatur.
  • Accusantium blanditiis cupiditate
    • Consectetur elit.
    • Dignissimos explicabo ipsam maiores nemo non nulla odio pariatur.
    • Accusantium blanditiis cupiditate
  • Lorem ipsum dolor sit amet
  • Quia sapiente ut voluptatem

Scoped ordered list

  1. Accusantium blanditiis cupiditate
  2. Quia sapiente ut voluptatem
    1. Accusantium blanditiis cupiditate
    2. Dignissimos explicabo ipsam maiores nemo non nulla odio pariatur.
    3. Lorem ipsum dolor sit amet
  3. Explicabo ipsam maiores nemo non nulla odio pariatur.
    1. Consectetur elit.
    2. Lorem ipsum dolor sit amet
    3. Quia sapiente ut voluptatem
  4. Lorem ipsum dolor sit amet
  5. Accusantium blanditiis cupiditate

Checklist

  • Lorem ipsum dolor sit amet
  • Consectetur elit
  • Accusantium blanditiis cupiditate
  • Dignissimos explicabo ipsam maiores nemo non nulla odio pariatur
  • Quia sapiente ut voluptatem
  • Consectetur elit.
  • Blanditiis cupiditate
  • Explicabo pariatur
  • Sapiente ut voluptatem
  • Accusantium blanditiis cupiditate

Buttons

Button Button Ghost button Ghost button Text button
Button Button Ghost button Ghost button Text button
Button Button Ghost button Ghost button Text button
Button Button Ghost button Ghost button Text button
Button Button Ghost button Ghost button Text button
Button Button Ghost button Ghost button Text button

Icon buttons

SVG Icons

  • arrow-down
  • arrow-left
  • arrow-right
  • arrow-up
  • check-circle
  • check
  • chevron-down
  • chevron-left
  • chevron-right
  • chevron-up
  • clock
  • close
  • download
  • education
  • employment
  • error
  • euro
  • external
  • hamburger
  • location
  • logo
  • mail
  • minus
  • phone
  • placeholder-image
  • plus
  • search
  • suitcase
  • warning
  • world

Tags

Styleguide Kickstarter https://pinax.be
data-size="large"
Pinax Pinax

Contact tile

Cards (variations collection)

Pinax 14x11
154m²
Pinax 7x14/7x10
198m²
Pinax 8x17
136m³

Team Cards