name: rigor-co-design
version: alpha
description: >
  A Swiss-International-Style brand-consultancy site on a warm paper surface
  (#F4F1E8) with near-black ink (#151412) and a single signal red (#C82020).
  Built entirely in Archivo (display + body) and Archivo Narrow (uppercase
  meta labels), it leans on a visible 12-column / 8px-baseline grid, oversized
  display headlines (up to 140px), 2px ink rules between sections, and zero
  rounded corners. The signature moves are clip-path wipe reveals, a velocity-
  driven page skew on scroll, and case-study rows that flood with ink and slide
  an image in on hover.
colors:
  # Surface
  paper: '#F4F1E8'        # page background; also .bg-white and inverted text on ink
  ink: '#151412'          # near-black; body text, rules, inverted section bg (.bg-black)
  # Brand / Signal
  red: '#C82020'          # single accent: links, numerals, outcomes, dots
  # Text
  gray: '#9A9890'         # muted meta labels, captions, secondary copy
  # Hairlines
  hairline: 'rgba(21,20,18,0.15)'   # .hairline soft borders
  rule-light: 'rgba(154,152,144,0.30)'  # #9A9890/30 dividers inside ink sections
  # Grid guides
  guide-strong: 'rgba(154,152,144,0.18)'  # vertical column guides (12 cols)
  guide-soft: 'rgba(154,152,144,0.12)'    # horizontal 88px baseline guides
typography:
  display:
    fontFamily: "'Archivo','Helvetica Neue',Arial,sans-serif"
    fontSize: clamp(40px, 5.5vw, 140px)
    fontWeight: 700
    lineHeight: 0.9
    letterSpacing: -0.035em
  display-regular:
    fontFamily: "'Archivo','Helvetica Neue',Arial,sans-serif"
    fontSize: 84px
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.035em
  meta:
    fontFamily: "'Archivo Narrow','Archivo',sans-serif"
    fontSize: 12px
    fontWeight: 500
    lineHeight: 16px
    letterSpacing: 0.08em
    textTransform: uppercase
  body:
    fontFamily: "'Archivo',sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 22px
rounded:                  # brutalist: everything square except the dot
  none: 0px
  full: 9999px            # only the 10px float-dot
spacing:                  # base unit 4px; 8px baseline; section rhythm in larger steps
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 88px               # baseline-grid row height
components:
  nav-link:
    textColor: '{colors.ink}'
    typography: '{typography.meta}'
    rounded: '{rounded.none}'
    # animated 1px underline grows left→right on hover via .under-link::after
  nav-link-cta:
    textColor: '{colors.red}'
    typography: '{typography.meta}'
    # "Enquire ↗" — red variant of nav-link
  case-row:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    padding: 'py-10 px-10'
    # 2px ink bottom border; on hover an ink .bg-fill wipes in (clip-path .5s)
    # and text inverts to paper, with a reveal image sliding in from the right
  case-feature:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.paper}'
    typography: '{typography.display}'
    padding: 'py-14 px-10'
    # featured commission card: inverted ink panel, red meta + outcome
  team-card:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.display}'
    rounded: '{rounded.none}'
    # grayscale image (wipe-team clip-path reveal) + name/role/meta block
  float-dot:
    backgroundColor: '{colors.red}'
    rounded: '{rounded.full}'
    # 10px (8px in team header) red circle, the one curved element
  section-rule:
    # 2px or 4px solid {colors.ink} borders dividing every section
motion:
  mask-wipe: 'Intro overlay (#F4F1E8) scaleX 1→0 from right, 1.0s power3.inOut'
  line-reveal: 'Headline lines translateY 110%→0%, 0.9s stagger 0.12 power3.out'
  hero-img-wipe: 'Hero images clip-path inset 100%→0, 0.9s stagger 0.18 power2.inOut'
  parallax: 'data-scroll-speed hero images, y up to -120*speed, scrub (GSAP)'
  case-batch: 'Rows fade+rise (autoAlpha 0→1, y 32→0) on scroll, stagger 0.08'
  case-hover: 'anime.js clip-path reveal of side image, 600ms outQuart in / 400ms inQuart out; ink bg-fill wipes via CSS .5s cubic-bezier(.7,0,.2,1)'
  team-wipe: 'wipe-team clip-path inset 100%→0 on scroll, 1.0s stagger 0.12 power3.inOut'
  skew: 'Scroll velocity sets --skew (-3deg..3deg); .principle blocks skewY'
  float-dot: 'translateY -3..3, 1800ms alternate loop inOutSine'
  smooth-scroll: 'Lenis smooth wheel, duration 1.2'
icons:
  library: inline unicode glyphs (no icon font)
  style: text arrows
  glyphs: { external: '↗', down: '↓', up: '↑', section: '§', numero: 'N°' }
  color: '{colors.red}'

Nonacceptance & Co. (rigor-co)

rigor-co-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

A textbook Swiss / International-Typographic-Style brand consultancy, rendered as a single warm-paper page. The surface is #F4F1E8 (a paper / off-white), the ink is #151412 (a warm near-black), and the entire color story turns on one signal #C82020 red used for numerals, links, and outcomes. There is no second accent and no rounded geometry — every corner is square, every section is divided by a 2px (sometimes 4px) solid ink rule, and a faint 12-column / 88px-baseline grid is literally drawn behind the hero. Typography is the design: Archivo carries both the colossal display headlines (84px hero, up to 140px "Silence Between.") and the 15px body, while condensed Archivo Narrow handles every uppercase meta label at 12px with 0.08em tracking. Display is squeezed (font-stretch:90%, letter-spacing:-0.035em, line-height:0.9). The signatures are kinetic but disciplined: a full-screen paper mask wipes off on load, headline lines rise out of masks, hero images clip-wipe in with parallax, scroll velocity skews the principle blocks up to ±3°, and case-study rows flood with ink while sliding a photo in from the right on hover.

Colors

Surface. paper #F4F1E8 is the page background (also aliased .bg-white) and becomes the text/element color when sitting on ink. ink #151412 is the warm near-black used for body text, all section rules, and as the inverted background of the Approach section, the featured case card, and case rows on hover (.bg-black). Brand / Signal. red #C82020 is the lone accent — nav "Enquire ↗", every N°/figure numeral that matters, outcome figures (+45% Brand Retention), the .float-dot, and meta labels like "Featured commission". Text. gray #9A9890 is the muted tone for meta labels, captions ("Fig. 01"), and secondary paragraph copy inside ink sections. Hairlines. hairline rgba(21,20,18,0.15) softens the header and team dividers; rule-light rgba(154,152,144,0.30) (#9A9890/30) divides blocks inside the dark Approach section. Grid guides. guide-strong rgba(154,152,144,0.18) draws the 12 vertical column lines and guide-soft rgba(154,152,144,0.12) the horizontal 88px baseline lines in the hero .grid-guides layer.

Typography

Two families, both from a single Google Fonts import: Archivo (400/500/700/800) for display and body, and Archivo Narrow (400/500) for condensed meta labels. The system fallback is 'Helvetica Neue', Arial — fitting, since the footer declares it is "Set in Helvetica Neue & Univers." Display uses font-stretch:90%, letter-spacing:-0.035em, and line-height:0.9 to pack the big type tightly.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(40–140px)	700	0.9	-0.035em	Section/case/principle headlines
display-regular	84px	400	0.9	-0.035em	Hero wordmark first line ("Nonacceptance")
meta	12px	500	16px	0.08em	Uppercase labels, nav, captions, numerals
body	15px	400	22px	0	Paragraph copy, addresses, descriptions

Notable inline sizes: hero 84px, case rows 64px, featured case clamp(48px,5.5vw,80px), principles 120/88/72/56/40px up to the 140px "Silence Between." finale, team feature names 96px, stat figures 40px.

Layout

Base unit 4px with an explicit 8px baseline (the hero caption literally states "12 columns / 2:1 gutter / 8px baseline"; guides repeat every 88px). Every section is a max-w-[1440px] container with px-10 gutters laid on a grid-cols-12 gap-x-6. The hero splits 5/7: a left name + intro + two stat figures, a right cascade of three offset, grayscale parallax images each captioned Fig. 0n. Case studies are one inverted feature card followed by tall full-width hover rows. Approach is an asymmetric scatter of six numbered principles on the ink panel, deliberately offset with col-start-* and pt-*. Team is one 6/6 feature principal plus a 4/4/4 trio of grayscale cards. The whole page is structured by heavy ink rules rather than boxes; whitespace ("the loudest interval") is a stated design value.

Elevation & Depth

Flat. There are no box-shadows and no glass. Depth comes entirely from (1) the ink/paper figure-ground inversion of whole sections, (2) 2px / 4px solid ink rules and thin hairlines separating bands, and (3) motion-based layering — parallax image speeds, clip-path wipes, and the hover ink-flood with a z-indexed reveal image. Grayscale photography keeps imagery recessive against the type.

Shapes

Brutalist-Swiss: radius is 0 everywhere. Images, cards, sections, and rules are all hard-cornered. The single exception is the .float-dot — a border-radius:50% (rounded.full) red circle, 10px in the header and 8px in the team byline, used as a punctuating bullet.

Components

• nav-link — no fill, ink text, meta type; animated 1px currentColor underline grows left→right on hover (.under-link::after scaleX 0→1).
• nav-link-cta — same, in red, label "Enquire ↗".
• case-row — paper bg, ink text, 2px ink bottom border; on hover an absolute ink .bg-fill clip-wipes across (0.5s), text inverts to paper, meta turns red/gray, and a 280×180 reveal image slides in from the right.
• case-feature — full-width inverted ink panel, paper text, red meta/outcome; grayscale 420px image on the right with a plate caption.
• team-card — grayscale image (clip-path wipe-team reveal) above a name (20px display bold), gray role/meta, and an index numeral (002–004).
• float-dot — 10/8px red circle, the only round element.
• section-rule — 2px (or 4px at the footer base) solid #151412 dividers.

Motion

GSAP + ScrollTrigger, anime.js, and Lenis smooth scroll drive everything. On load a paper #mask-wipe overlay scales out from the right (1.0s power3.inOut), then headline .line-inner masks rise (translateY 110%→0, stagger 0.12), then hero images clip-wipe in (stagger 0.18). Hero images parallax by data-scroll-speed. Case rows batch-reveal (fade + 32px rise) and, on hover, an anime.js clip-path sweeps the side image in (600ms outQuart) while the CSS ink fill floods (0.5s cubic-bezier(.7,0,.2,1)). Team images wipe up on scroll (1.0s stagger 0.12). The hallmark touch: scroll velocity writes --skew (clamped ±3°) onto the principle blocks via skewY, and a small dot floats ±3px on an 1800ms loop.

Iconography

No icon font or SVG library — iconography is pure typographic glyphs: ↗ for external/enquiry links, ↓/↑ for scroll and return-to-top, § for section markers, and N° for numbering. Accent glyphs (links, arrows) take red; structural glyphs sit in gray.

Do's and Don'ts

• Do keep the palette to paper, ink, one red, and gray — red is a signal, not decoration.
• Do divide sections with solid ink rules and keep everything hard-cornered.
• Do set display in Archivo with tight -0.035em tracking, 0.9 line-height, and font-stretch:90%; set all labels in uppercase Archivo Narrow at 0.08em.
• Do lean on the visible 12-column / 8px-baseline grid and generous whitespace.
• Don't add rounded corners, shadows, glass, or gradients (the dot is the only curve).
• Don't introduce a second accent color or colorize photography — images stay grayscale.
• Don't over-skew or animate without scroll context; motion is velocity- and scroll-driven, never gratuitous.

Known Gaps

• Spacing tokens (xs–xxl) are inferred from the 4px/8px-baseline system and the Tailwind utilities actually used (px-10, gap-x-6, py-10/14, 88px guides); no formal scale is declared in the source.
• The clamp(40px,5.5vw,140px) display token is a span over the many discrete inline font-size values (40/56/64/72/84/88/96/120/140px) rather than a single declared rule.
• Fonts load from the bundled Google Fonts @import; the footer's named faces (Helvetica Neue / Univers) are flavor text, with Archivo as the real face.