Design system
*taken from twenty twenty four and ollie theme
https://www.gutenberg-devtools.com/generator/themejson-support
And articles by Richard Tabor
Colours
Brand: primary, secondary, tertiary, quaternary, quinary, senary, septenary, octonary, nonary, and denary
Variations: primary-accent, primary-contrast
Percentages: primary-10
Utility: success, error, warning, highlight
Base(eg: black to white ): base, base-10
Text default: primary-text, secondary-text…
Backgrounds: primary-background…
Dark or Light: primary-dark, primary-text-dark, primary-background-dark
CSS Custom Variables Example: var(–wp–preset–color–primary), var(–wp–preset–color–base)
"settings": {
"appearanceTools": true,
"color": {
"defaultDuotone": false,
"defaultPalette": false,
"defaultGradients": false,
"palette": [
{
"name": "Primary",
"slug": "primary",
"color": "#4d34fa"
},
{
"name": "Primary",
"slug": "primary-10",
"color": "#edebff"
},
{
"name": "Base",
"slug": "base",
"color": "#000000"
},
{
"name": "Primary Background",
"slug": "primary-background",
"color": "#ffffff"
}
]
}
}Duotone
primary-duotone, secondary-duotone, custom-duotone, grayscale….
CSS Custom Variables Example: var(–wp–preset–duotone–duotone-1), var(–wp–preset–duotone–duotone-2)
"duotone": [
{
"name": "Primary Duotone",
"slug": "duotone-1",
"colors": [
"#4d34fa",
"#edebff"
]
},
{
"name": "Sunset",
"slug": "duotone-2",
"colors": [
"#FF3253",
"#FFDC53"
]
},
{
"name": "Grayscale",
"slug": "duotone-3",
"colors": [
"#000",
"#fff"
]
}
]Gradients
CSS Custom Variables Example: var(–wp–preset–gradient–gradient-1), var(–wp–preset–gradient—gradient-2)
"gradients": [
{
"name": "Primary",
"slug": "gradient-1",
"gradient": "linear-gradient(135deg, #4d34fa, #edebff)"
},
{
"name": "Primary to Secondary",
"slug": "gradient-2",
"gradient": "linear-gradient(135deg, #4d34fa, #636381)"
},
{
"name": "Purple",
"slug": "gradient-3",
"gradient": "linear-gradient(135deg, #4D34FA, #ad34fa)"
},
{
"name": "Base",
"slug": "gradient-4",
"gradient": "linear-gradient(135deg, #000000, #ffffff)"
},
]Typography custom settings
CSS Custom Variables Example: var(–wp–preset–font-family–heading), var(–wp–preset–font-family–body)
Font sizes:
CSS Custom Variables Example: var(–wp–preset–font-size–x-small), var(–wp–preset–font-size–small)
"typography": {
"dropCap": false,
"fluid": true,
"fontFamilies": [
{
"fontFace": [
{
"fontFamily": "\"Playfair Display\"",
"fontStyle": "normal",
"fontWeight": "700",
"src": "https://racerpacer.com/wp-content/uploads/fonts/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiukDVZNLo_U2r.woff2"
},
{
"fontFamily": "\"Playfair Display\"",
"fontStyle": "italic",
"fontWeight": "700",
"src": "https://racerpacer.com/wp-content/uploads/fonts/nuFRD-vYSZviVYUb_rj3ij__anPXDTnCjmHKM4nYO7KN_k-UbtPK-F2rA0s.woff2"
}
],
"fontFamily": "\"Playfair Display\", serif",
"name": "Playfair Display",
"slug": "heading"
}],
"fontSizes": [
{
"fluid": {
"min": ".9rem",
"max": "1rem"
},
"size": "1rem",
"slug": "x-small",
"name": "Extra Small"
},
{
"fluid": {
"min": "1rem",
"max": "1.2rem"
},
"size": "1.2rem",
"slug": "small"
}
]
} Font weights and line height:
CSS Custom Variables Example: var(–wp–custom–font-weight–bold), var(–wp–custom–line-height–heading)
Note: Slugs for line height could also be: xs, sm, md, lg OR xsmall, small, medium etc.
"settings": {
"custom": {
"fontWeight": {
"thin": 100,
"extra-light": 200,
"light": 300,
"regular": 400,
"medium": 500,
"semi-bold": 600,
"bold": 700,
"extra-bold": 800,
"black": 900
},
"lineHeight": {
"none": 1,
"tight": 1.1,
"snug": 1.2,
"normal": 1.5,
"relaxed": 1.625,
"loose": 2,
"body": "calc(1px + 2ex + 7px)",
"heading": "1.1"
}
}
}Spacing settings
CSS Custom Variables Example: var(–wp–preset–spacing–medium)
"settings": {
"spacing": {
"spacingSizes": [
{
"name": "Small",
"size": "clamp(.5rem, 2.5vw, 1rem)",
"slug": "10"
},
{
"name": "Medium",
"size": "clamp(1.5rem, 4vw, 2rem)",
"slug": "20"
},
{
"name": "Large",
"size": "clamp(2rem, 5vw, 3rem)",
"slug": "30"
},
{
"name": "Extra Large",
"size": "clamp(3rem, 7vw, 5rem)",
"slug": "40"
},
{
"name": "2xl",
"size": "clamp(4rem, 9vw, 7rem)",
"slug": "50"
},
{
"name": "3xl",
"size": "clamp(5rem, 12vw, 9rem)",
"slug": "60"
},
{
"name": "4xl",
"size": "clamp(6rem, 14vw, 13rem)",
"slug": "70"
}
]
}
}Shadows
CSS Custom Variables Example: var(–wp–preset–shadow–small)
"shadow": {
"presets": [
{
"name": "Default",
"shadow": "6px 6px 6px rgba(0, 0, 0, 1)",
"slug": "default"
},
{
"name": "Small",
"shadow": "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
"slug": "small"
},
{
"name": "Medium",
"shadow": "0 4px 10px 0 rgba( 0, 0, 0, 0.3 )",
"slug": "medium"
},
{
"name": "Large",
"shadow": "0 8px 15px 0 rgba( 0, 0, 0, 0.3 )",
"slug": "large"
}
]
},