{"id":2534,"date":"2024-09-13T07:31:26","date_gmt":"2024-09-13T07:31:26","guid":{"rendered":"https:\/\/the7.io\/fse-business\/?page_id=2534"},"modified":"2024-09-13T07:31:26","modified_gmt":"2024-09-13T07:31:26","slug":"design-system","status":"publish","type":"page","link":"https:\/\/raykasanaat.ir\/index.php\/design-system\/","title":{"rendered":"Design System"},"content":{"rendered":"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https:\/\/icolorpalette.com\/color\/0e62e6<\/a><\/p>\n\n

https:\/\/icolorpalette.com\/color\/58ddcd<\/a><\/p><\/div><\/div>\n\n

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

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

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

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

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

Content Font Sizes<\/h2><\/div>\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

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

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

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

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><\/div><\/div>\n\n

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

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

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

Size 48px \/ Stroke width 1.25px<\/p><\/div><\/div><\/div>\n\n

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

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

Spacings<\/h2><\/div>\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><\/div>\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><\/div><\/div>\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><\/div>\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><\/div><\/div>\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><\/div>\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><\/div><\/div>\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><\/div>\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><\/div><\/div>\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><\/div>\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><\/div><\/div>\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><\/div>\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><\/div>\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><\/div><\/div>\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><\/div>\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><\/div>\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><\/div><\/div>\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><\/div>\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><\/div>\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><\/div><\/div>\n\n

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

H5 Lorem ipsum dolor sit amet adipiscing elit.<\/h5>\n\n
H6 Lorem ipsum dolor sit amet adipiscing elit.<\/h6><\/div><\/div><\/div>","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":3975,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"wp-custom-template-canvas-with-title","meta":{"saved_in_kubio":false,"footnotes":""},"class_list":["post-2534","page","type-page","status-publish","has-post-thumbnail","hentry"],"kubio_ai_page_context":{"short_desc":"","purpose":"general"},"_links":{"self":[{"href":"https:\/\/raykasanaat.ir\/index.php\/wp-json\/wp\/v2\/pages\/2534","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/raykasanaat.ir\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/raykasanaat.ir\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/raykasanaat.ir\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/raykasanaat.ir\/index.php\/wp-json\/wp\/v2\/comments?post=2534"}],"version-history":[{"count":0,"href":"https:\/\/raykasanaat.ir\/index.php\/wp-json\/wp\/v2\/pages\/2534\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/raykasanaat.ir\/index.php\/wp-json\/wp\/v2\/media\/3975"}],"wp:attachment":[{"href":"https:\/\/raykasanaat.ir\/index.php\/wp-json\/wp\/v2\/media?parent=2534"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}