peecos — Visual Design Guide

The visual identity of peecos and the PIOS framework — logo, typography, color, and component conventions. Derived from peecos.org, which is the reference implementation of this identity.

Use this guide for anything carrying the peecos, PIOS, Core, or Cotton name: documents, slides, diagrams, renders of the master documentation, and future sites or tools.

Identity in one paragraph

peecos looks like a printed editorial artifact, not a software product: pure white paper, near-black ink, no color at all, oversized serif display type, hairline rules, a strict 12-column grid, and tiny wide-tracked monospace labels. The identity is monochrome by principle — the person's information is the content; the frame stays silent. Where Entity Core (the EIOS sibling) is warm parchment with a teal accent, peecos is stark black-on-white.

Logo

Asset	File
Primary mark (WebP)	assets/peecos-logo.webp

Usage

• The wordmark is peecos, always lowercase, set in Fraunces.
• Keep clear space of at least 25% of the mark's width on all sides.
• Monochrome identity: the mark appears in ink on paper, or reversed (paper on ink) on the inverted footer band. Never recolored.
• Do not outline, rotate, add effects to, or place the mark on busy backgrounds.

Typography

Three families, loaded from Google Fonts. Type does the work color would normally do.

Role	Family	Weights	Used for
Display (signature)	Fraunces (variable optical size 9–144)	300, 400, 500	Headlines, the wordmark, section titles — set big
Sans	Inter	300, 400, 500, 600	Body text, UI
Mono	JetBrains Mono	300, 400, 500	Labels, kickers, numbering, metadata, code

Conventions

• Display scale is the identity. Hero headlines run to clamp(3.25rem, 11vw, 9.5rem) with leading as tight as 0.88 and tracking -0.04em. Section titles are Fraunces at 2xl–4xl, tracking tight. Fraunces uses optical sizing (font-optical-sizing: auto).
• Body: Inter 300–400, relaxed leading, 15–16px, often at 75–80% ink opacity for secondary prose.
• Micro-labels (signature element): JetBrains Mono, 10–11px, uppercase, letter-spacing 0.18em–0.22em, muted gray. Used as kickers, column headers, footer text, and index numbering.
• Body font features: ss01, cv11; antialiased.
• Sentence case for prose; the uppercase register belongs exclusively to mono micro-labels.

display: 'Fraunces', 'Times New Roman', serif
sans:    'Inter', system-ui, -apple-system, sans-serif
mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace

Color

The palette is monochrome: white paper, near-black ink, and grays. There is no accent color — hierarchy comes from type scale, weight, opacity, and rules. Colors are defined in HSL (canonical); hex equivalents provided.

Token	HSL	Hex	Use
paper / background	0 0% 100%	#FFFFFF	Page background — pure white
ink / foreground / primary	0 0% 6%	#0F0F0F	Text, the inverted footer band
muted-foreground	0 0% 40%	#666666	Micro-labels, secondary text
secondary / muted	0 0% 96%	#F5F5F5	Quiet fills
accent	0 0% 92%	#EBEBEB	Hover fills (still gray — "accent" is structural, not colorful)
border / input	0 0% 88%	#E0E0E0	Standard borders
hairline	0 0% 82%	#D1D1D1	Signature dividers and grid lines
destructive	0 84.2% 60.2%	#EF4444	Errors only — the single permitted color

Rules

• No brand accent color. Do not introduce one in peecos/PIOS materials; emphasis is typographic.
• Ink opacity steps (100% / 80% / 75% / 60%) create prose hierarchy instead of extra grays.
• One inverted surface: the footer band is ink with paper text (and 60%-opacity mono labels).
• Light theme only — the identity is paper.

Layout and components

• Grid: a visible 12-column grid (grid-cols-12, 1rem gaps); content frequently offset (e.g., body copy starting at column 6). Layout asymmetry is part of the look.
• Radius: base 0.125rem (2px) — corners are effectively square. Nothing bubbly.
• Signature patterns:
  • Hairline everything — sections separated by 1px hairline rules; index-style rows (border-b hairline, baseline-aligned) instead of cards.
  • Hairline cell grids — gap-px grids over a hairline background, so cells read as a ruled table.
  • Micro-label + display pair — a tiny uppercase mono kicker above a large Fraunces headline; the peecos equivalent of Entity Core's eyebrow.
  • Baseline rows — definition-list layouts: mono label in one column, Fraunces term, Inter description, all sharing a baseline.
  • Inverted footer — full-width ink band closing every page.
• Buttons and links: quiet — text links and bordered rectangles; hover shifts opacity or a gray fill, never color.
• Diagrams: ruled boxes, mono labels, black on white. No fills, no color coding; vary line weight and type instead.

Voice (visual copy conventions)

• Lowercase brand: always peecos, never "Peecos".
• Editorial and declarative; reads like a manifesto or a well-set book, not a product page.
• Uppercase only in mono micro-labels. Headlines are sentence case Fraunces.

Relationship to the Entity Core identity

Entity Core (EIOS, the entity-scale sibling framework) has its own independent identity: warm parchment, slate-blue ink, teal accent, Inter + IBM Plex Mono. The two identities are deliberately distinct — shared DNA shows in the shared discipline (hairlines, mono labels, restraint), not shared colors. Do not mix the palettes.

Files and canonical source

What	Where
This guide	github.com/peecos/brand (canonical)
Logo	assets/peecos-logo.webp
Live token definitions	src/index.css and tailwind.config.ts in the peecos-web repository

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

License

© 2026 Valto Loikkanen / peecos. This guide is licensed CC BY 4.0 with attribution to Valto Loikkanen / peecos. The peecos and PIOS names and logos identify the project — use them for accurate reference, not to imply endorsement (see the pios repository's TRADEMARKS.md).

Contact: valto@valtoai.com