```markdown
# Design System Specification: Monolithic Security & Technical Elegance

## 1. Overview & Creative North Star
The Creative North Star for this design system is **"The Monolithic Vault."** 

This system moves away from the "airy" and "playful" trends of modern SaaS, opting instead for a visual language rooted in utility, high-stakes security, and technical precision. It is an editorial approach to software where every element feels carved from a single block of obsidian. By utilizing intentional asymmetry, deep tonal layering, and "Ghost Borders," we create a high-end experience that feels both impenetrable and sophisticated.

The goal is to provide a "Curated Technical" vibe—where the density of information (like the reference grid) is balanced by generous outer margins and sophisticated glass transitions. We break the template by treating the background not as a flat canvas, but as a series of receding depths.

---

## 2. Colors & Surface Philosophy
The palette is built on deep blacks and "Noble Orange" accents, prioritizing retinal comfort and high-end aesthetic value.

### Tonal Hierarchy
- **Base (The Void):** `surface` (#131313) or `surface_container_lowest` (#0E0E0E). Used for the primary app background to establish depth.
- **Surface (The Stage):** `surface_container` (#201F1F). Used for primary content areas.
- **Elevated (The Highlight):** `surface_container_highest` (#353534). Used for cards or active nested containers.

### The "No-Line" Rule
Traditional 1px solid borders are strictly prohibited for sectioning. Boundaries must be defined through background color shifts. To separate a sidebar from a main feed, use `surface_container_low` against a `surface` background. The eye should perceive a change in "mass," not a line.

### Surface Hierarchy & Nesting
Think of the UI as physical layers. An inner table or data grid should occupy a `surface_container_lowest` slot, creating an "inset" feel (Neumorphic debt) within a `surface_container` parent. This "carved out" effect enhances the feeling of a technical tool.

### Glass & Gradient Rule
For floating elements (modals, active menu states, or dropdowns), utilize **Glassmorphism**.
- **Fill:** `surface_bright` at 60% opacity.
- **Backdrop-Blur:** 12px to 20px.
- **Stroke:** Use the "Ghost Border" (1px `outline_variant` at 10% opacity) to catch the light.

---

## 3. Typography
The typography strategy is "Technical Editorial." We pair the Swiss-style precision of **Inter** with the monospaced authority of **JetBrains Mono**.

- **Inter (UI & Navigation):** Used for all structural elements. It provides a clean, neutral foundation that doesn't distract from the data.
- **JetBrains Mono (Data & Codes):** Used for passwords, monetary values, timestamps, and technical labels. This injects a sense of "under-the-hood" transparency and precision.

### Key Scales
- **Display-LG (3.5rem):** High-contrast, low-tracking titles for impact.
- **Headline-SM (1.5rem):** For primary section headers.
- **Label-MD (0.75rem):** Always in JetBrains Mono for a technical, metadata feel.
- **Body-MD (0.875rem):** The workhorse for all interface text.

---

## 4. Elevation & Depth
In this design system, depth is achieved through **Tonal Layering** rather than structural geometry.

- **The Layering Principle:** Avoid shadows for static layout components. Instead, place a `surface_container_lowest` card inside a `surface_container_low` section. This creates a soft, natural "recess" (Minimalist Neumorphism) without visual clutter.
- **Ambient Shadows:** For floating components like Tooltips or Modals, use a "Shadow-Glow."
  - **Blur:** 40px - 60px.
  - **Opacity:** 6% of `on_surface`.
  - **Color:** Tinted slightly toward the `primary` (#FFB694) to simulate light refraction.
- **The "Ghost Border":** When high precision is required (as seen in the reference table header), use a 1px line at `outline_variant` (#574239) with only **10-15% opacity**. This should look like a faint reflection, not a structural divider.

---

## 5. Components

### Buttons
- **Primary:** `primary_container` (#C2571A) background with `on_primary_container` text. Use `sm` (0.125rem) or `none` roundedness for a sharper, monolithic look.
- **Secondary:** Transparent background with a `Ghost Border`.
- **Tertiary:** Text-only in `primary` color, used for low-priority actions.

### Technical Grids (Tables)
Follow the reference image logic:
- **Header:** `surface_container_highest` with a subtle top "Ghost Border."
- **Rows:** No horizontal lines. Use a slight color shift on `:hover` to `surface_bright` at 10% opacity.
- **Spacing:** Use `spacing-4` (0.9rem) between data cells to ensure readability without lines.

### Input Fields
- **Container:** `surface_container_lowest` (#0E0E0E) to create an "inset" appearance.
- **Focus State:** 1px "Ghost Border" at 30% opacity using `primary` color. No heavy glow.
- **Font:** Use **JetBrains Mono** for the input text itself to emphasize the technical nature of the data.

### Tooltips & Menus
- Use the **Glassmorphism** rule.
- Roundedness should be `md` (0.375rem) to slightly soften the technical edge for interactive elements.

---

## 6. Do's and Don'ts

### Do
- **Do** use `JetBrains Mono` for any value that feels like "data" (dates, amounts, IDs).
- **Do** prioritize vertical whitespace over horizontal lines.
- **Do** use `primary_container` (#C2571A) sparingly; it is a "noble" accent meant to guide the eye to critical actions only.
- **Do** apply `backdrop-blur` to any element that sits "above" the base surface.

### Don't
- **Don't** use pure white (#FFFFFF) for text. Always use `on_surface` (#E5E2E1) or `on_surface_variant` (#DEC0B4) to maintain the premium dark-mode depth.
- **Don't** use standard Material Design "Drop Shadows." They feel "cheap" in this monolithic context.
- **Don't** use high roundedness (full circles) unless it is for a specific, functional icon container. Stick to `sm` and `none` for layout boxes.
- **Don't** ever use a 100% opaque border for sectioning. It breaks the "Monolithic Vault" illusion.