Design System — The Icelandic Archive

# Design System Strategy: The Icelandic Archive
 
## 1. Overview & Creative North Star
**Creative North Star: The Digital Curator**
This design system rejects the frantic, "always-on" aesthetic of modern SaaS. Instead, it draws inspiration from the stillness of an Icelandic library and the precision of high-end horology. We are not building a "tool"; we are designing a premium service that feels like a physical artifact—heavy, intentional, and quiet.
 
To break the "template" look, we utilize **Intentional Asymmetry**. Rather than centering everything, we lean into generous, "uncomfortable" white space and off-center alignments that guide the eye through an editorial flow. The experience should feel curated, not generated.
 
---
 
## 2. Colors: Tonal Architecture
The palette is built on a foundation of charcoal and slate, punctuated by a singular, authoritative amber.
 
*   **Core Foundation:** Use `surface` (#121416) as the canvas. 
*   **The "No-Line" Rule:** Explicitly prohibit 1px solid borders for sectioning. Boundaries must be defined solely through background color shifts. A `surface_container_low` section sitting on a `surface` background is the only way to define a change in context.
*   **Surface Hierarchy & Nesting:** Treat the UI as stacked sheets of fine paper. 
    *   **Lowest Layer:** `surface_container_lowest` (#0c0e10) for deep, recessed background areas.
    *   **Main Canvas:** `surface` (#121416).
    *   **Raised Elements:** `surface_container` (#1e2022) or `surface_container_high` (#282a2c).
*   **Signature Accent:** `primary` (#f2ca50) is used sparingly. It is a beacon, not a decorative element. Use it only for primary actions or critical status indicators.
 
---
 
## 3. Typography: Editorial Authority
We use a high-contrast scale to create an editorial feel. The tension between the wide, architectural `Manrope` and the functional `Inter` creates a professional, Scandinavian atmosphere.
 
*   **The Display Scale:** `display-lg` (3.5rem) and `headline-lg` (2rem) are your primary tools for "Quiet Confidence." Use these with wide letter-spacing (-0.02em) and significant bottom margins (minimum `spacing-8`).
*   **The Body Scale:** `body-lg` (1rem) is the workhorse. Always prioritize line-height (1.6) to ensure the "Scandinavian Restraint" is felt through breathing room between lines.
*   **Functional Labels:** Use `label-md` in all-caps with `0.05em` letter-spacing for metadata or secondary navigation to provide a "technical manual" aesthetic.
 
---
 
## 4. Elevation & Depth: Tonal Layering
We do not use drop shadows to indicate height; we use light and material properties.
 
*   **The Layering Principle:** Depth is achieved by "stacking" the `surface-container` tiers. Place a `surface_container_high` card on a `surface_container_low` background to create a soft, natural lift.
*   **Ambient Shadows:** If a floating element (like a dropdown) is required, use a shadow with a blur of `40px` and an opacity of `6%). The shadow color must be a tinted version of `on_surface` (#e2e2e5) to mimic natural light dispersion.
*   **The Ghost Border:** If accessibility requires a container boundary, use `outline_variant` at 15% opacity. Never use a 100% opaque border.
*   **Glassmorphism:** For overlays or navigation bars, use `surface` at 80% opacity with a `20px` backdrop-blur. This ensures the background texture bleeds through, making the UI feel integrated into a single physical space.
 
---
 
## 5. Components: Functional Artifacts
 
*   **Buttons:** 
    *   *Primary:* `primary` (#f2ca50) background with `on_primary` text. No border. `rounded-md`.
    *   *Secondary:* `surface_container_highest` background. Subtle, understated.
    *   *Tertiary:* Ghost style. Text only in `primary_fixed_dim`, shifting to `primary` on hover.
*   **Cards:** Forbid divider lines. Use `spacing-6` to separate headers from body content. Use a `surface_container_low` background to distinguish the card from the main `surface`.
*   **Inputs:** Use `surface_container_highest` for the input field. The active state is signaled only by a `1px` "Ghost Border" of `primary` at 40% opacity.
*   **Chips:** Use `surface_container_high` with `label-sm` text. These should look like small, precisely cut stone tabs.
*   **Lists:** No horizontal rules. Use a `spacing-4` vertical gap between items. Highlight selected items by shifting the background to `surface_container_highest`.
 
---
 
## 6. Do’s and Don'ts
 
**Do:**
*   **Do** use asymmetrical layouts. If a paragraph is on the left, let the right side remain empty or hold a single, high-quality photograph of a physical object (e.g., a fountain pen, a marble slab).
*   **Do** use the full `spacing-24` (8.5rem) for section transitions. Distance conveys authority.
*   **Do** use `primary` sparingly. If the screen is too yellow, the "Quiet Confidence" is lost.
 
**Don't:**
*   **Don't** use gradients. The "warmth" comes from the amber and off-white tones, not from color transitions.
*   **Don't** use icons unless absolutely necessary. Rely on clear, professional typography.
*   **Don't** use "SaaS Blue" or "AI Purple." We are an Icelandic institution; our colors are stone, gold, and light.
*   **Don't** use standard "box" layouts. Experiment with wide margins and "bleeding" images that touch the edge of the viewport.
 
---
 
## 7. Signature Elements
To truly elevate the experience beyond a standard UI, integrate **"The Tactile Element."** Use high-resolution photography of physical, textured artifacts—rough-hewn stone, heavy paper, or brushed metal. These should be treated as part of the interface, often overlapping container boundaries to break the digital grid.```