{"id":5540,"date":"2025-07-06T14:11:20","date_gmt":"2025-07-06T14:11:20","guid":{"rendered":"https:\/\/cristal.redesigners.eu\/?page_id=5540"},"modified":"2025-07-06T19:38:35","modified_gmt":"2025-07-06T19:38:35","slug":"style-guide-sandbox","status":"publish","type":"page","link":"https:\/\/cristal.redesigners.eu\/index.php\/style-guide-sandbox\/","title":{"rendered":"Style Guide & Sandbox"},"content":{"rendered":"\n
\n
\n
\n

Style Guide<\/h2>\n\n\n\n

Build and share your design viewing all affected elements.<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Colors<\/p>\n<\/div>\n\n\n\n

\n
\n
\n
\n
<\/div>\n<\/div>\n\n\n\n

Primary Color<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n<\/div>\n\n\n\n

Secondary Color<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n<\/div>\n\n\n\n

Tertiary Color<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
\n
<\/div>\n<\/div>\n\n\n\n

Very Dark<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n<\/div>\n\n\n\n

Dark<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n<\/div>\n\n\n\n

Medium Dark<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n<\/div>\n\n\n\n

Medium Light<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n<\/div>\n\n\n\n

Light<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n
\n
<\/div>\n<\/div>\n\n\n\n

Very Light<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Typography<\/p>\n<\/div>\n\n\n\n

\n
\n
\n

Heading Font & Sizes<\/p>\n\n\n\n

\n

Headline 1<\/h1>\n\n\n\n

Headline 2<\/h2>\n\n\n\n

Headline 3<\/h3>\n\n\n\n

Headline 4<\/h4>\n\n\n\n

Headline 5<\/h5>\n\n\n\n
Headline 6<\/h6>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n

Body Font & Default Size<\/p>\n\n\n\n

\n

abcdefghijklmnopqrstuvwxyz1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ<\/p>\n\n\n\n

\n

100 – Thin<\/p>\n\n\n\n

200 – Extra Light<\/p>\n\n\n\n

300 – Light<\/p>\n\n\n\n

400 – Regular<\/p>\n\n\n\n

500 – Medium<\/p>\n\n\n\n

600 – Semi-Bold<\/p>\n\n\n\n

700 – Bold<\/p>\n\n\n\n

800 – Extra Bold<\/p>\n\n\n\n

900 – Black<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Buttons & Links<\/p>\n<\/div>\n\n\n\n

\n
Primary Button<\/a><\/div>\n\n\n\n
Secondary Button<\/a><\/div>\n\n\n\n
Tertiary Button<\/a><\/div>\n<\/div>\n\n\n\n
\n
Large Button<\/a><\/div>\n\n\n\n
Small Button<\/a><\/div>\n<\/div>\n\n\n\n
\n

\n\t\t\t\tStandard Link<\/a>\n\t\t\t<\/p>\n<\/div>\n<\/div>\n\n\n\n

\n
\n

Spacing Sizes<\/p>\n<\/div>\n\n\n\n

\n

Huge<\/p>\n\n\n\n

\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Large<\/p>\n\n\n\n

\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Medium<\/p>\n\n\n\n

\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Small<\/p>\n\n\n\n

\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n

Tiny<\/p>\n\n\n\n

\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n