Entity Core — Visual Design Guide

The visual identity of the Entity Core initiative — logo, typography, color, and component conventions. Derived from entitycore.org, which is the reference implementation of this identity.

Use this guide for anything carrying the Entity Core, EIOS, Keel, or Weave name: documents, slides, diagrams, renders of the specification, and future sites or tools.

Identity in one paragraph

Entity Core looks like a calm technical document, not a startup landing page: warm parchment surfaces, deep slate-blue ink, a restrained teal accent, generous whitespace, hairline borders, and monospace structural labels. The feel is durable, legible, and governed — the same qualities the framework promises.

Logo

The mark is the woven knot — interlocking threads forming one structure, echoing Weave (threads into fabric) and Keel (one durable spine).

Asset	File
Primary mark (1920×1920 PNG, RGBA)	assets/entity-core-logo.png

Usage

• Display sizes on the website: 28px (header), 24px (footer). Keep clear space of at least 25% of the mark's width on all sides.
• The wordmark is set in IBM Plex Mono, lowercase, with a teal interpunct: entity·core. In HTML the interpunct is colored --teal.
• Do not recolor, outline, rotate, add effects to, or place the mark on low-contrast backgrounds.
• The mark doubles as the GitHub organization avatar and the site favicon.

Typography

Two families, loaded from Google Fonts:

Role	Family	Weights	Used for
Sans (primary)	Inter	400, 500, 600, 700	Headings, body text, UI
Mono (structural)	IBM Plex Mono	400, 500	Eyebrows/kickers, labels, pills, numbering, code, the wordmark

Conventions

• Headings: Inter semibold (600), tracking -0.02em, tight leading (1.05–1.1). Hero scale ~text-5xl/6xl, page titles ~text-4xl/5xl, section titles ~text-2xl/3xl.
• Body: Inter 400, relaxed leading, text-base–text-lg; muted-foreground color for secondary prose.
• Inter is loaded with font features cv02, cv03, cv04, cv11 and antialiasing.
• Eyebrow style (signature element): IBM Plex Mono, 0.75rem, uppercase, letter-spacing 0.14em, teal. Every section opens with one.
• Numbered labels (01, 02, …) are IBM Plex Mono, teal, and zero-padded.

font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif
font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace

Color

All colors are defined in oklch (canonical); hex values are provided for tools that need them. The brand is light-theme only — warm parchment surfaces with dark slate ink. Do not present Entity Core surfaces in dark theme.

Surfaces

Token	oklch	Hex	Use
background	oklch(0.985 0.008 85)	#FDFAF4	Page background — warm off-white parchment
card	oklch(0.995 0.005 85)	#FFFDFA	Cards, raised surfaces
secondary	oklch(0.94 0.02 85)	#F1EADC	Hover fills, quiet surfaces
muted	oklch(0.955 0.012 85)	#F4F0E7	Muted fills
sand	oklch(0.92 0.035 80)	#F1E3CB	Tinted bands (page headers, footer), badges
border	oklch(0.9 0.015 85)	#E3DDD3	Hairlines everywhere — 1px, never heavy

Ink

Token	oklch	Hex	Use
ink	oklch(0.18 0.03 250)	#07121E	Display headings
foreground	oklch(0.22 0.03 250)	#101C28	Body text
slate-deep	oklch(0.28 0.05 250)	#142A41	Secondary emphasis, badge text
muted-foreground	oklch(0.48 0.03 250)	#515F6E	Secondary prose, captions

Brand accents

Token	oklch	Hex	Use
primary	oklch(0.32 0.07 250)	#133555	Primary buttons, the dark CTA band; deep slate blue
teal	oklch(0.62 0.09 195)	#339797	The accent: eyebrows, numbering, links, the wordmark interpunct, focus rings
accent	oklch(0.72 0.09 190)	#58B7B1	Soft teal for larger accent fills
destructive	oklch(0.577 0.245 27.325)	#E7000B	Errors only

Rules

• Teal is a seasoning, not a surface: labels, numbers, one-word highlights in headings (text-teal on a key phrase). Never large teal areas.
• The only dark surface is the primary CTA band (white text on deep slate blue).
• Contrast: body ink on parchment ≈ 15:1; keep any new pairing at WCAG AA or better.

Layout and components

• Containers: wide 72rem (site), prose 42rem (documents); 1.5rem inline padding.
• Radius: base 0.375rem (rounded-md buttons/inputs, rounded-lg cards, rounded-full pills).
• Signature patterns:
  • Eyebrow → title → lede — every page and section header follows this order.
  • Hairline lists — rows divided by 1px borders inside a rounded card (docs index, stack table).
  • Numbered feature grids — mono 01-style indices in teal beside short titles.
  • Pills — rounded-full, hairline border, mono text, background or sand fill; used for metadata and statuses.
  • Status badges — uppercase mono 10px, wide tracking, sand fill (Draft, Outline, v1.0).
  • Background grid — subtle 56px line grid at 35% opacity with a radial mask, hero sections only.
  • Dark CTA band — the single primary-colored section inviting participation.
• Buttons: primary = primary fill, white text; secondary = card fill, hairline border; both rounded-md, text-sm medium.
• Diagrams: favor bordered boxes, mono labels, and → arrows over illustration. Flow reads left to right, top to bottom.

Voice (visual copy conventions)

• Sentence case everywhere, including headings and buttons. Uppercase belongs only to mono eyebrows and status badges.
• Short declarative headline, then a muted lede. One idea per section.
• Statements over slogans: "Preserve originals as source of truth", not marketing superlatives.

Files and canonical source

What	Where
This guide	github.com/entity-core/brand (canonical)
Logo	assets/entity-core-logo.png
Live token definitions	src/styles.css in the entitycore.org site repository

If this guide and the website disagree, update whichever is wrong — deliberately, then keep both aligned.

License

© 2026 Valto Loikkanen. This guide is licensed CC BY 4.0 with attribution to Valto Loikkanen / Entity Core. The Entity Core name and logo identify the initiative — use them to refer to Entity Core, not to imply endorsement.

Contact: valto@valtoai.com