# Design Reference - Fey
> Deep-space observatory control panel. Functionality, precision, and high-contrast data visualization on a near-black canvas.

## Source
- Original site: https://feyapp.com
- Captured: 2026-04-11T15:55:45.443Z

## Tags
- dark-mode
- data-dense
- high-contrast
- minimalist
- technical
- financial
- clean
- sophisticated
- futuristic

## Colors
| Name | Value | Group | Role |
|------|-------|-------|------|
| Midnight Ink | `#0b0b0b` | neutral | Major surface backgrounds, card bases. |
| Obsidian Deep | `#131313` | neutral | Elevated card backgrounds, modal backdrops, adding subtle surface differentiation. |
| Coal Dust | `#191919` | neutral | Accent backgrounds, subtle dividers. |
| Slate Text | `#868f97` | neutral | Secondary body text, disabled states, iconography. |
| Ash Gray | `#999999` | neutral | Tertiary text, subtle descriptions. |
| Silver Accents | `#cccccc` | neutral | Subtle interactive elements, subtle outlines. |
| Light Smoke | `#e6e6e6` | neutral | Near-white elements in dark mode, button text for dark buttons. |
| Pure White | `#ffffff` | neutral | Primary text, prominent iconography, active states, key data readouts. |
| Cosmic Blue | `#479ffa` | accent | Interactive elements, active navigation items, primary calls to action — signifying state changes and focus. |
| Solar Flare | `#ffa16c` | brand | Prominent headings and highlights, drawing immediate attention to key information without being intrusive. |
| Emerald Profit | `#4ebe96` | semantic | Positive data indicators, success states. |
| Warn Gradient 1 | `#ffa16c` | brand | Decorative gradient often used for feature highlights. |
| Cool Gradient 1 | `#b6d6ff` | brand | Decorative gradient, often paired with data visualizations or abstract elements. |
| Vibrant Gradient 1 | `#d6fe51` | brand | Decorative gradient, suggesting energy and growth. |

## Typography
- role: The primary typeface for all textual content. Its clean, slightly technical geometry is chosen for data legibility in financial contexts and its modern character. Varied weights ensure clear hierarchy from high-impact headlines to detailed data tables.; sizes: 10px, 11px, 12px, 14px, 15px, 16px, 18px, 24px, 26px, 48px, 54px; family: calibre; weight: 400, 500, 600, 700; lineHeight: 1.00, 1.10, 1.20, 1.25, 1.30, 1.32, 1.36, 1.40, 1.50, 1.58; substitute: Inter, sans-serif; letterSpacing: -0.08em, -0.08em, -0.053em

## Spacing And Radius
```json
{
  "spacing": {
    "radius": {
      "cards": "16px",
      "general": "10px",
      "input-sm": "6px",
      "buttons-pill": "99px",
      "buttons-square": "6px"
    },
    "elementGap": "",
    "sectionGap": "",
    "cardPadding": "",
    "pageMaxWidth": "1220px"
  },
  "radius": {
    "cards": "16px",
    "general": "10px",
    "input-sm": "6px",
    "buttons-pill": "99px",
    "buttons-square": "6px"
  }
}
```

## Component Patterns
- name: Morning Recap News Feed
- name: Insider Transactions List
- name: Earnings Alert Notification Banner
- name: Primary Navigation Link; role: Interactive element
- name: Navigation Button - Ghost; role: Interactive element
- name: Navigation Button - Filled; role: Interactive element
- name: Notification Bubble Button; role: System feedback
- name: App Preview Card; role: Content display
- name: Pill Accent Tag; role: Categorization/state
- name: Profile Avatar; role: User identification

## Do
- Use Midnight Ink (#0b0b0b) for primary page backgrounds to establish the dark theme.
- Apply Calibre font family with weight 400 for body text and 600 for prominent subheadings.
- Employ Cosmic Blue (#479ffa) exclusively for interactive elements and active states.
- Utilize Solar Flare (#ffa16c) for decorative headings and key value highlights.
- Maintain a clear visual hierarchy by differentiating surfaces with Obsidian Deep (#131313) for elevated elements on Midnight Ink (#0b0b0b) backgrounds.
- Apply 99px border radius for all primary calls-to-action buttons for a distinct pill shape.
- Space elements using multiples of 4px and 8px, reserving larger increments for section gaps (900-1100px) and card padding (18px vertical, 20px horizontal).

## Don't
- Do not use chromatic colors other than Cosmic Blue (#479ffa) or Solar Flare (#ffa16c) for branding or interactive elements.
- Avoid using drop shadows on elements that are not meant to signify elevation, like primary page backgrounds.
- Do not use border radii smaller than 6px for interactive elements; for cards and larger containers, use 16px.
- Never lighten text color for emphasis in a dark theme; rely on Pure White (#ffffff) for primary text and Light Smoke (#e6e6e6) or Slate Text (#868f97) for secondary/tertiary.
- Avoid dense information blocks without sufficient elementGap (min 4px, avg 8-20px) to maintain legibility.