Brand System
Logo
The production site logo is served from:
/wp-content/uploads/2025/08/cropped-id86.net-logo.png
Dimensions: 295×69 px. Used in the site header and the subscription bar card.
Rules:
- Use
alt="ID86"in image tags. - Do not reuse the legacy GP Personale artwork that remains in the old footer content.
- The subscription bar displays the logo at 180px wide (desktop) and 140px (mobile).
- The site icon (favicon) is at
uploads/2025/08/cropped-id86.net-icon-logo-3.png.
Core Colors
The child theme defines five brand tokens as CSS custom properties on :root.
| Token | Value | Usage |
|---|---|---:|---|
| --id86-navy | #14326c | Primary dark text, heading color, hover states |
| --id86-blue | #2273bf | Primary action color, links, buttons |
| --id86-sky | #2597d5 | Lighter interaction accent, focus rings |
| --id86-ink | #0b2149 | Body text, deep background for hero gradients |
| --id86-mist | #eef7fc | Light section background for topic cards and subscribe bar |
Additional derived values:
- Hero gradient:
radial-gradient(circle at 15% 15%, rgba(37,151,213,.35), transparent 32%), linear-gradient(120deg, #0b2149 0%, #14326c 52%, #2273bf 100%) - Link color:
var(--id86-blue)withvar(--id86-sky)on hover/focus. - Directory section background:
linear-gradient(135deg, #0b2149, #14326c).
Typography
| Element | Font | Weight | Size (desktop) |
|---|---|---|---|
| Body | Inter | 400 | 16px / 1.5 |
| H1 (page) | Inter | 700 | 26px / 34px |
| H1 (hero) | Inter | 500 | clamp(1.45rem, 2.4vw, 2.1rem) |
| H2 | Inter | 700 | clamp(1.65rem, 3vw, 2.45rem) |
| H3 | Inter | 700 | 18–20px range |
| Navigation | Inter | 400 | 16px |
| Code blocks | Inherit | — | 14–15px range |
| Sheet meta | Inter | 800 (uppercase) | .75rem |
Font loading: Inter from Google Fonts via GeneratePress settings and the child theme.
Spacing System
Homepage uses clamp() values for fluid spacing:
| Element | Desktop | Mobile |
|---|---|---|
| Section padding Y | clamp(56px, 7vw, 88px) | 52px |
| Hero padding Y | clamp(40px, 6vh, 68px) top / clamp(88px, 14vh, 136px) bottom | 36px / 72px |
| Section horizontal gutter | clamp(18px, 3.5vw, 32px) | 18px |
| Card grid gap | clamp(14px, 2vw, 22px) | 16px |
| Section heading bottom margin | clamp(24px, 3vw, 36px) | 22px |
| Card padding | clamp(21px, 2.5vw, 30px) | 25px |
Responsive Grid Breakpoints
| Viewport | Topic cards | Reference sheets |
|---|---|---|
| > 960px | 4 columns | 3 columns |
| 601–960px | 2 columns | 2 columns |
| ≤ 600px | 1 column | 1 column |
Grids use minmax(0, 1fr) to prevent overflow. All grid children have min-width: 0.
Component Layout Rules
- The hero should always occupy at least
calc(100svh - 78px)on desktop,calc(100svh - 64px)on mobile. - No secondary CTA should appear above the search field.
- Topic cards have a 4px colored top border matching their category color.
- Sheet cards must have a minimum height of
clamp(230px, 25vw, 270px). - Interactive controls must be at least 48px tall on mobile.
- Use
box-sizing: border-boxon all form elements to prevent overflow.