Skip to content

PUBLIC REFERENCE

Things

organized desktop, clean and bright

2026-04-11 Source style Original site
Things captured reference
DESIGN.md tokens.json Tailwind v4 detail JSON

Colors

Midnight Ink #303336

Primary text, deep accents, interactive states for headings.

Charcoal Text #44474b

Secondary text, descriptive body copy.

Storm Gray #55606

Tertiary text, subtle borders, inactive link states.

Subtle Ash #838b96

Placeholder text, minor labels, light gray borders for contrast.

Silver Mist #9299a4

Fainter secondary text, subtle dividers.

Off-White Canvas #ffffff

Main page backgrounds, input fields, primary elevated surfaces.

Cloud Gray #f2f5f7

Card backgrounds, section separators, subtle background shifts.

Frost Border #dfe3e8

Input element borders, subtle separators.

Ocean Blue #2576eb

Active link states, primary interactive elements, icon accents — a vivid anchor.

Sky Link Blue #5c9cf5

Hover states for links, secondary interactive elements — a slightly softer, yet still vibrant, indicator.

Action Button Blue #4f91fb

Primary Call-to-Action button background — a stable, deep blue that signifies action.

Do

  • Use Midnight Ink (#303336) for all primary headings and major text elements to maintain high contrast and visual weight.
  • Apply Cloud Gray (#f2f5f7) as a background for distinct content sections or cards to create clear visual separation.
  • Reserve Ocean Blue (#2576eb) for critical interactive elements like active links, primary icons, and CTA text to guide user focus.
  • Use a consistent border-radius of 6px for all functional elements like buttons and input fields to ensure a cohesive interactive experience.
  • Ensure generous vertical spacing between sections, using multiples of the 12px token to establish a comfortable content density.

Don't

  • Do not introduce new color hues; strictly adhere to the defined grays and blues to preserve the system’s crisp and minimalist aesthetic.
  • Avoid arbitrary border-radii; use 3px for icons, 6px for buttons/inputs, and 18px for cards, and 12.8px for select larger elements.
  • Do not use box-shadows liberally; limit to the subtle rgba(0, 0, 0, 0.1) 0px 2px 8px 0px for single-level elevation.
  • Do not vary font families; maintain the system's reliance on ui-sans-serif for all text to ensure consistent typography and OS integration.
  • Avoid dense packing of content; ensure minimum element gaps of 4px and significant section gaps with 48px to allow content to breathe.