name: tenancy-design
version: alpha
description: >
  A manila-paper, brutalist property-ops dashboard ("Super's Clipboard"). The
  surface is a warm manila paper (#E8DDC0) printed with a fine dot-grid texture
  and bounded by a hard 2px ink (#1A1814) frame; every panel is divided by ink
  hairlines rather than shadows. Type is a tri-family system: Bitter slab serif
  for headings, Inter for UI, and JetBrains Mono for every number, label, and
  code-like tag. Three muted "stamp" colors — a green (#3A6A4A paid), an amber
  (#D69E3A due), and an oxblood red (#B43A2A overdue) — carry all status. The
  signature moves are zero-radius rectangles, full-bleed grid splits, monospace
  uppercase micro-labels, a 12-month Gantt lease calendar, pill status stamps,
  and a hard-offset-shadow ⌘K command palette.
colors:
  # Surface
  manila: '#E8DDC0'      # primary paper surface, page bg, light text on ink
  manila-2: '#DED0AD'    # slightly darker manila, section header strips
  ink: '#1A1814'         # near-black ink: frame, rail bg, text, hairlines
  # Text
  text-ink: '#1A1814'    # body + heading text on manila
  text-manila: '#E8DDC0' # text on ink surfaces (rail, footer, status stamps)
  # Semantic (stamp colors)
  green-pd: '#3A6A4A'    # paid / income / positive delta
  amber-mt: '#D69E3A'    # due / in-progress / renewal / maintenance pending
  red-od: '#B43A2A'      # overdue / urgent / expiring / negative
  # Hairlines (alpha over ink)
  hairline: 'rgba(26,24,20,0.15)'   # panel divider lines, gantt grid
  hairline-soft: 'rgba(26,24,20,0.06)' # row hover, paper dot texture
  manila-line: 'rgba(232,221,192,0.20)' # dividers on ink rail
typography:
  display:
    fontFamily: "'Bitter', serif"
    fontSize: 26px
    fontWeight: 600
    lineHeight: 1.0
  display-lg:
    fontFamily: "'Bitter', serif"
    fontSize: 19px
    fontWeight: 600
    letterSpacing: -0.2px
  heading:
    fontFamily: "'Bitter', serif"
    fontSize: 15px
    fontWeight: 600
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 13px
    fontWeight: 500
  mono-label:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 1.8px
    textTransform: uppercase
  mono-data:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 13px
    fontWeight: 400
  mono-metric:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 34px
    fontWeight: 500
    lineHeight: 1.0
rounded:                  # near-zero radius system; only stamps are pills
  none: 0px
  pill: 9999px
spacing:                  # 4px base unit
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 20px
  xxl: 24px
components:
  frame:
    border: '2px solid {colors.ink}'
    backgroundColor: '{colors.manila}'
    rounded: '{rounded.none}'
  rail:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.text-manila}'
    border: '2px solid {colors.ink}'
  stat-cell:
    backgroundColor: '{colors.manila}'
    textColor: '{colors.text-ink}'
    typography: '{typography.mono-metric}'
    border: '1px solid {colors.ink}'   # right-divider per cell
    padding: '16px 20px'
  status-stamp:
    backgroundColor: '{colors.green-pd}'  # or amber-mt / red-od by state
    textColor: '{colors.text-manila}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.pill}'
    padding: '2px 8px'
  button-primary:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.text-manila}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '6px 12px'
  button-ghost:
    backgroundColor: '{colors.manila}'
    textColor: '{colors.text-ink}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    padding: '6px 12px'
  ticket-icon:
    backgroundColor: '{colors.red-od}'   # or amber-mt by severity
    textColor: '{colors.text-manila}'
    border: '1px solid {colors.ink}'
    rounded: '{rounded.none}'
    size: '36px'
  cmdk-palette:
    backgroundColor: '{colors.manila}'
    border: '2px solid {colors.ink}'
    rounded: '{rounded.none}'
    elevation: '10px 10px 0 0 {colors.ink}'   # hard offset shadow
    width: '560px'
  gantt-bar:
    backgroundColor: '{colors.ink}'   # active; amber-mt renewal; red-od expiring
    textColor: '{colors.text-manila}'
    typography: '{typography.mono-label}'
    rounded: '{rounded.none}'
motion:
  row-hover: 'background-color 0.15s; reveals hidden contact line (max-height 0→30px, opacity 0→1) over 0.2s ease'
  pulse-od: 'pulseOd 1.6s ease-in-out infinite — expanding box-shadow ring rgba(180,58,42,0.5)→transparent on overdue/urgent stamps'
  cmdk: 'toggled via display none/flex on ⌘K; no transition'
icons:
  library: Tabler (tabler-icons-webfont, class "ti ti-*")
  style: outline
  sizes: { xs: 8px, sm: 11px, md: 14px, lg: 16px, xl: 18px }
  color: '{colors.ink}'

Tenancy — Super's Clipboard

tenancy-design · alpha

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

Overview

Tenancy is a brutalist, manila-paper property-management dashboard branded "Super's Clipboard" — a landlord's ops console rendered as a printed ledger. The page sits on warm manila paper (#E8DDC0) overprinted with a faint dual dot-grid texture (radial-gradient at 3px and 7px), then enclosed in a hard 2px ink (#1A1814) frame. Inside, a fixed 280px ink-black left rail (the property list) meets a fluid main column, and everything is partitioned by ink hairlines — there are essentially no soft shadows in the layout. The type story is deliberately tri-modal: Bitter slab serif gives every heading a stamped, official weight; Inter handles plain UI text; and JetBrains Mono (tabular numerals) renders every metric, micro-label, ticket id, date, and keycap, which gives the whole thing its receipt-tape character. Color is rationed: beyond ink-and-manila, exactly three muted stamp colors do all semantic work — green #3A6A4A (paid/income), amber #D69E3A (due/in-progress/renewal), and oxblood #B43A2A (overdue/urgent/expiring). The signature moves are zero-radius rectangles everywhere, pill-shaped status "stamps," uppercase letter-spaced mono labels, a 12-column Gantt lease calendar with absolutely-positioned bars, a pulsing-ring alarm on overdue items, and a ⌘K command palette that floats on a hard 10px 10px 0 0 offset shadow.

Colors

Surface. manila #E8DDC0 is the paper — page background, the inner frame fill, and the light text color on dark surfaces. manila-2 #DED0AD is a subtly darker manila used only for section-header strips (Unit Roster, Maintenance Queue, Lease Calendar). ink #1A1814 is the near-black: the 2px outer frame, the entire left rail and footer background, all body/heading text on manila, and the source of every hairline (via alpha).

Text. text-ink #1A1814 on manila for headings and body; text-manila #E8DDC0 for any text on ink surfaces (rail, footer, dark status stamps, gantt bars).

Semantic stamp colors. Three muted, slightly desaturated tones carry all state. green-pd #3A6A4A = paid rent, MTD collections, positive deltas, the "record payment" action. amber-mt #D69E3A = rent due, tickets in progress/pending/scheduled, lease renewal-due, the late-notice action. red-od #B43A2A = overdue rent, urgent/unassigned tickets, expiring/eviction lease bars, negative deltas. Stamps use the color as a fill with manila or ink text depending on contrast (amber takes ink text; green/red take manila text).

Hairlines. All dividers are ink at low alpha: rgba(26,24,20,0.15) for panel/grid lines and gantt columns, rgba(26,24,20,0.06) for row-hover wash and the paper dot texture, and rgba(232,221,192,0.20) (manila alpha) for dividers inside the dark rail. Overdue rows get a faint bg-red-od/5 tint.

Typography

Three families, all loaded from Google Fonts via one @import: Inter (400–700), Bitter (500–700, with ss01 stylistic set enabled), and JetBrains Mono (400–700, tabular numerals). All three are open-source, so no substitution is needed. Bitter is the slab-serif display/heading voice; Inter is plain UI text; JetBrains Mono carries every number, micro-label, keycap, ticket id, and date.

Token	Family	Size	Weight	Line-height	Tracking	Usage
display	Bitter	26px	600	1.0	—	Property H1 in crown header
display-lg	Bitter	19px	600	1.0	tight	Brand "Super's Clipboard"
heading	Bitter	15px	600	—	—	Section titles, tenant names (14px)
body	Inter	13px	500	—	—	Buttons, palette item titles, user name
mono-label	JetBrains Mono	10px	400	—	0.15–0.2em	Uppercase micro-labels, keycaps, status text
mono-data	JetBrains Mono	13px	400	—	—	Unit ids, rent figures, dates in rows
mono-metric	JetBrains Mono	34px / 42px	500	1.0	—	Stat-strip numbers; 42px "This Month" totals

Layout

Base unit is 4px; the observed scale runs 4 / 8 / 12 / 16 / 20 / 24px (Tailwind p-1…p-6, plus arbitrary pixel offsets for gantt and contact reveals). The page is p-4 manila, holding one bordered frame as a CSS grid grid-cols-[280px_1fr] at min-h-[calc(100vh-32px)]. The left column is the ink rail: brand block, /-shortcut search, a scrollable property list of 8 items (each with an occupancy bar), and a pinned user footer. The right column is a vertical stack of full-bleed sections separated by border-b-2 border-ink: a crown header (breadcrumb + H1 + view toggle + Quick action), a 5-column stat strip, a grid-cols-[3fr_2fr] split of Unit Roster (table) and Maintenance Queue (cards), a 12-month Gantt lease calendar (grid-cols-[180px_1fr] with a 12-column .gantt-grid background), a 3-column "This Month" income/expense/net block, and an ink footer status bar. Whitespace is tight and tabular — everything snaps to hairline grids; the composition reads like a printed spreadsheet.

Elevation & Depth

Almost entirely flat — depth comes from the 2px ink frame and 1px/alpha ink hairlines, not shadows. The only true shadows are deliberate brutalist accents: the ⌘K palette uses a hard offset box-shadow: 10px 10px 0 0 #1A1814 (no blur), and overdue/urgent stamps and gantt bars use the pulse-od animated box-shadow ring (0 0 0 0 → 0 0 0 4px rgba(180,58,42,0)). No backdrop-filter or glass; the cmdk backdrop is a flat bg-ink/60 scrim.

Shapes

Resolutely rectangular. The radius system is effectively binary: everything is 0px (frame, rail, buttons, stat cells, ticket icons, palette, gantt bars, inputs, scrollbar thumbs) except status stamps, which are rounded-full (9999px) pills — the one soft shape, used precisely to mark them as "stamps." Avatars and ticket-icon squares stay sharp-cornered.

Components

• Outer frame — 2px solid ink, manila fill, no radius; the page's defining border.
• Left rail — ink background, manila text, border-r-2 ink; holds brand, search, property list, user footer; internal dividers are manila/15–20 hairlines.
• Property item — block with top hairline; active state (.prop-item.active) flips to manila bg + ink text and darkens its occupancy bar; includes a 3px occupancy bar.
• Stat cell — part of the 5-col strip; mono 34px metric, uppercase mono label, 1px ink right-divider, px-5 py-4.
• Status stamp — pill, mono 10px uppercase; fills: green-pd "PAID", amber-mt "DUE/PENDING/SCHEDULED/IN PROGRESS", red-od "OVERDUE"/"URGENT" (with pulse-od); a vacant "LISTING" stamp is a bordered transparent pill.
• Primary button — ink fill, manila text, no radius (e.g. "Roster" toggle). Ghost button — manila fill, 1px ink border (e.g. "Quick action", "NEW", "Lease Calendar").
• Keycap — mono 10px in a 1px bordered box (⌘K, /, ESC, N/P/L/G/T).
• Roster row — grid [60px_1fr_110px_100px_110px_24px]; hover washes ink/6 and reveals a hidden monospace contact line (phone/email/lease note).
• Ticket card — flex row with a 36px bordered square category icon (red-od or amber-mt fill), Bitter title, mono meta line, and a corner status stamp.
• Gantt row — 36px tall over a 12-column grid; absolutely-positioned bars (left%/width%) colored ink (active), amber-mt (renewal), red-od (expiring/eviction), or ink/30 (turnover/gap).
• ⌘K palette — 560px manila panel, 2px ink border, hard 10px 10px 0 offset shadow; mono section labels, action rows with bordered icon tiles and a trailing keycap; toggled via .cmdk.open.
• Footer status bar — ink bg, manila/80 text, mono 10px uppercase; connection dot, sync time, and keycap shortcut hints.

Motion

Minimal and purposeful. .row-hover transitions background-color over 0.15s and, on hover, expands a .contact-line from max-height:0/opacity:0 to 30px/1 over 0.2s ease. .pulse-od is the only keyframe animation — a 1.6s infinite expanding box-shadow ring in oxblood, applied to overdue/urgent stamps and expiring gantt bars to read as an alarm. The ⌘K palette toggles instantly via display (no transition). Everything else is static.

Iconography

Tabler icons via the tabler-icons-webfont CDN, used as <i class="ti ti-*">. Outline style, sized by font-size from 8px (status dot ti-circle-filled) up to 18px (ti-command), most commonly 11–16px. Color inherits the local text color — ink on manila, manila on ink, or stamp-text color inside icon tiles. Icons are both UI (search, settings, dots-vertical, plus) and semantic category markers in tickets (ti-droplet plumbing, ti-flame/ti-bolt HVAC/electrical, ti-tool appliance).

Do's and Don'ts

• Do keep everything zero-radius except status stamps, which stay pills.
• Do route every number, label, id, date, and keycap through JetBrains Mono; use Bitter for headings and Inter only for plain UI text.
• Do restrict semantic meaning to the three stamp colors and pair them with the right manila/ink text for contrast.
• Do build structure from 2px ink frames and low-alpha ink hairlines, not boxes-with-shadows.
• Don't introduce blur/glass shadows; the only shadows are the hard offset palette and the pulse-od ring.
• Don't add new accent hues — the palette is manila, ink, green, amber, red.
• Don't soften the grid; sections are full-bleed and divided by hairlines, not gaps or cards.
• Don't drop the paper dot texture or the uppercase letter-spacing on mono labels — they carry the printed-ledger character.

Known Gaps

• Spacing tokens are inferred from Tailwind utility usage (4px base); the markup also uses arbitrary pixel values (e.g. pl-[72px], max-height:30px) not captured in the scale.
• display/heading line-heights come from Tailwind leading-none/leading-tight classes (approximated as 1.0 / ~1.15) rather than explicit CSS values.
• Stat-strip metrics range 34px–42px; the 42px "This Month" totals are folded into the single mono-metric token.
• Status-stamp/gantt-bar/ticket-icon components list one representative fill; their color varies by state (green/amber/red) as described in prose.