VaultCard

• Layer: Component
• Base: Custom — inline styles, no Ark UI dependency

The primary card surface for captured documents. Each typeId maps to a distinct accent colour — icon, type label, and attention border all derive from it. Designed for 3-column dashboard grids.

Default Grid

diary / goal / worklog — 3-column layout

DIARY

2026-04-11

Thoughts on the day, what landed and what didn't.

18 hours ago

GOAL

Ship Saltie MVP

Get the companion layer into a testable state end-to-end.

18 hours ago

WORKLOG

Test

Initial worklog entry.

yesterday

Attention State

Right card has saltieNote set — adds italic annotation and left accent border.

default vs attention

GOAL

Ship Saltie MVP

Get the companion layer into a testable state end-to-end.

18 hours ago

GOAL

Ship Saltie MVP

Get the companion layer into a testable state end-to-end.

saltie craves this18 hours ago

All Accents

one card per typeId

DIARY

Diary

pink — #d453a0

just now

NOTE

Note

slate blue — #648cdc

just now

GOAL

Goal

teal — #00e5c8

just now

WORKLOG

Worklog

amber — #e09a2a

just now

FOLLOW THROUGH

Follow-through

orange — #e6783c

just now

IDEA

Idea

yellow — #e6c832

just now

OBSERVATION

Observation

coral — #dc6450

just now

MENTEE

Mentee

green — #3cc878

just now

DOCUMENT

Document

cool blue — #50a0f0

just now

DECISION

Decision

purple — #a064e6

just now

RESEARCH

Research

indigo — #6478dc

just now

Props

Prop	Type	Default	Description
typeId	string	required	Document type — drives accent colour
title	string	required	Document title (displayed prominently)
description	string	—	Optional body text below title
timestamp	string	—	Relative time shown in the footer right
saltieNote	string	—	When set: italic annotation left of timestamp + left accent border
onClick	() => void	—	Makes the card interactive (cursor pointer)
class	string	—	Additional CSS class

Accent Map

typeId	Accent
"diary"	#d453a0 (pink)
"note"	#648cdc (slate blue)
"goal"	#00e5c8 (teal)
"worklog"	#e09a2a (amber)
"follow-through"	#e6783c (orange)
"idea"	#e6c832 (yellow)
"observation"	#dc6450 (coral)
"mentee"	#3cc878 (green)
"document"	#50a0f0 (cool blue)
"decision"	#a064e6 (purple)
"research"	#6478dc (indigo)
any other	#00f5ff (cyan)

Usage

import { VaultCard } from '@risingswamp/design-system'

// Default
<VaultCard
  typeId="goal"
  title="Ship Saltie MVP"
  description="Get the companion layer into a testable state."
  timestamp="18 hours ago"
  onClick={() => {}}
/>

// Attention state (saltie flagged)
<VaultCard
  typeId="goal"
  title="Ship Saltie MVP"
  description="Get the companion layer into a testable state."
  timestamp="18 hours ago"
  saltieNote="saltie flagged this"
  onClick={() => {}}
/>

VaultCard vs MiniCard

	VaultCard	MiniCard
Structure	Fixed: header / title / description / footer	Freeform — you provide layout
Per-type accent	Yes — icon + label + border derive from typeId	No
Attention state	saltieNote prop adds left accent border	Not supported
Use case	Dashboard grid, vault grid	Result rows, compact items
Hover	Border brightens (rgba(255,255,255,0.14))	Background tone shift

Design Notes

• Inline styles are used throughout (not Panda CSS) — the glow filter and per-type CSS custom properties (--accent, --accent-rgb) cannot be expressed in Panda’s compile-time CSS classes.
• Hover is handled via onMouseEnter/onMouseLeave since inline styles cannot express :hover.
• Attention state (saltieNote present): border-left: 2px solid var(--accent) replaces the left 2px of padding — total left edge stays visually consistent.
• DocIcon is rendered in the header and automatically inherits --accent from the card’s root element.

Plane 1 Constraints

• No drop shadows on the card surface
• Hover changes border opacity only — no scale, no shadow
• Glow is on the icon only (via DocIcon), not on the card itself