{"id":2534,"date":"2024-09-13T07:31:26","date_gmt":"2024-09-13T07:31:26","guid":{"rendered":"https:\/\/web.noriegabrandon.com\/index.php\/design-system\/"},"modified":"2025-07-23T21:36:07","modified_gmt":"2025-07-23T21:36:07","slug":"design-system","status":"publish","type":"page","link":"https:\/\/web.noriegabrandon.com\/index.php\/design-system\/","title":{"rendered":"Design System"},"content":{"rendered":"\n
\n
\n
\n

Colors<\/h2>\n<\/div><\/div>\n\n\n\n
\n
\n
\n

Background 1<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Background 2<\/mark> <\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Borders<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Headings <\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Content 1<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Content 2<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Contrast Background 1<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Contrast Background 2<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Contrast Borders<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Contrast Headings<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Contrast Content 1<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Contrast Content 2<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Accent 1 Dark<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Accent 1<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Accent 1 Light<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Accent 1 Background<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Accent 1 Transparent<\/mark><\/mark><\/p>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Accent 2 Dark<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Accent 2<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Accent 2 Light<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Accent 2 Background<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Accent 2 Transparent<\/mark><\/mark><\/p>\n<\/div>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n
\n

Gradient 1<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Gradient 2<\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Gradient <\/mark><\/mark>3<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Gradient 4 <\/mark><\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Gradient 5<\/mark><\/mark><\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Gradient 6<\/mark><\/mark><\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Gradient 7<\/mark><\/mark><\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Gradient 8<\/mark><\/mark><\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Gradient 9<\/mark><\/mark><\/mark><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Gradient 10<\/mark><\/mark><\/mark><\/p>\n<\/div>\n<\/div><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Buttons<\/h3>\n<\/div><\/div>\n\n\n\n
\n
Button Style Fill<\/a><\/div>\n\n\n\n
Button Style Outline<\/a><\/div>\n<\/div>\n\n\n\n
\n
Button Style XL<\/a><\/div>\n\n\n\n
Button Style L<\/a><\/div>\n\n\n\n
Button Style M<\/a><\/div>\n\n\n\n
Button Style S<\/a><\/div>\n\n\n\n
Button Style XS<\/a><\/div>\n<\/div>\n\n\n\n
\n
Button Style Link Text XL<\/a><\/div>\n\n\n\n
Button Style Link Text L<\/a><\/div>\n\n\n\n
Button Style Link Text M<\/a><\/div>\n\n\n\n
Button Style Link Text S<\/a><\/div>\n\n\n\n
Button Style Link Text XS<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n

Font Size Presets (Content)<\/h3>\n<\/div><\/div>\n\n\n\n
\n

XL<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc. Sed aliquam arcu et neque ornare, non tincidunt dolor bibendum.<\/p>\n\n\n\n

L<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc. Sed aliquam arcu et neque ornare, non tincidunt dolor bibendum.<\/p>\n\n\n\n

M (Base)<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc. Sed aliquam arcu et neque ornare, non tincidunt dolor bibendum.<\/p>\n\n\n\n

S<\/mark><\/strong> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc. Sed aliquam arcu et neque ornare, non tincidunt dolor bibendum.<\/p>\n\n\n\n

XS<\/strong><\/mark> Pellentesque justo ipsum, ullamcorper eu elit eu, vulputate auctor lorem. Sed massa dolor, tempor ac justo sit amet, suscipit facilisis risus. Cras vel risus placerat, tristique sapien eget, ultricies nunc. Sed aliquam arcu et neque ornare, non tincidunt dolor bibendum.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Font Sizes Presets (Titles)<\/h3>\n<\/div><\/div>\n\n\n\n
\n

Title 1<\/mark> Lorem ipsum dolor 012345<\/h3>\n\n\n\n

Title 2<\/mark> Lorem ipsum dolor 012345<\/h3>\n\n\n\n

Title 3<\/mark> Lorem ipsum dolor 012345<\/h3>\n\n\n\n

Title 4<\/mark> Lorem ipsum dolor 012345<\/h3>\n\n\n\n
Title 5<\/mark> Lorem ipsum dolor 012345<\/h5>\n\n\n\n
Title 6<\/mark> Lorem ipsum dolor 012345<\/h6>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n

Font Sizes Presets (Display)<\/h3>\n<\/div><\/div>\n\n\n\n
\n

Display 1<\/mark><\/h3>\n\n\n\n

Display 2<\/mark><\/h3>\n\n\n\n

Display 3<\/mark><\/h3>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n

H1-H6 Settings<\/h3>\n<\/div><\/div>\n\n\n\n
\n

H1 Lorem ipsum dolor sit elit.<\/h1>\n\n\n\n

H2 Lorem ipsum dolor sit elit.<\/h2>\n\n\n\n

H3 Lorem ipsum dolor sit elit.<\/h3>\n\n\n\n

H4 Lorem ipsum dolor sit elit.<\/h4>\n\n\n\n

H5 Lorem ipsum dolor sit elit.<\/h5>\n\n\n\n
H6 Lorem ipsum dolor sit elit.<\/h6>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n

Icons<\/h2>\n<\/div><\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div><\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n

https:\/\/lucide.dev\/<\/a><\/p>\n\n\n\n

Size 24px \/ Stroke Width 1.5px<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\"\"<\/figure>\n<\/div><\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n
\n

https:\/\/www.svgrepo.com\/<\/a><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Images<\/h2>\n<\/div><\/div>\n\n\n\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div>\n\n
\n
\"\"<\/figure>\n<\/div><\/div>\n\n\n\n
\n

https:\/\/pixabay.com\/<\/a><\/p>\n\n\n\n

https:\/\/www.pexels.com\/<\/a><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Spacings<\/h3>\n<\/div><\/div>\n\n\n\n
\n
\n
\n

90-130px<\/strong><\/mark> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida cursus luctus elit. <\/p>\n<\/div><\/div>\n\n\n\n

\n

90-130px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam mauris vitae.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

80-110px<\/strong><\/mark> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida cursus luctus elit. <\/p>\n<\/div><\/div>\n\n\n\n

\n

80-110px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam mauris vitae.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

70-90px<\/strong><\/mark> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida pulvinar. Sed sollicitudin quam cursus luctus elit. <\/p>\n<\/div><\/div>\n\n\n\n

\n

70-80px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

60-75px<\/strong><\/mark> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida pulvinar. Sed sollicitudin quam lacinia turpis cursus luctus elit. <\/p>\n<\/div><\/div>\n\n\n\n

\n

60-75px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

50-60px<\/strong><\/mark> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida pulvinar. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit. <\/p>\n<\/div><\/div>\n\n\n\n

\n

50-60px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

40-50px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin nulla amet.<\/p>\n<\/div><\/div>\n\n\n\n

\n

40-50px<\/strong><\/mark> Magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis lorem ipsum posuere ipsum dolor glavrida pulvinar.<\/p>\n<\/div><\/div>\n\n\n\n

\n

40-50px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

35-40px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin lorem.<\/p>\n<\/div><\/div>\n\n\n\n

\n

35-40px<\/strong><\/mark> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor.<\/p>\n<\/div><\/div>\n\n\n\n

\n

35-40px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin amet.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

30px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin lorem.<\/p>\n<\/div><\/div>\n\n\n\n

\n

30px<\/strong><\/mark> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae.<\/p>\n<\/div><\/div>\n\n\n\n

\n

30px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin amet.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

25px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n\n\n\n

\n

25px<\/strong><\/mark> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div><\/div>\n\n\n\n

\n

25px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

20px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n\n\n\n

\n

20px<\/strong><\/mark> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div><\/div>\n\n\n\n

\n

20px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

15px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n\n\n\n

\n

15px<\/strong><\/mark> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div><\/div>\n\n\n\n

\n

15px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

10px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n\n\n\n

\n

10px<\/strong><\/mark> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div><\/div>\n\n\n\n

\n

10px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n

\n
\n

5px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n\n\n\n

\n

5px<\/strong><\/mark> Quisque vel magna ullamcorper orci finibus pulvinar. Sed nisl tortor, congue ut elit consequat, mattis posuere nunc. Etiam porttitor eu mauris vitae tristique.<\/p>\n<\/div><\/div>\n\n\n\n

\n

5px<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin.<\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div><\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"

Colors Background 1 Background 2 Borders Headings Content 1 Content 2 Contrast Background 1 Contrast Background 2 Contrast Borders Contrast Headings Contrast Content 1 Contrast Content 2 Accent 1 Dark Accent 1 Accent 1 Light Accent 1 Background Accent 1 Transparent Accent 2 Dark Accent 2 Accent 2 Light Accent 2 Background Accent 2 Transparent…<\/p>\n","protected":false},"author":1,"featured_media":8949,"parent":0,"menu_order":90,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-canvas-with-title","meta":{"footnotes":""},"class_list":["post-2534","page","type-page","status-publish","has-post-thumbnail","hentry","description-off"],"_links":{"self":[{"href":"https:\/\/web.noriegabrandon.com\/index.php\/wp-json\/wp\/v2\/pages\/2534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.noriegabrandon.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/web.noriegabrandon.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/web.noriegabrandon.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/web.noriegabrandon.com\/index.php\/wp-json\/wp\/v2\/comments?post=2534"}],"version-history":[{"count":0,"href":"https:\/\/web.noriegabrandon.com\/index.php\/wp-json\/wp\/v2\/pages\/2534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/web.noriegabrandon.com\/index.php\/wp-json\/wp\/v2\/media\/8949"}],"wp:attachment":[{"href":"https:\/\/web.noriegabrandon.com\/index.php\/wp-json\/wp\/v2\/media?parent=2534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}