{"id":2534,"date":"2024-09-13T07:31:26","date_gmt":"2024-09-13T07:31:26","guid":{"rendered":"https:\/\/ai.smerp.hk\/index.php\/design-system\/"},"modified":"2025-02-21T10:05:26","modified_gmt":"2025-02-21T10:05:26","slug":"design-system","status":"publish","type":"page","link":"https:\/\/smerp.hk\/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<\/div>\n\n\n\n

\n

https:\/\/icolorpalette.com\/color\/17A3B9<\/a><\/p>\n\n\n\n

https:\/\/icolorpalette.com\/color\/5edfb3<\/a><\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Heading Font Sizes<\/h2>\n<\/div><\/div>\n\n\n\n
\n

Title 1<\/mark> Lorem ipsum dolor sit amet 0123456789.<\/h3>\n\n\n\n

Title 2<\/mark> Lorem ipsum dolor sit amet 0123456789.<\/h3>\n\n\n\n

Title 3<\/mark> Lorem ipsum dolor sit amet 0123456789.<\/h3>\n\n\n\n

Title 4<\/mark> Lorem ipsum dolor sit amet 0123456789.<\/h3>\n\n\n\n
Title 5<\/mark> Lorem ipsum dolor sit amet 0123456789.<\/h5>\n\n\n\n
Title 6<\/mark> Lorem ipsum dolor sit amet 0123456789.<\/h6>\n<\/div>\n<\/div><\/div>\n\n\n\n
\n
\n

Content Font Sizes<\/h2>\n<\/div><\/div>\n\n\n\n
\n

XL<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar.<\/p>\n\n\n\n

L<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar.<\/p>\n\n\n\n

M (Base)<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar consectetur adipiscing.<\/p>\n\n\n\n

S<\/mark><\/strong> Lorem ipsum dolor sit amet, consectetur adipiscing elit quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar.<\/p>\n\n\n\n

XS<\/strong><\/mark> Lorem ipsum dolor sit amet, consectetur adipiscing elit quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Sed sollicitudin quam lacinia turpis vehicula, cursus luctus elit sollicitudin. Quisque vel magna ullamcorper orci finibus pulvinar.<\/p>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Buttons<\/h2>\n<\/div><\/div>\n\n\n\n
\n
Button Style XS<\/a><\/div>\n\n\n\n
Button Style XS<\/a><\/div>\n<\/div>\n\n\n\n
\n
Button Style S<\/a><\/div>\n\n\n\n
Button Style S<\/a><\/div>\n<\/div>\n\n\n\n
\n
Button Style M<\/a><\/div>\n\n\n\n
Button Style M<\/a><\/div>\n<\/div>\n\n\n\n
\n
Button Style L<\/a><\/div>\n\n\n\n
Button Style L<\/a><\/div>\n<\/div>\n\n\n\n
\n
Button Style XL<\/a><\/div>\n\n\n\n
Button Style XL<\/a><\/div>\n<\/div>\n\n\n\n
\n
Button Style Link Text XS<\/a><\/div>\n\n\n\n
Button Style Link Text S<\/a><\/div>\n\n\n\n
Button Style Link Text M<\/a><\/div>\n\n\n\n
Button Style Link Text L<\/a><\/div>\n\n\n\n
Button Style Link Text XL<\/a><\/div>\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:\/\/phosphoricons.com\/<\/a><\/p>\n\n\n\n

Size 48px \/ Light<\/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:\/\/www.pexels.com\/<\/a><\/p>\n<\/div>\n<\/div>\n<\/div><\/div>\n\n\n\n

\n
\n

Spacings<\/h2>\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><\/strong><\/mark><\/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><\/strong><\/mark><\/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-90px<\/strong><\/mark><\/strong><\/mark><\/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><\/strong><\/mark><\/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><\/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><\/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><\/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\n\n\n

\n
\n

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

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

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

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

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

H5 Lorem ipsum dolor sit amet adipiscing elit.<\/h5>\n\n\n\n
H6 Lorem ipsum dolor sit amet adipiscing elit.<\/h6>\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":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-canvas-with-title","meta":{"footnotes":""},"class_list":["post-2534","page","type-page","status-publish","hentry","description-off"],"yoast_head":"\nDesign System - Empowering Your Business Through Smarter\u00a0Solutions<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/smerp.hk\/index.php\/design-system\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Design System - Empowering Your Business Through Smarter\u00a0Solutions\" \/>\n<meta property=\"og:description\" content=\"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…\" \/>\n<meta property=\"og:url\" content=\"https:\/\/smerp.hk\/index.php\/design-system\/\" \/>\n<meta property=\"og:site_name\" content=\"Empowering Your Business Through Smarter\u00a0Solutions\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=61565221185748\" \/>\n<meta property=\"article:modified_time\" content=\"2025-02-21T10:05:26+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/01\/scales-light-2.svg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/smerp.hk\/index.php\/design-system\/\",\"url\":\"https:\/\/smerp.hk\/index.php\/design-system\/\",\"name\":\"Design System - Empowering Your Business Through Smarter\u00a0Solutions\",\"isPartOf\":{\"@id\":\"https:\/\/smerp.hk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/smerp.hk\/index.php\/design-system\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/smerp.hk\/index.php\/design-system\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/01\/scales-light-2.svg\",\"datePublished\":\"2024-09-13T07:31:26+00:00\",\"dateModified\":\"2025-02-21T10:05:26+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/smerp.hk\/index.php\/design-system\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/smerp.hk\/index.php\/design-system\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/smerp.hk\/index.php\/design-system\/#primaryimage\",\"url\":\"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/01\/scales-light-2.svg\",\"contentUrl\":\"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/01\/scales-light-2.svg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/smerp.hk\/index.php\/design-system\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/smerp.hk\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Design System\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/smerp.hk\/#website\",\"url\":\"https:\/\/smerp.hk\/\",\"name\":\"Smerp Group Limited\",\"description\":\"Empowering Your Business Through Smarter\u00a0Solutions\",\"publisher\":{\"@id\":\"https:\/\/smerp.hk\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/smerp.hk\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/smerp.hk\/#organization\",\"name\":\"Smerp Group Limited\",\"url\":\"https:\/\/smerp.hk\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/smerp.hk\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/02\/smerp_logo_2023_green-1.png\",\"contentUrl\":\"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/02\/smerp_logo_2023_green-1.png\",\"width\":1025,\"height\":325,\"caption\":\"Smerp Group Limited\"},\"image\":{\"@id\":\"https:\/\/smerp.hk\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/profile.php?id=61565221185748\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Design System - Empowering Your Business Through Smarter\u00a0Solutions","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/smerp.hk\/index.php\/design-system\/","og_locale":"en_US","og_type":"article","og_title":"Design System - Empowering Your Business Through Smarter\u00a0Solutions","og_description":"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…","og_url":"https:\/\/smerp.hk\/index.php\/design-system\/","og_site_name":"Empowering Your Business Through Smarter\u00a0Solutions","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=61565221185748","article_modified_time":"2025-02-21T10:05:26+00:00","og_image":[{"url":"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/01\/scales-light-2.svg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/smerp.hk\/index.php\/design-system\/","url":"https:\/\/smerp.hk\/index.php\/design-system\/","name":"Design System - Empowering Your Business Through Smarter\u00a0Solutions","isPartOf":{"@id":"https:\/\/smerp.hk\/#website"},"primaryImageOfPage":{"@id":"https:\/\/smerp.hk\/index.php\/design-system\/#primaryimage"},"image":{"@id":"https:\/\/smerp.hk\/index.php\/design-system\/#primaryimage"},"thumbnailUrl":"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/01\/scales-light-2.svg","datePublished":"2024-09-13T07:31:26+00:00","dateModified":"2025-02-21T10:05:26+00:00","breadcrumb":{"@id":"https:\/\/smerp.hk\/index.php\/design-system\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/smerp.hk\/index.php\/design-system\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/smerp.hk\/index.php\/design-system\/#primaryimage","url":"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/01\/scales-light-2.svg","contentUrl":"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/01\/scales-light-2.svg"},{"@type":"BreadcrumbList","@id":"https:\/\/smerp.hk\/index.php\/design-system\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/smerp.hk\/"},{"@type":"ListItem","position":2,"name":"Design System"}]},{"@type":"WebSite","@id":"https:\/\/smerp.hk\/#website","url":"https:\/\/smerp.hk\/","name":"Smerp Group Limited","description":"Empowering Your Business Through Smarter\u00a0Solutions","publisher":{"@id":"https:\/\/smerp.hk\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/smerp.hk\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/smerp.hk\/#organization","name":"Smerp Group Limited","url":"https:\/\/smerp.hk\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/smerp.hk\/#\/schema\/logo\/image\/","url":"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/02\/smerp_logo_2023_green-1.png","contentUrl":"https:\/\/ai.smerp.hk\/wp-content\/uploads\/2025\/02\/smerp_logo_2023_green-1.png","width":1025,"height":325,"caption":"Smerp Group Limited"},"image":{"@id":"https:\/\/smerp.hk\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/profile.php?id=61565221185748"]}]}},"_links":{"self":[{"href":"https:\/\/smerp.hk\/index.php\/wp-json\/wp\/v2\/pages\/2534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/smerp.hk\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/smerp.hk\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/smerp.hk\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/smerp.hk\/index.php\/wp-json\/wp\/v2\/comments?post=2534"}],"version-history":[{"count":1,"href":"https:\/\/smerp.hk\/index.php\/wp-json\/wp\/v2\/pages\/2534\/revisions"}],"predecessor-version":[{"id":7080,"href":"https:\/\/smerp.hk\/index.php\/wp-json\/wp\/v2\/pages\/2534\/revisions\/7080"}],"wp:attachment":[{"href":"https:\/\/smerp.hk\/index.php\/wp-json\/wp\/v2\/media?parent=2534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}