Layers
Goldilocks-CSS is designed to allow customization of the theme through the use of layers. Layers are used to set the initial theme settings and can be extended to use custom settings. Goldilocks-CSS uses six layers to control the page decoration. The layer order is base, elements, extended, extras, layout and custom:
- Base: sets up global variables, theme, core HTML resets and helpers (colours, positioning, spacing, etc.;
- Elements: controls typography, buttons forms, tables, images and other common items;
- Extended: defines elements such as badges and avatars as well as common components such as accordians, breadcrumbs, cards and navigation;
- Extras: defines additional elements (progress bars, ribbons and tooltips) and components (modals, popovers, carousal and charts);
- Layout: defines page layout, grids, sections and other semantic tags (note that layout has a higher priority to stop any interference from item control);
- Custom: for the designer to override any settings or to add their own values.
Initial Variables with Default Settings
File initial-core-variables.css contains the CSS variables that drive all the elements and components.
:root {
/* version 1.0.0 - April 7, 2026 */
/* awareness variables - for info only */
/** typically (and sadly) @media does not support variables; so we need to hard code the mobile breakpoint **/
/** files affected: gridbox.css, level.css, page.css, pagination.css, blockquote.css, navbar.css, sidebar.css, image.css, media.css **/
--mobile-breakpoint: 576px; /* or 36rem at 16px base size */
/* Base measurement unit to be used for font, margins and padding */
/* changing the base html factor allows a user to change the font sizes to meet accessibility needs */
--base-html-factor: 100%;
--base-rem: 1rem;
/* Typography */
/** Note: text colors are set in file: initial-colors.css **/
/** Default is to use system fonts as much as possible **/
--family-sans-serif: "Tahoma", "Helvetica Neue", "Helvetica", "Arial", "Segoe UI", "Roboto";
--family-serif: "Georgia", "Times New Roman";
--family-monospace: monospace;
--render-mode: optimizeLegibility;
/** Define font weights here **/
--weight-light: 300;
--weight-normal: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/** note: adjustable typography is set in the file: typography.css **/
--base-font-size: var(--base-rem);
/** Text line heights to match size **/
--line-height-125: 125%;
--line-height-150: 150%;
--line-height-175: 175%;
--line-height-200: 200%;
/** Sizing pattern - typically for text **/
/*** typical factors: (see https://typescale.com)
1.125 (Major Second) - A balanced choice for most UI designs.
1.2 (Minor Third) - Suitable for more information-dense UI designs.
1.25 (Major Third) - A very popular choice that provides enough distinction between heading levels.
1.333 (Perfect Fourth) - Offers a slightly larger, more dramatic scale.
***/
--size-factor: 1.125;
--size-7: calc( var(--base-font-size) * 0.875 ); /* Example 1.125 scale factor: --size-7 = 0.875rem; */
--size-6: var(--base-font-size); /* Example 1.125 scale factor: --size-6 = 1 rem; */
--size-5: calc( var(--size-6) * var(--size-factor) ); /* Example 1.125 scale factor: --size-5 = 1.13rem; */
--size-4: calc( var(--size-5) * var(--size-factor) ); /* Example 1.125 scale factor: --size-4 = 1.27rem; */
--size-3: calc( var(--size-4) * var(--size-factor) ); /* Example 1.125 scale factor: --size-3 = 1.42rem; */
--size-2: calc( var(--size-3) * var(--size-factor) ); /* Example 1.125 scale factor: --size-2 = 1.6rem; */
--size-1: calc( var(--size-2) * var(--size-factor) ); /* Example 1.125 scale factor: --size-1 = 1.8rem; */
/* Grid Key Variables */
--gutter: calc(3 * var(--base-rem)); /** grid column gutter **/
--grid-min-px-width: 100px; /** minimum absolute column width in a grid layout **/
--grid-min-width: calc(5 * var(--base-font-size)); /** minimum relative column width in a grid layout **/
/* basic spacing values */
/* based on https://medium.com/user-experience-design-1/ui-cheat-sheet-spacing-friendships-e37a6fccc407*/
--space-element: var(--base-rem);
--space-block: calc(2 * var(--base-rem));
--space-collection: calc(4 * var(--base-rem));
--space-container: calc(5 * var(--base-rem));
/* Flexbox element spacing */
--gap-row: calc( 0.75 * var(--base-font-size) );
--gap-col: calc( 0.75 * var(--base-font-size) );
/* Elements Controls */
--pad-horz: var(--base-font-size);
--pad-vert: calc( 0.5 * var(--base-font-size) );
--pad-horz-small: calc( 0.5 * var(--base-font-size) );
--pad-vert-small: calc( 0.25 * var(--base-font-size) );
--padding: calc(0.75 * var(--base-font-size));
--padding-normal: var(--base-font-size);
--padding-medium: calc( 1.5 * var(--base-font-size) );
--padding-large: calc( 3 * var(--base-font-size) );
--mar-horz: calc( 0.5 * var(--base-font-size) );
--mar-vert: calc( 0.5 * var(--base-font-size) );
--margin: var(--base-font-size);
--margin-form: calc(1.5 * var(--base-font-size));
--margin-medium: calc(3 * var(--base-font-size));
--margin-large: calc(5 * var(--base-font-size));
/* Component Controls */
--radius: calc(0.5 * var(--base-font-size));
--radius-small: calc(0.5 * var(--radius));
--radius-comp: calc(1 * var(--radius));
--radius-elem: calc(1.5 * var(--radius));
--radius-rounded: 10000px;
/* Navbar settings */
--navbar-height: calc(4 * var(--base-font-size));
--navbar-offset: 0;
--navbar-z: 30; /* z-index to ensure that navbar gets priority */
/* Widgetbar settings */
--widgetbar-height: calc(2 * var(--base-font-size) + 0.75rem);
--widget-z: 30; /* z-index to ensure that navbar gets priority */
/* Breadcrumb setting */
/* other options are: arrow-separator = ">", bullet-separator = "\02022" or quote-separator = "\BB" */
--breadcrumb-separator: "/";
/* magazine normal width */
--magazine-width: 40ch;
/* carousel image height */
--carousel-image-height: calc(8 * var(--base-font-size));
--carousel-image-width: calc( 4 / 3 * 8 * var(--base-font-size)); /* aspect ratio of image */
/* uri encoded icon for select and dropdown - chevron down and initially set to primary color */
--indicator: url("data:image/svg+xml;charset=utf8,\
%3Csvg%20xmlns='http://www.w3.org/2000/svg'\
%20viewBox='0%200%2024%2024'%20\
fill='none'%20stroke='currentColor'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E\
%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E\
%3C/svg%3E");
--indicator-down: url("data:image/svg+xml;charset=utf8,\
%3Csvg%20xmlns='http://www.w3.org/2000/svg'\
%20viewBox='0%200%2024%2024'%20\
%20width='24'%20height='24'%20\
fill='none'%20stroke='currentColor'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%20\
%3Cpolyline%20points='6%209%2012%2015%2018%209'/%3E\
%3C/svg%3E");
--indicator-up: url("data:image/svg+xml;charset=utf8,\
%3Csvg%20xmlns='http://www.w3.org/2000/svg'\
%20viewBox='0%200%2024%2024'%20\
%20width='24'%20height='24'%20\
fill='none'%20stroke='currentColor'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%20\
%3Cpolyline%20points='18%2015%2012%209%206%2015'/%3E\
%3C/svg%3E");
--indicator-right: url("data:image/svg+xml;charset=utf8,\
%3Csvg%20xmlns='http://www.w3.org/2000/svg'\
%20viewBox='0%200%2024%2024'%20\
%20width='24'%20height='24'%20\
fill='none'%20stroke='currentColor'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%20\
%3Cpolyline%20points='9%2018%2015%2012%209%206'/%3E\
%3C/svg%3E");
}
Initial Colour Settings with Default Settings
File initial-colors.css contains the CSS variables that drive all colour choices for light / day theme.
/* initial-theme-colors.css */
:root {
/** main colour theme definitions generated by Claude Sonnet 4.6 Adaptive **/
/*** primary - Violet Indigo ***/
--p-50: oklch(97.5% 0.010 262);
--p-100: oklch(94.0% 0.028 262);
--p-200: oklch(87.5% 0.068 262);
--p-300: oklch(75.8% 0.118 262);
--p-400: oklch(63.0% 0.172 262);
--p-500: oklch(51.5% 0.210 262);
--p-600: oklch(42.2% 0.220 262);
--p-700: oklch(32.2% 0.192 262);
--p-800: oklch(22.2% 0.152 262);
--p-900: oklch(14.0% 0.108 262);
--p-950: oklch(8.5% 0.070 262);
/*** secondary - blue teal ***/
--s-50: oklch(97.5% 0.014 182);
--s-100: oklch(93.8% 0.035 182);
--s-200: oklch(87.2% 0.082 182);
--s-300: oklch(75.8% 0.138 182);
--s-400: oklch(62.8% 0.185 182);
--s-500: oklch(50.5% 0.205 182);
--s-600: oklch(40.8% 0.210 182);
--s-700: oklch(31.0% 0.182 182);
--s-800: oklch(21.5% 0.140 182);
--s-900: oklch(13.8% 0.098 182);
--s-950: oklch(8.2% 0.062 182);
/*** complementary - amber orange ***/
--c-50: oklch(97.8% 0.012 45);
--c-100: oklch(94.5% 0.032 45);
--c-200: oklch(88.5% 0.078 45);
--c-300: oklch(79.0% 0.138 45);
--c-400: oklch(67.2% 0.190 45);
--c-500: oklch(55.8% 0.205 45);
--c-600: oklch(45.5% 0.215 45);
--c-700: oklch(35.0% 0.188 45);
--c-800: oklch(24.5% 0.145 45);
--c-900: oklch(15.5% 0.098 45);
/*** grey scale - teal hint ยท near-achromatic ***/
--g-0: oklch(100.0% 0.000 0);
--g-50: oklch(98.5% 0.005 182);
--g-100: oklch(95.8% 0.008 182);
--g-200: oklch(91.2% 0.012 182);
--g-300: oklch(82.0% 0.013 182);
--g-400: oklch(66.8% 0.014 182);
--g-500: oklch(52.8% 0.014 182);
--g-600: oklch(40.2% 0.013 182);
--g-700: oklch(29.5% 0.011 182);
--g-800: oklch(19.2% 0.009 182);
--g-900: oklch(11.5% 0.006 182);
--g-950: oklch(6.6% 0.004 182);
--g-1k: oklch(0.0% 0.000 0);
/*** link - cerulean ***/
--lnk-50: oklch(97% 0.015 225);
--lnk-100: oklch(92% 0.040 225);
--lnk-200: oklch(84% 0.080 225);
--lnk-300: oklch(74% 0.120 225);
--lnk-400: oklch(62% 0.180 225);
--lnk-500: oklch(54% 0.210 225);
--lnk-600: oklch(45.5% 0.222 225);
--lnk-700: oklch(38% 0.190 225);
--lnk-800: oklch(30% 0.150 225);
--lnk-900: oklch(22% 0.110 225);
/*** success - vivant pure green ***/
--ok-50: oklch(97.0% 0.018 140);
--ok-100: oklch(92.5% 0.045 140);
--ok-200: oklch(85.0% 0.100 140);
--ok-300: oklch(85.0% 0.133 140);
--ok-400: oklch(74.0% 0.166 140);
--ok-500: oklch(63.0% 0.212 140);
--ok-600: oklch(44.0% 0.220 140);
--ok-700: oklch(34.5% 0.192 140);
--ok-800: oklch(25.0% 0.148 140);
/*** warning - gold yellow ***/
--warn-50: oklch(98.2% 0.020 84);
--warn-100: oklch(94.5% 0.048 84);
--warn-200: oklch(88.5% 0.092 84);
--warn-300: oklch(80.0% 0.142 84);
--warn-400: oklch(78.0% 0.163 84);
--warn-500: oklch(65.0% 0.185 84);
--warn-600: oklch(56.0% 0.180 84);
--warn-700: oklch(47.8% 0.175 84);
--warn-800: oklch(35.5% 0.132 84);
--warn-900: oklch(24.0% 0.112 84);
/*** danger - pure crimson ***/
--err-50: oklch(97.5% 0.016 8);
--err-100: oklch(93.5% 0.042 8);
--err-200: oklch(86.5% 0.092 8);
--err-300: oklch(76.5% 0.133 8);
--err-400: oklch(66.5% 0.174 8);
--err-500: oklch(55.0% 0.225 8);
--err-600: oklch(44.5% 0.230 8);
--err-700: oklch(35.0% 0.200 8);
--err-800: oklch(25.5% 0.158 8);
/*** shadows - whisper of secondary ***/
--sh-sm: 0 1px 2px oklch(40.8% 0.210 182 / 0.08), 0 2px 4px oklch(40.8% 0.210 182 / 0.05), inset 0 1px 0 oklch(100% 0 0 / 0.55);
--sh-md: 0 2px 3px oklch(40.8% 0.210 182 / 0.10), 0 4px 10px oklch(40.8% 0.210 182 / 0.08), inset 0 1px 0 oklch(100% 0 0 / 0.48);
--sh-lg: 0 4px 6px oklch(40.8% 0.210 182 / 0.10), 0 10px 24px oklch(40.8% 0.210 182 / 0.12), inset 0 1px 0 oklch(100% 0 0 / 0.40);
/*** backgrounds - whisper of secondary ***/
--bg-page: oklch(98.8% 0.002 182);
--bg-elevated-1: oklch(98.9% 0.007 182);
--bg-elevated-2: oklch(97.4% 0.012 182);
--bg-elevated-3: oklch(96.6% 0.015 182);
/** end of imported theme colours **/
/** map theme colours into working variables **/
/** adjust for WCAG compliance **/
/** this allows for final tweaking of theme to site display **/
/*** controls for colour adjusts for hover / active state of buttons and other elements ***/
--action-offset: 0.075;
/*** define primary usage variables ***/
--primary: var(--p-600);
--primary-light: var(--p-100);
--primary-dark: var(--p-700);
--primary-darkest: var(--p-800);
--primary-text: var(--p-700);
--primary-text-element: var(--p-700);
--primary-text-invert: var(--p-50);
--primary-hover: oklch(from var(--primary) calc(l + var(--action-offset)) c h);
--primary-active: oklch(from var(--primary) calc(l - var(--action-offset)) c h);
/*** define secondary usage variables ***/
--secondary: var(--s-500);
--secondary-light: var(--s-100);
--secondary-lightest: var(--s-50);
--secondary-dark: var(--s-600);
--secondary-darkest: var(--s-800);
--secondary-text: var(--s-600);
--secondary-text-element: var(--s-600);
--secondary-text-invert: var(--g-50);
--secondary-hover: oklch(from var(--secondary) calc(l + var(--action-offset)) c h);
--secondary-active: oklch(from var(--secondary) calc(l - var(--action-offset)) c h);
/*** define complement / cta usage variables ***/
--complement: var(--c-500);
--complement-light: var(--c-100);
--complement-lightest: var(--c-50);
--complement-dark: var(--c-600);
--complement-darkest: var(--c-800);
--complement-text: var(--c-700);
--complement-text-element: var(--c-700);
--complement-text-invert: var(--c-50);
--complement-hover: oklch(from var(--complement) calc(l + var(--action-offset)) c h);
--complement-active: oklch(from var(--complement) calc(l - var(--action-offset)) c h);
/*** define key link colours ***/
--link: var(--lnk-600);
--link-hover: var(--lnk-700);
--link-visited: oklch(37.5% 0.165 278);
--link-light: var(--lnk-100);
--link-lightest: var(--lnk-50);
--link-dark: var(--lnk-700);
--link-text: var(--lnk-800);
--link-text-element: var(--lnk-800);
--link-text-invert: var(--lnk-50);
/*** define key success colours ***/
--success: var(--ok-500);
--success-light: var(--ok-100);
--success-lightest: var(--ok-50);
--success-dark: var(--ok-600);
--success-darkest: var(--ok-800);
--success-text: var(--ok-700);
--success-text-invert: var(--ok-800);
/*** define key warning colours ***/
--warning: var(--warn-400);
--warning-light: var(--warn-100);
--warning-lightest: var(--warn-50);
--warning-dark: var(--warn-700);
--warning-darkest: var(--warn-900);
--warning-text: var(--warn-700);
--warning-text-invert: var(--warn-800);
--warning-text-invert-dark: var(--warn-50);
/*** define key danger colours ***/
--danger: var(--err-500);
--danger-light: var(--err-100);
--danger-lightest: var(--err-50);
--danger-dark: var(--err-600);
--danger-darkest: var(--err-800);
--danger-text: var(--err-700);
--danger-text-invert: var(--err-50);
--danger-text-invert-dark: var(--err-50);
/*** additional greys ***/
--black: var(--g-950);
--black-850: var(--g-900);
--black-800: var(--g-800);
--black-700: var(--g-700);
--grey-darker: var(--g-600);
--grey-dark: var(--g-500);
--grey: var(--g-400);
--grey-light: var(--g-300);
--grey-lighter: var(--g-200);
--grey-lightest: var(--g-100);
--grey-white: var(--g-50);
--white: var(--g-0);
/*** set the body level colours for light mode ***/
--bg-main: var(--bg-page);
--bg-main-invert: var(--black-850);
--bg-grid: var(--g-100);
--bg-container: var(--bg-elevated-1);
--bg-component: var(--bg-elevated-2);
--bg-element: var(--bg-elevated-3);
--bg-highlight: var(--warning-lightest);
--border-main: var(--grey-light);
--border-main-light: var(--g-100);
--border-main-darker: var(--grey);
--text: var(--black-800);
--text-light: var(--grey-dark);
--text-darker: var(--black);
--text-elem: var(--black-800);
--text-comp: var(--black-800);
--text-btn-invert: var(--g-50);
--text-code: var(--c-700);
/*** Common shadow treatment for containers, components and elements ***/
/*** see https://www.joshwcomeau.com/css/designing-shadows/ ***/
--shadow-container: var(--sh-sm);
--shadow-component: var(--sh-md);
--shadow-element: var(--sh-lg);
/*** other common variables for use in components ***/
--chart-color-start: oklch(from var(--primary) l calc(c + .1) h); /**** brighten primary ****/
--chart-color-offset: 95; /**** helps build 9 other colours ****/
--bq-border: var(--primary); /**** defines blockquote left border ****/
}
Alternate Dark Colour Settings with Default Settings
File initial-dark-theme.css contains the CSS variables that over-ride the default colour choices to provide night / dark mode colour themes.
/* initial-theme-dark.css */
/** main dark theme color definitions / overrides **/
.main-theme-dark {
--black: var(--g-50);
--black-850: var(--g-100);
--black-800: var(--g-200);
--black-700: var(--g-300);
--grey-darker: var(--g-200);
--grey-dark: var(--g-300);
--grey: var(--g-400);
--grey-light: var(--g-500);
--grey-lighter: var(--g-600);
--grey-lightest: var(--g-700);
--grey-white: var(--g-900);
--white: var(--g-1k);
--bg-main: oklch(11.8% 0.022 262);
--bg-main-invert: var(--g-200);
--bg-grid: var(--g-600);
--bg-container: oklch(23.5% 0.028 182);
--bg-component: oklch(27.5% 0.030 182);
--bg-element: oklch(31.5% 0.032 182);
--bg-highlight: var(--warning-darkest);
--link: oklch(64.0% 0.200 225);
--link-visited: oklch(67.5% 0.165 278);
--primary: var(--p-400);
--primary-text: var(--p-400);
--primary-text-invert: var(--p-900);
--secondary: var(--s-400);
--secondary-text: var(--s-400);
--secondary-text-invert: var(--s-900);
--complement: var(--c-400);
--complement-text: var(--c-400);
--complement-text-invert: var(--c-900);
--link-text: var(--lnk-400);
--link-text-invert: var(--lnk-900);
--success-dark: var(--ok-500);
--text: var(--g-100);
--text-light: var(--g-400);
--text-darker: var(--g-50);
--text-elem: var(--g-100);
--text-comp: var(--g-100);
--text-btn-invert: var(--g-950);
--text-code: var(--c-400);
--border-main: var(--g-400);
--border-main-light: var(--g-300);
--border-main-darker: var(--g-500);
--sh-sm: 0 1px 2px oklch(0% 0 0 / .30), 0 2px 4px oklch(0% 0 0 / .20), inset 0 1px 0 oklch(100% 0 0 / .06);
--sh-md: 0 2px 3px oklch(0% 0 0 / .28), 0 4px 10px oklch(0% 0 0 / .28), inset 0 1px 0 oklch(100% 0 0 / .05);
--sh-lg: 0 4px 6px oklch(0% 0 0 / .28), 0 10px 24px oklch(0% 0 0 / .36), inset 0 1px 0 oklch(100% 0 0 / .04);
--chart-color-start: oklch(from var(--primary) l calc(c + .1) h);
}