# Design Reference - Things
> organized desktop, clean and bright

## Source
- Original site: https://culturedcode.com/things
- Captured: 2026-04-11T16:48:13.143Z

## Tags
- clean
- minimalist
- task-manager
- productivity
- software
- blue-accent
- high-contrast
- system-fonts
- light-theme

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Midnight Ink | `#303336` | neutral | Primary text, deep accents, interactive states for headings. |
| Charcoal Text | `#44474b` | neutral | Secondary text, descriptive body copy. |
| Storm Gray | `#55606` | neutral | Tertiary text, subtle borders, inactive link states. |
| Subtle Ash | `#838b96` | neutral | Placeholder text, minor labels, light gray borders for contrast. |
| Silver Mist | `#9299a4` | neutral | Fainter secondary text, subtle dividers. |
| Off-White Canvas | `#ffffff` | neutral | Main page backgrounds, input fields, primary elevated surfaces. |
| Cloud Gray | `#f2f5f7` | neutral | Card backgrounds, section separators, subtle background shifts. |
| Frost Border | `#dfe3e8` | neutral | Input element borders, subtle separators. |
| Ocean Blue | `#2576eb` | brand | Active link states, primary interactive elements, icon accents — a vivid anchor. |
| Sky Link Blue | `#5c9cf5` | brand | Hover states for links, secondary interactive elements — a slightly softer, yet still vibrant, indicator. |
| Action Button Blue | `#4f91fb` | brand | Primary Call-to-Action button background — a stable, deep blue that signifies action. |

## Typography
- role: The sole typeface, maintaining visual unity across all elements from headings to body text and UI components. Its system-font nature provides native OS feel and fast loading.; sizes: 13px, 14px, 15px, 16px, 17px, 18px, 20px, 24px, 36px; family: ui-sans-serif; weight: 400, 600, 700, 800; lineHeight: 1.00, 1.20, 1.25, 1.30, 1.35, 1.40, 1.60; substitute: system-ui, sans-serif; letterSpacing: normal

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "18px",
      "icons": "3px",
      "inputs": "6px",
      "buttons": "6px",
      "hero-label": "12.8px"
    },
    "elementGap": "4-14px",
    "sectionGap": "48px",
    "cardPadding": "18px",
    "pageMaxWidth": "900px"
  },
  "radius": {
    "cards": "18px",
    "icons": "3px",
    "inputs": "6px",
    "buttons": "6px",
    "hero-label": "12.8px"
  }
}
```

## Component Patterns
- name: Watch Introduction Video Button
- name: Simply Powerful Section Card
- name: App Sidebar Navigation Card
- name: Primary Action Button; role: Call to action.
- name: Section Separator Card; role: Organizing content blocks.
- name: Default Card; role: General content display.
- name: Text Input Field; role: User data input.
- name: Navigation Link; role: Top navigation.
- name: Watch Video Button; role: Auxiliary action, media launch.

## 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.