# Design System Specification

## 1. Overview & Creative North Star: "The Oceanic Architect"

This design system is built to move away from the "generic corporate template" and toward a high-end, editorial digital experience. Our Creative North Star is **The Oceanic Architect**. This concept blends the rigid, authoritative precision of marine engineering with the fluid, expansive spirit of the Indian Ocean.

We break the "standard grid" through **intentional asymmetry**. Layouts should feel like a curated gallery: large-scale typography overlapping high-definition imagery, and content blocks that use "breathing room" (white space) as a structural element rather than a void. We do not use lines to separate ideas; we use depth, light, and tonal shifts to guide the eye.

---

## 2. Colors & Surface Architecture

The palette is rooted in deep-sea authority and sunset-inspired energy. We utilize Material Design naming conventions to manage a sophisticated layering system.

### The Palette
*   **Primary (`#00142e`):** The "Deep Sea." Use this for high-authority moments, headers, and primary branding.
*   **Secondary (`#a04100`) & Secondary Container (`#fe6b00`):** The "Coastal Sun." Reserved strictly for CTAs and critical highlights. Never use these for large background blocks; they are navigational beacons.
*   **Neutral Surfaces (`#f8f9fa` to `#ffffff`):** The "Salt & Mist." These provide the airy, modern backdrop required for international standards.

### The "No-Line" Rule
**Explicit Instruction:** Designers are prohibited from using 1px solid borders for sectioning. Boundaries must be defined solely through background color shifts. 
*   Example: A `surface_container_low` section sitting on a `surface` background. 

### Surface Hierarchy & Nesting
Treat the UI as a series of physical layers—like stacked sheets of fine paper. 
*   **Base:** `surface` or `background`.
*   **Sectioning:** `surface_container_low` or `surface_container`.
*   **Interaction/Cards:** `surface_container_lowest` (Pure White) to create a soft "lift" against a slightly grey background.

### The "Glass & Gradient" Rule
To add visual "soul," use subtle gradients for hero sections, transitioning from `primary` to `primary_container`. For floating navigation or overlays, implement **Glassmorphism**: use semi-transparent surface colors with a `20px` to `40px` backdrop-blur to allow the rich imagery of the Kenyan coast to bleed through the UI.

---

## 3. Typography: Editorial Authority

We use a dual-font strategy to balance character with utility.

*   **Display & Headlines (Manrope):** Chosen for its geometric, architectural feel. Use `display-lg` and `headline-lg` with tight letter-spacing (-0.02em) to create an authoritative, premium look.
*   **Body & Labels (Inter):** The global standard for readability. Use `body-lg` for long-form narrative and `label-sm` for technical metadata.

**Hierarchy Tip:** Pair a massive `display-md` headline with a tiny, all-caps `label-md` in `secondary` color above it to create a sophisticated, high-contrast editorial rhythm.

---

## 4. Elevation & Depth

We eschew traditional "drop shadows" in favor of **Tonal Layering**.

*   **The Layering Principle:** Depth is achieved by stacking tiers. Place a `surface_container_lowest` card on a `surface_container_low` section. The contrast in "brightness" creates a natural elevation.
*   **Ambient Shadows:** When a floating effect is required (e.g., a primary CTA button), use an extra-diffused shadow: `blur: 24px`, `opacity: 6%`, using a tint of the `on_surface` color.
*   **The "Ghost Border" Fallback:** If a container needs more definition for accessibility, use a "Ghost Border"—the `outline_variant` token at **15% opacity**. Never use 100% opaque borders.

---

## 5. Components

### Buttons (The "Horizon" Style)
*   **Primary:** `primary` background with `on_primary` text. Use `rounded-md` (0.375rem).
*   **CTA:** `secondary_container` background. This is the energetic trigger for deep-sea fishing bookings.
*   **States:** On hover, shift the background color to its `fixed_dim` variant rather than adding a shadow.

### Cards & Information Blocks
*   **Strict Rule:** No divider lines.
*   **Structure:** Use vertical white space (32px - 64px) and `surface` shifts to separate content. 
*   **Imagery:** All cards featuring vessels or port operations should use a subtle 4px corner radius (`rounded-lg`) to feel professional yet soft.

### Input Fields
*   Use `surface_container_highest` for the field background.
*   The focus state should not be a thick border, but a 2px `secondary` bottom-border (The "Horizon Line").

### Marine-Specific Components
*   **Data Overlays:** For vessel tracking or cargo specs, use glassmorphic panels with `label-md` typography to maintain a technical, high-performance aesthetic.
*   **The Wave Mask:** Use a subtle, SVG-masked "Wave" texture in the bottom 10% of hero sections to break the horizontal line and add brand personality.

---

## 6. Do’s and Don’ts

### Do:
*   **Embrace Asymmetry:** Let a photo bleed off the right edge of the screen while text is padded heavily on the left.
*   **Use High-Quality Imagery:** Only use high-resolution photography of the Mombasa coast and maritime operations.
*   **Mobile-First Grids:** Ensure the "Oceanic Architect" layout collapses into a single, clean column with generous 24px side margins on mobile.

### Don’t:
*   **Don't use "True Black":** Use `primary` or `on_surface` for text to maintain tonal depth.
*   **Don't use Box Shadows on everything:** Let the background colors do the work of defining space.
*   **Don't crowd the UI:** If a section feels "busy," double the padding. This design system thrives on air.

---

## 7. Token Summary Reference

| Category | Token | Value |
| :--- | :--- | :--- |
| **Color** | Primary | `#00142e` |
| **Color** | Secondary (CTA) | `#a04100` |
| **Color** | Surface (Base) | `#f8f9fa` |
| **Rounding** | Default | `0.25rem` |
| **Rounding** | Large (Cards) | `0.5rem` |
| **Typography** | Display Font | `Manrope` |
| **Typography** | Body Font | `Inter` |