Web Style Guide
Purpose: Keep the KB visually consistent with the main site. Mobile-first. Readable. Minimal fuss.
Baseline tokens (current site)
- Body font: system UI stack
- Body size: 16px
- Line height: 24px
- Text: #333333
- Background: #FFFFFF
To capture next (for perfect matching)
- Heading style (H1/H2 used by Elementor)
- Content link color + hover color
- Button style (radius, border, background)
- Card/tile background + border color
Rules
- Mobile-first always
- No tiny tap targets
- No “mystery styling” (every tweak goes into the KB CSS, not one-off hacks)
CSS Starter Pack
Drop this into Appearance → Customize → Additional CSS.
CSS
/* ===== Douthitt.net KB - baseline theme match (mobile-first) ===== */
/* Adjust selector if your KB wrapper differs */
body .eckb-kb,
body .epkb-kb,
body .eckb-article,
body .epkb-article {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
"Fira Sans", "Droid Sans", "Helvetica Neue", Arial, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 16px;
line-height: 24px;
color: #333333;
background: #ffffff;
}
/* Headings: readable, consistent spacing */
body .eckb-kb h1, body .eckb-kb h2, body .eckb-kb h3,
body .epkb-kb h1, body .epkb-kb h2, body .epkb-kb h3,
body .eckb-article h1, body .eckb-article h2, body .eckb-article h3,
body .epkb-article h1, body .epkb-article h2, body .epkb-article h3 {
color: #111111;
line-height: 1.2;
margin: 0.9em 0 0.4em;
}
/* Links: keep default readable; we’ll set real accent once we capture it */
body .eckb-kb a, body .epkb-kb a,
body .eckb-article a, body .epkb-article a {
text-decoration: underline;
text-underline-offset: 2px;
}
/* Category tiles/cards: comfortable tap targets */
body .eckb-kb .eckb-category,
body .epkb-kb .epkb-category {
border-radius: 14px;
overflow: hidden;
}
/* Mobile spacing */
@media (max-width: 768px) {
body .eckb-kb, body .epkb-kb,
body .eckb-article, body .epkb-article {
font-size: 16px;
line-height: 24px;
}
}
CSS
/* ===== Douthitt.net KB - baseline theme match (mobile-first) ===== */<br />
/* Adjust selector if your KB wrapper differs */<br />
body .eckb-kb,<br />
body .epkb-kb,<br />
body .eckb-article,<br />
body .epkb-article {<br />
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,<br />
"Fira Sans", "Droid Sans", "Helvetica Neue", Arial, "Apple Color Emoji",<br />
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";<br />
font-size: 16px;<br />
line-height: 24px;<br />
color: #333333;<br />
background: #ffffff;<br />
}<br />
/* Headings: readable, consistent spacing */<br />
body .eckb-kb h1, body .eckb-kb h2, body .eckb-kb h3,<br />
body .epkb-kb h1, body .epkb-kb h2, body .epkb-kb h3,<br />
body .eckb-article h1, body .eckb-article h2, body .eckb-article h3,<br />
body .epkb-article h1, body .epkb-article h2, body .epkb-article h3 {<br />
color: #111111;<br />
line-height: 1.2;<br />
margin: 0.9em 0 0.4em;<br />
}<br />
/* Links: keep default readable; we’ll set real accent once we capture it */<br />
body .eckb-kb a, body .epkb-kb a,<br />
body .eckb-article a, body .epkb-article a {<br />
text-decoration: underline;<br />
text-underline-offset: 2px;<br />
}<br />
/* Category tiles/cards: comfortable tap targets */<br />
body .eckb-kb .eckb-category,<br />
body .epkb-kb .epkb-category {<br />
border-radius: 14px;<br />
overflow: hidden;<br />
}<br />
/* Mobile spacing */<br />
@media (max-width: 768px) {<br />
body .eckb-kb, body .epkb-kb,<br />
body .eckb-article, body .epkb-article {<br />
font-size: 16px;<br />
line-height: 24px;<br />
}<br />
}<br />