A comprehensive reference of the design primitives, assets, and core principles governing the visual identity of ewancroft.uk. Derived from physical precision and technical integrity.
Derived from brand OKLCH hues (140–160°). Neutrals are tinted toward the brand hue (Chroma 0.005–0.01).
Implementation via light-dark() ensures seamless theme transitions based on user OS preference.
--color-ink-*--color-canvas-*--color-primary-*--color-secondary-*--color-accent-*Variable Inter for all prose; JetBrains Mono for technical strings. Modular scale at ratio 1.25,
fluid via clamp().
--text-xl --text-lg --text-md --text-sm --text-xs Scoped under .prose for blog content. All elements are design-token compliant and rely on semantic hierarchy.
Default text flow, 1.75 line-height.
1.25 modular scale, -0.025em tracking.
Primary color, underlined with 35% opacity mix.
JetBrains Mono, accent-600 color, raised background.
Primary-500 left border, italicized text.
GFM style, responsive overflow, alternating row hover.
--space-2xs 2px--space-xs 4px--space-sm 8px--space-3 12px--space-md 16px--space-6 24px--space-lg 32px--space-12 48px--space-xl 64px--space-2xl 96px--radius-xs 4px--radius-sm 6px--radius-md 12px--radius-lg 16px--radius-xl 24px--radius-full 9999px--duration-instant 100ms--duration-fast 200ms--duration-normal 300ms--duration-slow 500ms--ease-out-quart bezier(0.25, 1, 0.5, 1)--ease-out-expo bezier(0.16, 1, 0.3, 1)System icons are implemented as SVG components with a default size of 16px. They inherit currentColor for seamless integration. Pagan symbols use currentColor for stroke (pentacle) or fill (triskele).
Bluesky.sveltePentacle.svelteTriskele.svelteStandard container for technical information and data displays.
"Every element must earn its place on the screen. If it doesn't serve a functional purpose, it is slop."
Three standardized shells constrain content width and manage vertical rhythm. All layouts are responsive and adapt to container widths.
.shell-wideHome, blog, about, projects, meta, brand
.shell-proseBlog posts
.shell-narrowSubscriptions, support
Use precise terminology, cite sources, and explain technical trade-offs.
Use marketing fluff, "revolutionary" buzzwords, or hand-wavy generalizations.
Write from a first-person perspective, share personal findings, and admit uncertainty.
Use the corporate "we" or attempt to sound like an authoritative institution.
Document experiments (even failed ones) and ask open-ended questions.
Present every project as a finished, perfect product.
OKLCH throughout — brand-hue-tinted neutrals (140–160°), no pure black or white, no AI-standard palettes. Every shade is derived and purposeful.
Every gap, padding, and margin derives from the 4pt scale with semantic token names. No magic numbers anywhere in the codebase.
Strict 1.25 modular scale with fluid clamp() sizing. Narrow columns — 65–75ch — and line-height that scales inversely with size.
Motion reserved for state changes only. Transitions are brief and purposeful — never decorative. Respects prefers-reduced-motion.
Absolute ban on AI-typical patterns — no side-stripe borders, no gradient text, no hollow card aesthetics, no generic colour choices.
Core brand assets and dynamic generation endpoints.
;%20}%20.fg%20{%20fill:%20oklch(78.5%25%200.095%20150);%20}%20@media%20(prefers-color-scheme:%20dark)%20{%20.bg%20{%20fill:%20oklch(22%25%200.015%20150);%20}%20}%20%3c/style%3e%3crect%20class='bg'%20width='32'%20height='32'%20rx='7'/%3e%3c!--%20Refined%20E:%20Symmetrical%20bars%20for%20better%20balance%20--%3e%3cpath%20class='fg'%20d='M7%2026V6H25V10H13V14H25V18H13V22H25V26H7Z'/%3e%3c/svg%3e){kind=small}