ASK KNOX
beta
Learn/Design-System-Driven Frontend with AI/Lesson 463
LESSON 463

Component Patterns & the Glass-Card System

The glass-card is the shared language across all five ecosystem properties — one specification, five sites.

8 min read·Design-System-Driven Frontend with AI

Shared Language Across Five Properties

The glass-card is not a component. It is a language — the visual vocabulary that makes five ecosystem properties feel like one system without being identical. The academy, jeremyknox.ai, indecision.io, tesseractintelligence.io, and rewiredminds.io all use the same glass-card specification. The exact content is different. The surface language is consistent.

This matters for AI-assisted development because AI builds components one at a time, in separate sessions, without memory of prior work. The glass-card specification in MASTER.md is the continuity mechanism — it ensures that a component built today by a fresh AI session matches the component built three months ago.

The Three Glass-Card Variants

Base (glass-card): rgba(255,255,255,0.03) background, 1px rgba(255,255,255,0.08) border, 12px radius. This is the default for track listings, lesson cards, dashboard panels, and any container that needs subtle surface definition without visual weight. The background is barely there — just enough to separate the card from the page background.

Raised (glass-card-raised): rgba(255,255,255,0.06) background, 1px rgba(255,255,255,0.14) border. Doubled background opacity, brighter border. Use for featured content, active state, or the hover target of a card. The subtle increase in opacity and border brightness communicates elevation without a box-shadow or transform.

Accent-bordered (glass-card-accent): Same as base, plus a stronger border on one side — typically left or top. Use for Pro-tier callouts, active track indicator, selected lesson in sidebar. The rgba(0,229,255,0.4) left border is the academy's primary selection signal.

With the three variants specified, build the component itself — encoding the spec so every fresh AI session inherits the surface language.

Cross-Property Consistency

The five shared rules that unify all ecosystem properties:

  1. Dark mode default — All five are dark-first. The academy has a bi-modal toggle; the others are dark only.
  2. Inter body font — Non-negotiable. JetBrains Mono for code and data labels.
  3. Glass-card surface — rgba white overlay on dark bg, 1px border, 12px radius. Consistent across all five.
  4. Ecosystem footer — Auto-injected on every page. Links to all sister properties.
  5. Cyan accent (#00E5FF) — Primary interactive and active indicator. Consistent cross-site.

The per-site MASTER.md handles the deviations. The academy has a bi-modal rule and CSS-variable requirement. rewiredminds.io requires image: frontmatter on every MDX file. jeremyknox.ai requires ZoomableImage for all lesson images. These deviations are isolated in each site's MASTER.md without touching the shared rules.

The Ecosystem Footer Is Mandatory

Every article on every ecosystem property must include the ecosystem footer and 1-2 inline backlinks to sister properties. This is not a suggestion — it is a content pipeline rule from design-intelligence.md, Knox's cross-site design constraint document that defines the shared rules, anti-patterns, and industry-to-design mappings for every ecosystem property.

The backlink mapping below is broader than the five MASTER.md properties this track builds for — the ecosystem footer links every sibling brand, including Architect of War, which is dark-only and outside the five-site glass-card set:

The rationale is compounding: a reader of academy content who follows a link to indecision.io becomes part of the indecision audience. Cross-property traffic builds each property's reach without paid acquisition. The EcosystemFooter component is auto-injected via the content template. The inline backlinks require intentional placement — they are the writer's (or AI agent's) responsibility.

Anti-Patterns That Break the System

The glass-card system works only when its rules are followed precisely. The most common violations:

border-2 on cards. The MASTER.md anti-patterns section explicitly prohibits this. A 2px border makes the card look like a solid block, not a translucent layer. If you need more card definition, use the raised variant — not a thicker border.

box-shadow on glass cards. Box-shadow is a light-mode pattern. On dark backgrounds, it creates an unnatural illumination effect that conflicts with the dark surface language. The glass-card system uses border brightness for elevation — no shadow.

Dramatic hover transforms. The MASTER.md specifies hover: 150ms ease, border and background change only. No translateY(-4px), no scale transform. Transforms on hover create janky, distracting interactions on dark UI. Subtle background lift is the correct signal for interactive cards.

Hard-coded hex values. The academy is bi-modal. rgba(255,255,255,0.03) is safe — it works in both modes as a white overlay. But background: #0a0a0f on a card interior element is a problem in light mode. Use CSS variables.

Component patterns are the reuse layer that makes consistency automatic. Once the glass-card system is defined in MASTER.md, every new component built against that spec inherits the shared language. The AI does not need to "understand" the design system — it just needs to follow the specification.