← Jeen.work / Design System
Foundations Components Dashboard

jeen design system — v0.6.4

Dashboard

System stats

6

Routes

9

Components

4

Sections

16

Discrepancies

15

Discrepancies & decisions

Sourced from system.json → discrepancies. Updated automatically by /review-ds when issues are found or fixed.

Resolved 8 — fixed and shipped Open 6 — known, needs action Decision 2 — intentional deviation
Resolved

--fg-tertiary used on light bg — 5 WCAG AA violations

Several classes used --fg-tertiary (#9A9A90, ~2.6:1) for readable text on light surfaces, which fails WCAG AA. Fixed: .play-card-desc, .diary-read-time, .about-card-role, .about-stat-label, .pg-eyebrow → --fg-secondary (#3A3A35, ~9:1).

resolved in commit e291ed0 · 2026-05-01

Resolved

Nav CTA shadow: shadow-lg → shadow-sm

DS preview showed smaller 2px offset shadow on nav CTA. Project had 5px (shadow-lg). Decision: use shadow-sm (2px default, 3px hover) — proportionate for a small nav element.

resolved in commit e291ed0 · 2026-05-01

Resolved

Card hover lift: translateY(-3px) → -2px

DS spec defines 2px lift on card hover. Project had 3px. Decision: reduced to -2px to match DS spec.

resolved in commit e291ed0 · 2026-05-01

Decision

Hero badge: keep ghost style over solid yellow (DS spec)

DS spec shows hero role badge as solid yellow pill. Live project uses ghost style (transparent bg, gray border). Decision: keep ghost — it feels less heavy in the hero context.

logged 2026-05-01

Resolved

Ad-hoc link styles unified into Link component + global pattern

6 ad-hoc link styles (nav-link, hero-social-link, footer-link, footer-contact-link, social-pill, article-back-link) were inconsistent and undocumented. Replaced with global <a> box-shadow underline pattern and Link component with 6 semantic variants. Deprecated --fg-link, --fg-link-hover, --fg-nav-link, --fg-nav-link-hover tokens.

resolved in commit 96e7954 · 2026-05-02

Open

Diary page styles not formally in DS: code blocks, HR

The diary page uses inverted code blocks (--bg-dark bg, --fg-on-dark-primary text) and styled HRs (gray-300 border) not defined in the DS token set. Consider formalising these as article-specific token aliases.

logged 2026-05-01

Open

Ghost + coming-soon Badge variants not in DS spec

Playground section uses ghost-style category labels and coming-soon badges not defined in the DS badge spec. Currently implemented as one-off CSS in homepage.css. Consider adding ghost and coming-soon as official Badge variants with tokens.

logged 2026-05-01

Resolved

Link variant='subtle' removed from system

variant='subtle' (.link-subtle) was deprecated in 0.5.1 and never used in any product page. Fully removed in 0.6.1: CSS class deleted from homepage.css, variant removed from Link.astro type and variantClass map, all DS documentation and inventory entries cleaned up.

resolved in commit f21e28c · 2026-05-05

Open

.footer-copy-btn uses --color-gray-500 on dark surface — WCAG AA fail

homepage.css line ~1105: .footer-copy-btn has color:var(--color-gray-500) (#6A6A60). Footer background is --bg-dark (#0A0A0A). Contrast ratio ~1.6:1 — fails WCAG AA. Should use --fg-on-dark-label (~5:1) or --fg-on-dark-secondary (~9:1).

logged 2026-05-04

Open

.article-meta uses --color-gray-500 on dark article header — WCAG AA fail

homepage.css line ~1551: .article-meta has color:var(--color-gray-500) (#6A6A60). Article header background is --color-black (#0A0A0A). Contrast ratio ~1.6:1 — fails WCAG AA. Should use --fg-on-dark-label (~5:1) or --fg-on-dark-secondary (~9:1).

logged 2026-05-04

Open

Doodle illustration set incomplete

DS spec calls for hand-drawn SVG doodles as a decorative layer (1–3 per section, black line art). Both feather_copy.svg and feather_check.svg have been removed (replaced by Lucide icons). Full doodle set to be provided by Jeen.

logged 2026-05-01

Decision

/design-system split into 4 routes instead of tab-based single page

The single design-system.astro monolith (1270 lines, JS tab switching) was refactored into /design-system (hub), /design-system/foundations (01–14), /design-system/components (showcase), /design-system/dashboard (discrepancies + stats). Each route uses Layout.astro and proper <a aria-current="page"> nav — no client JS required for navigation. The old tab-panel pattern with aria-pressed on buttons is fully removed.

logged 2026-05-04

Resolved

2× hardcoded border-radius: 12px in homepage.css

Audit found .hero-scroll-mouse (line 343) and .footer-email-row responsive override (line 1457) using border-radius: 12px without the --radius-md token. Both replaced with var(--radius-md). Remaining raw radius values (2px, 3px, 8px) are decorative micro-chrome with no token equivalent — logged as warnings below.

resolved in commit c71fe7a · 2026-05-05

Resolved

IconButton missing from component-inventory.md

IconButton was created and added to system.json in v0.5.7 but omitted from component-inventory.md. Full section added: purpose, file, props table, variants, DOM output, usage examples (.astro and .jsx), when to use / not to use, and rules.

resolved in commit c71fe7a · 2026-05-05

Resolved

Header.jsx uses hardcoded hex, font-family strings, and raw box-shadow values

Refactored Header.jsx to remove all inline style objects. Added CSS classes nav, nav.nav--active, .nav-inner, .nav-logo-btn, .nav-logo-img, .nav-logo-name, .nav-links-desktop, .nav-cta, .nav-mobile-dropdown, .nav-mobile-link, .nav-mobile-link--accent to homepage.css using semantic tokens throughout. Also fixed .nav-link font-size from hardcoded 14px to var(--text-sm). Three rgba() values retained: two for frosted-glass translucency (no opaque token equivalent) and one for hairline divider — all annotated with inline comments.

resolved in commit 0dfd99f · 2026-05-05

Open

Several decorative border-radius values have no exact token (2px, 3px, 8px)

Audit found border-radius: 2px (.hero-scroll-dot, .mobile-menu-btn span, article hr divider), 3px (scrollbar thumb, .footer-brand-logo), and 8px (.mobile-menu-btn, hidden .footer-email-row button) in homepage.css with no corresponding token. The token scale goes --radius-xs (4px), --radius-sm (6px), --radius-md (12px). These are all decorative micro-chrome elements. Decision: either add --radius-2xs: 2px and --radius-2sm: 3px / 8px tokens, or accept raw values for sub-4px decorative radii. Currently left as-is pending token scale decision.

logged 2026-05-05