Skip to content

DESIGN.md

Latest commit

 

History

History
176 lines (154 loc) · 5.75 KB

DESIGN.md

File metadata and controls

176 lines (154 loc) · 5.75 KB
Raw
name Humanizer Documentation
description An editorial working proof sheet for human-friendly .NET APIs.
colors
paper paper-raised ink ink-muted rule accent-teal accent-rust proof-text proof-output promise-teal white promise-text-muted promise-text-soft dark-paper dark-paper-raised dark-ink dark-ink-muted dark-rule dark-accent-teal dark-accent-rust
#f7f3e9
#fffdf7
#172026
#566269
#c9c4b8
#056b84
#ad3e2a
#edf3f2
#91d9e8
#045b6e
#fff
#d7f3f8
#e5f6f9
#11191c
#192327
#edf3f2
#a9b9b9
#3a494d
#63c4d8
#f28b73
typography
docs-display home-display section-heading body label identity lede proof-label proof-code install-code route-heading reference-heading promise-copy
fontFamily fontSize fontWeight
Iowan Old Style, Baskerville, Times New Roman, serif
clamp(2.25rem, 7vw, 4.5rem)
600
fontFamily fontSize fontWeight lineHeight letterSpacing
Avenir Next, Segoe UI, Helvetica Neue, sans-serif
clamp(3rem, 8vw, 6rem)
760
0.98
-0.04em
fontFamily fontSize fontWeight lineHeight letterSpacing
Avenir Next, Segoe UI, Helvetica Neue, sans-serif
clamp(2.3rem, 6vw, 4.75rem)
720
1
-0.04em
fontFamily fontSize lineHeight
Avenir Next, Segoe UI, Helvetica Neue, sans-serif
1rem
1.65
fontFamily fontSize fontWeight letterSpacing
Avenir Next, Segoe UI, Helvetica Neue, sans-serif
0.78rem
800
0.16em
fontSize
0.9rem
fontSize
clamp(1.1rem, 2vw, 1.35rem)
fontSize
0.72rem
fontSize
clamp(0.76rem, 2.4vw, 0.95rem)
fontSize
clamp(0.85rem, 2vw, 1rem)
fontSize
clamp(1.4rem, 3vw, 2rem)
fontSize
1.25rem
fontSize
1.1rem
rounded
square focus
0
0.15rem
spacing
xs sm md lg touch-target home-gutter section-block
0.4rem
0.75rem
1rem
1.5rem
2.75rem
clamp(1rem, 4vw, 4rem)
clamp(5rem, 10vw, 9rem)
components
button-primary button-primary-hover proof-sheet language-promise
backgroundColor textColor typography rounded padding height
{colors.ink}
{colors.paper}
{typography.body}
{rounded.square}
0.65rem 1.1rem
{spacing.touch-target}
backgroundColor textColor rounded
{colors.accent-teal}
#fff
{rounded.square}
backgroundColor textColor rounded padding
{colors.ink}
{colors.proof-text}
{rounded.square}
clamp(1rem, 3vw, 2rem)
backgroundColor textColor rounded padding
{colors.promise-teal}
#fff
{rounded.square}
clamp(2rem, 5vw, 4rem)

Design System: Humanizer Documentation

Overview

The Working Proof Sheet is a cream-paper and ink editorial world where real C# input and output prove the product. The homepage uses forceful sans-serif type; documentation uses an old-style serif for long-form headings. The canonical logo, ruled composition, restrained teal and rust accents, and code-forward examples replace decorative imagery, invented statistics, and card grids.

The system is task-first, editorial, flat, version-visible, and accessible.

Colors

Paper and raised paper form the reading surface. Ink and muted ink carry the content hierarchy. Teal signals navigation or capability; rust labels structure or focus. Neither becomes ambient decoration. Dark mode uses the paired dark tokens rather than inverting arbitrary values.

Typography

Documentation headings use the serif display stack. Body copy, navigation, labels, and the homepage use the sans-serif stack. Homepage display text is tight and heavy; labels are compact and letter-spaced. Reading copy is limited to 72 characters per line.

The Proof-Sheet Split: editorial serif establishes the reference manual while precise sans-serif type identifies controls, tasks, and executable proof.

Layout

The homepage is capped at 90rem with a fluid gutter and generous section spacing. Task routes become a grid at 48rem. Documentation text remains within 72ch. The shell accounts for 360px and 480px phones and the 996px/997px navigation transition. Tables stay contained; historical language coverage keeps its bounded sticky table. Interactive targets are at least 2.75rem high.

Elevation and Depth

The interface is flat: no cards, gradients, or shadows. Paper tones, one-pixel rules, and whitespace establish hierarchy. The navigation boundary is the sole persistent elevation cue.

Ruled-Not-Raised: use a rule or a tone change before introducing visual depth.

Shapes

Buttons, proof sheets, task routes, and promises are square. A 0.15rem radius is reserved for focus treatments and existing shell controls.

Components

  • Primary button: ink on paper, changing to teal on hover.
  • Text link: underlined or rule-led; never disguised as a pill.
  • Proof sheet: dark code surface with distinct output color.
  • Task route: ruled text destination with a clear action.
  • Language promise: teal full-width statement of the localization contract.
  • Navigation: compact, version-visible, and separated by one rule.
  • Supported culture list: readable code list, not a partial-capability matrix.

Do

  • Use deterministic, runnable C# examples.
  • Reuse the canonical Humanizer logo and existing documentation assets.
  • Put the product promise, NuGet install command, and proof in the first viewport.
  • Use one-pixel rules, visible focus, and reduced-motion support.
  • Keep tables contained and use familiar public API names.

Do Not

  • Add card grids, pills, gradients, decorative shadows, or invented imagery.
  • Invent metrics, customers, testimonials, or benchmarks.
  • Use nondeterministic examples or hide keyboard focus.
  • Permit horizontal page scrolling.
  • Present cultures as tiers of partial feature support.