Skip to content

Instantly share code, notes, and snippets.

@justintadlock
Created May 31, 2021 02:05
Show Gist options
  • Save justintadlock/0003b82a1fc753b8bae54fad5b8cfd55 to your computer and use it in GitHub Desktop.
Save justintadlock/0003b82a1fc753b8bae54fad5b8cfd55 to your computer and use it in GitHub Desktop.
Block theme color naming scheme
{
"settings": {
"defaults": {
"color": {
"palette": [
{
"slug": "transparent",
"color": "transparent",
"name" : "Transparent"
},
{
"slug" : "black",
"color" : "#22292f",
"name" : "Black"
},
{
"slug" : "white",
"color" : "#ffffff",
"name" : "White"
},
{
"slug" : "neutral-900",
"color" : "#1a202c",
"name" : "Neutral: 900"
},
{
"slug" : "neutral-800",
"color" : "#2d3748",
"name" : "Neutral: 800"
},
{
"slug" : "neutral-700",
"color" : "#4a5568",
"name" : "Neutral: 700"
},
{
"slug" : "neutral-600",
"color" : "#718096",
"name" : "Neutral: 600"
},
{
"slug" : "neutral-500",
"color" : "#a0aec0",
"name" : "Neutral: 500"
},
{
"slug" : "neutral-400",
"color" : "#cbd5e0",
"name" : "Neutral: 400"
},
{
"slug" : "neutral-300",
"color" : "#e2e8f0",
"name" : "Neutral: 300"
},
{
"slug" : "neutral-200",
"color" : "#edf2f7",
"name" : "Neutral: 200"
},
{
"slug" : "neutral-100",
"color" : "#f7fafc",
"name" : "Neutral: 100"
},
{
"slug" : "primary-900",
"color" : "#2a4365",
"name" : "Primary: 900"
},
{
"slug" : "primary-800",
"color" : "#2c5282",
"name" : "Primary: 800"
},
{
"slug" : "primary-700",
"color" : "#2b6cb0",
"name" : "Primary: 700"
},
{
"slug" : "primary-600",
"color" : "#3182ce",
"name" : "Primary: 600"
},
{
"slug" : "primary-500",
"color" : "#4299e1",
"name" : "Primary: 500"
},
{
"slug" : "primary-400",
"color" : "#63b3ed",
"name" : "Primary: 400"
},
{
"slug" : "primary-300",
"color" : "#90cdf4",
"name" : "Primary: 300"
},
{
"slug" : "primary-200",
"color" : "#bee3f8",
"name" : "Primary: 200"
},
{
"slug" : "primary-100",
"color" : "#ebf8ff",
"name" : "Primary: 100"
},
{
"slug" : "secondary-900",
"color" : "#44337a",
"name" : "Secondary: 900"
},
{
"slug" : "secondary-800",
"color" : "#553c9a",
"name" : "Secondary: 800"
},
{
"slug" : "secondary-700",
"color" : "#6b46c1",
"name" : "Secondary: 700"
},
{
"slug" : "secondary-600",
"color" : "#805ad5",
"name" : "Secondary: 600"
},
{
"slug" : "secondary-500",
"color" : "#9f7aea",
"name" : "Secondary: 500"
},
{
"slug" : "secondary-400",
"color" : "#b794f4",
"name" : "Secondary: 400"
},
{
"slug" : "secondary-300",
"color" : "#d6bcfa",
"name" : "Secondary: 300"
},
{
"slug" : "secondary-200",
"color" : "#e9d8fd",
"name" : "Secondary: 200"
},
{
"slug" : "secondary-100",
"color" : "#faf5ff",
"name" : "Secondary: 100"
}
]
}
}
}
}
@seothemes
Copy link

@justintadlock I ended up with exactly the same naming scheme as this. I feel like it's the best system for frameworks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment