Library
Assets
Integrate
For developers
Design tokens generated live from this library — always current. Fetch the endpoint at build time, or copy a snippet.
GET https://qid.qualls.co/api/tokens/meridian?format=json|css|tailwind|… copy
GET https://qid.qualls.co/api/brand/meridian — full brand: colours, ramps, type scale, logo URLs copy
Paste the spec into ChatGPT, Claude or any AI tool before asking it to write or design for Meridian — it will use the real palette, type and rules instead of guessing.
/* Meridian — design tokens (QID) */
:root {
--meridian-green: #1F3D2B;
--meridian-green-50: #EDEFEE;
--meridian-green-100: #D7DCD9;
--meridian-green-200: #AEB9B3;
--meridian-green-300: #829288;
--meridian-green-400: #50685A;
--meridian-green-500: #1F3D2B;
--meridian-green-600: #1A3324;
--meridian-green-700: #15291D;
--meridian-green-800: #102016;
--meridian-green-900: #0C1710;
--cream: #F5EFE4;
--cream-50: #FEFEFD;
--cream-100: #FDFCFA;
--cream-200: #FBF9F5;
--cream-300: #F9F6F0;
--cream-400: #F7F3EA;
--cream-500: #F5EFE4;
--cream-600: #CEC9C0;
--cream-700: #A7A39B;
--cream-800: #7F7C77;
--cream-900: #5D5B57;
--roast: #2B1E16;
--roast-50: #EEEDEC;
--roast-100: #D9D7D5;
--roast-200: #B3AEAB;
--roast-300: #88817D;
--roast-400: #5A5049;
--roast-500: #2B1E16;
--roast-600: #241912;
--roast-700: #1D140F;
--roast-800: #16100B;
--roast-900: #100B08;
--amber: #D98F3A;
--amber-50: #FCF6EF;
--amber-100: #F8EBDC;
--amber-200: #F1D7B8;
--amber-300: #EAC091;
--amber-400: #E1A865;
--amber-500: #D98F3A;
--amber-600: #B67831;
--amber-700: #946127;
--amber-800: #714A1E;
--amber-900: #523616;
--clay: #B65C32;
--clay-50: #F9F2EF;
--clay-100: #F2E2DA;
--clay-200: #E5C4B5;
--clay-300: #D6A48C;
--clay-400: #C6805F;
--clay-500: #B65C32;
--clay-600: #994D2A;
--clay-700: #7C3F22;
--clay-800: #5F301A;
--clay-900: #452313;
--morning-sky: #A9C5D3;
--morning-sky-50: #F8FAFB;
--morning-sky-100: #F0F5F7;
--morning-sky-200: #E0EAEF;
--morning-sky-300: #CFDFE6;
--morning-sky-400: #BCD2DD;
--morning-sky-500: #A9C5D3;
--morning-sky-600: #8EA5B1;
--morning-sky-700: #73868F;
--morning-sky-800: #58666E;
--morning-sky-900: #404B50;
--font-heading: 'Fraunces', Georgia, serif;
--font-body: 'Inter', -apple-system, sans-serif;
--text-display: 2.444rem;
--text-h1: 1.956rem;
--text-h2: 1.563rem;
--text-h3: 1.25rem;
--text-body: 1rem;
--text-small: 0.8rem;
--text-caption: 0.638rem;
}
// Meridian — tailwind.config.js excerpt (QID)
module.exports = {
theme: {
extend: {
colors: {
'meridian-green': {
DEFAULT: '#1F3D2B',
50: '#EDEFEE',
100: '#D7DCD9',
200: '#AEB9B3',
300: '#829288',
400: '#50685A',
500: '#1F3D2B',
600: '#1A3324',
700: '#15291D',
800: '#102016',
900: '#0C1710',
},
'cream': {
DEFAULT: '#F5EFE4',
50: '#FEFEFD',
100: '#FDFCFA',
200: '#FBF9F5',
300: '#F9F6F0',
400: '#F7F3EA',
500: '#F5EFE4',
600: '#CEC9C0',
700: '#A7A39B',
800: '#7F7C77',
900: '#5D5B57',
},
'roast': {
DEFAULT: '#2B1E16',
50: '#EEEDEC',
100: '#D9D7D5',
200: '#B3AEAB',
300: '#88817D',
400: '#5A5049',
500: '#2B1E16',
600: '#241912',
700: '#1D140F',
800: '#16100B',
900: '#100B08',
},
'amber': {
DEFAULT: '#D98F3A',
50: '#FCF6EF',
100: '#F8EBDC',
200: '#F1D7B8',
300: '#EAC091',
400: '#E1A865',
500: '#D98F3A',
600: '#B67831',
700: '#946127',
800: '#714A1E',
900: '#523616',
},
'clay': {
DEFAULT: '#B65C32',
50: '#F9F2EF',
100: '#F2E2DA',
200: '#E5C4B5',
300: '#D6A48C',
400: '#C6805F',
500: '#B65C32',
600: '#994D2A',
700: '#7C3F22',
800: '#5F301A',
900: '#452313',
},
'morning-sky': {
DEFAULT: '#A9C5D3',
50: '#F8FAFB',
100: '#F0F5F7',
200: '#E0EAEF',
300: '#CFDFE6',
400: '#BCD2DD',
500: '#A9C5D3',
600: '#8EA5B1',
700: '#73868F',
800: '#58666E',
900: '#404B50',
},
},
fontFamily: {
'heading': ['Fraunces', 'Georgia', 'serif'],
'body': ['Inter', '-apple-system', 'sans-serif'],
},
},
},
}
{
"brand": "Meridian",
"generated": "2026-09-08",
"colors": [
{
"name": "Meridian Green",
"group": "Primary",
"hex": "#1F3D2B",
"rgb": {
"r": 31,
"g": 61,
"b": 43
},
"cmyk": "76 43 74 45",
"pantone": "PMS 5535 C",
"ramp": {
"50": "#EDEFEE",
"100": "#D7DCD9",
"200": "#AEB9B3",
"300": "#829288",
"400": "#50685A",
"500": "#1F3D2B",
"600": "#1A3324",
"700": "#15291D",
"800": "#102016",
"900": "#0C1710"
}
},
{
"name": "Cream",
"group": "Primary",
"hex": "#F5EFE4",
"rgb": {
"r": 245,
"g": 239,
"b": 228
},
"cmyk": "3 4 10 0",
"pantone": "PMS 9224 C",
"ramp": {
"50": "#FEFEFD",
"100": "#FDFCFA",
"200": "#FBF9F5",
"300": "#F9F6F0",
"400": "#F7F3EA",
"500": "#F5EFE4",
"600": "#CEC9C0",
"700": "#A7A39B",
"800": "#7F7C77",
"900": "#5D5B57"
}
},
{
"name": "Roast",
"group": "Primary",
"hex": "#2B1E16",
"rgb": {
"r": 43,
"g": 30,
"b": 22
},
"cmyk": "58 66 74 74",
"pantone": "PMS Black 4 C",
"ramp": {
"50": "#EEEDEC",
"100": "#D9D7D5",
"200": "#B3AEAB",
"300": "#88817D",
"400": "#5A5049",
"500": "#2B1E16",
"600": "#241912",
"700": "#1D140F",
"800": "#16100B",
"900": "#100B08"
}
},
{
"name": "Amber",
"group": "Secondary",
"hex": "#D98F3A",
"rgb": {
"r": 217,
"g": 143,
"b": 58
},
"cmyk": "13 47 89 1",
"pantone": "PMS 143 C",
"ramp": {
"50": "#FCF6EF",
"100": "#F8EBDC",
"200": "#F1D7B8",
"300": "#EAC091",
"400": "#E1A865",
"500": "#D98F3A",
"600": "#B67831",
"700": "#946127",
"800": "#714A1E",
"900": "#523616"
}
},
{
"name": "Clay",
"group": "Secondary",
"hex": "#B65C32",
"rgb": {
"r": 182,
"g": 92,
"b": 50
},
"cmyk": "20 71 91 7",
"pantone": "PMS 7592 C",
"ramp": {
"50": "#F9F2EF",
"100": "#F2E2DA",
"200": "#E5C4B5",
"300": "#D6A48C",
"400": "#C6805F",
"500": "#B65C32",
"600": "#994D2A",
"700": "#7C3F22",
"800": "#5F301A",
"900": "#452313"
}
},
{
"name": "Morning Sky",
"group": "Secondary",
"hex": "#A9C5D3",
"rgb": {
"r": 169,
"g": 197,
"b": 211
},
"cmyk": "34 13 12 0",
"pantone": "PMS 5445 C",
"ramp": {
"50": "#F8FAFB",
"100": "#F0F5F7",
"200": "#E0EAEF",
"300": "#CFDFE6",
"400": "#BCD2DD",
"500": "#A9C5D3",
"600": "#8EA5B1",
"700": "#73868F",
"800": "#58666E",
"900": "#404B50"
}
}
],
"typography": [
{
"name": "Fraunces",
"role": "Heading",
"weights": [
400,
600
],
"stack": "'Fraunces', Georgia, serif"
},
{
"name": "Inter",
"role": "Body",
"weights": [
400,
500,
600
],
"stack": "'Inter', -apple-system, sans-serif"
}
],
"typescale": {
"base": 16,
"ratio": 1.25,
"steps": {
"display": {
"px": 39.1,
"rem": 2.444
},
"h1": {
"px": 31.3,
"rem": 1.956
},
"h2": {
"px": 25,
"rem": 1.563
},
"h3": {
"px": 20,
"rem": 1.25
},
"body": {
"px": 16,
"rem": 1
},
"small": {
"px": 12.8,
"rem": 0.8
},
"caption": {
"px": 10.2,
"rem": 0.638
}
}
}
}
// Meridian — design tokens (QID) $meridian-green: #1F3D2B; $cream: #F5EFE4; $roast: #2B1E16; $amber: #D98F3A; $clay: #B65C32; $morning-sky: #A9C5D3; $font-heading: 'Fraunces', Georgia, serif; $font-body: 'Inter', -apple-system, sans-serif;
// Meridian — brand colors (QID)
import SwiftUI
extension Color {
static let meridianGreen = Color(red: 31/255, green: 61/255, blue: 43/255)
static let cream = Color(red: 245/255, green: 239/255, blue: 228/255)
static let roast = Color(red: 43/255, green: 30/255, blue: 22/255)
static let amber = Color(red: 217/255, green: 143/255, blue: 58/255)
static let clay = Color(red: 182/255, green: 92/255, blue: 50/255)
static let morningSky = Color(red: 169/255, green: 197/255, blue: 211/255)
}
<?xml version="1.0" encoding="utf-8"?>
<!-- Meridian — brand colors (QID) -->
<resources>
<color name="meridian_green">#1F3D2B</color>
<color name="cream">#F5EFE4</color>
<color name="roast">#2B1E16</color>
<color name="amber">#D98F3A</color>
<color name="clay">#B65C32</color>
<color name="morning_sky">#A9C5D3</color>
</resources>
{
"color": {
"brand": {
"meridianGreen": {
"value": "#1F3D2B",
"group": "Primary"
},
"cream": {
"value": "#F5EFE4",
"group": "Primary"
},
"roast": {
"value": "#2B1E16",
"group": "Primary"
},
"amber": {
"value": "#D98F3A",
"group": "Secondary"
},
"clay": {
"value": "#B65C32",
"group": "Secondary"
},
"morningSky": {
"value": "#A9C5D3",
"group": "Secondary"
}
}
},
"font": {
"family": {
"heading": {
"value": "'Fraunces', Georgia, serif"
},
"body": {
"value": "'Inter', -apple-system, sans-serif"
}
}
}
}