93 lines
5.7 KiB
Markdown
93 lines
5.7 KiB
Markdown
# Design System Specification: The Architectural Approval Engine
|
||
|
||
## 1. Overview & Creative North Star: "Precision Ethereal"
|
||
The "Precision Ethereal" North Star moves beyond the standard "boxes-on-grey" look of enterprise software. For this OA approval system, we reject the industrial coldness of traditional automation in favor of an interface that feels like high-end architectural drafting: precise, layered, and deceptively simple.
|
||
|
||
We break the "template" look by utilizing **intentional asymmetry**—where navigation and content areas don't always align to a rigid center, creating a sense of forward momentum. By combining the authoritative weight of `manrope` typography with a "No-Line" spatial philosophy, we create a signature identity that feels like a premium digital concierge rather than a bureaucratic tool.
|
||
|
||
---
|
||
|
||
## 2. Colors & Surface Philosophy
|
||
Our color strategy is rooted in **Tonal Depth**. Instead of using lines to separate ideas, we use light.
|
||
|
||
### The Palette
|
||
- **Primary (The Executive Core):** `primary` (#003da6) and `primary_container` (#0052d9). Use these for high-intent actions.
|
||
- **Semantic Accents:**
|
||
- `secondary` (#006c46) for Approvals.
|
||
- `tertiary` (#733500) for Pending/Warning states.
|
||
- `error` (#ba1a1a) for Rejections.
|
||
- **Neutrals:** A sophisticated range from `surface` (#faf8ff) to `surface_container_highest` (#e1e2ed).
|
||
|
||
### The "No-Line" Rule
|
||
**Explicit Instruction:** Do not use 1px solid borders for sectioning or grouping.
|
||
Boundaries must be defined through background color shifts. A `surface_container_low` card sitting on a `surface` background provides enough contrast for the human eye to perceive a boundary without adding visual noise.
|
||
|
||
### The "Glass & Gradient" Rule
|
||
To elevate CTAs and Hero sections, use subtle **Linear Gradients** (e.g., `primary` to `primary_container` at 135 degrees). For floating elements like header bars or mobile navigation, apply **Glassmorphism**:
|
||
- **Background:** `surface` at 70% opacity.
|
||
- **Effect:** `backdrop-blur: 20px`.
|
||
- This ensures the UI feels like it’s floating in a cohesive 3D space rather than being "pasted" on.
|
||
|
||
---
|
||
|
||
## 3. Typography: The Editorial Hierarchy
|
||
We utilize a dual-font strategy to balance character with utility.
|
||
|
||
| Level | Token | Font | Size | Intent |
|
||
| :--- | :--- | :--- | :--- | :--- |
|
||
| **Display** | `display-lg` | Manrope | 3.5rem | High-impact dashboard stats. |
|
||
| **Headline**| `headline-md` | Manrope | 1.75rem | Approval titles and section headers. |
|
||
| **Title** | `title-md` | Inter | 1.125rem | Card titles and form groupings. |
|
||
| **Body** | `body-md` | Inter | 0.875rem | Standard data and descriptions. |
|
||
| **Label** | `label-sm` | Inter | 0.6875rem | Micro-copy and status indicators. |
|
||
|
||
**Style Note:** Headlines in Manrope provide an "Editorial" feel, conveying authority. Body text in Inter ensures maximum legibility in dense approval forms.
|
||
|
||
---
|
||
|
||
## 4. Elevation & Depth: Tonal Layering
|
||
Traditional drop shadows are forbidden unless an object is physically "active" or "hovered."
|
||
|
||
* **The Layering Principle:** Stack `surface-container` tiers to create depth.
|
||
* *Base:* `surface`
|
||
* *Section:* `surface_container_low`
|
||
* *Individual Card:* `surface_container_lowest` (Pure white #ffffff)
|
||
* **Ambient Shadows:** For floating modals or dropdowns, use a "Tinted Ambient Shadow":
|
||
* `box-shadow: 0 12px 40px rgba(25, 27, 35, 0.06);` (Using the `on_surface` color as the shadow base).
|
||
* **The Ghost Border:** If high-contrast accessibility is required, use a "Ghost Border": `outline_variant` at 15% opacity. Never use 100% opaque borders.
|
||
|
||
---
|
||
|
||
## 5. Components & Interface Objects
|
||
|
||
### Buttons (The Action Set)
|
||
- **Primary:** Gradient fill (`primary` to `primary_container`), `DEFAULT` (8px) rounding, no border.
|
||
- **Secondary:** `surface_container_high` background with `on_surface` text.
|
||
- **States:** On hover, increase the elevation through a subtle 4% opacity white overlay rather than changing the base hex code.
|
||
|
||
### The "Paper-Stack" Approval Cards
|
||
- **Rule:** Forbid divider lines within cards.
|
||
- **Structure:** Use `body-lg` for the requestor's name and `label-md` for the timestamp. Separate the "Approve/Reject" actions using a 24px vertical gutter (from the Spacing Scale) rather than a horizontal line.
|
||
- **Status Chips:** Use `secondary_container` for "Approved" and `error_container` for "Rejected." The text should always be the corresponding `on_` token for contrast compliance.
|
||
|
||
### Form Inputs
|
||
- **Style:** Use "Soft Fields." Background is `surface_container_highest` with a `none` border.
|
||
- **Focus State:** Transition the background to `surface_container_lowest` and apply a 1px "Ghost Border" using `primary`.
|
||
|
||
### Navigation Rails
|
||
Instead of a standard sidebar, use a "Floating Rail" with Glassmorphism. The background of the rail should be `surface` at 80% opacity with a heavy backdrop blur, creating a sense of transparency and lightness.
|
||
|
||
---
|
||
|
||
## 6. Do’s and Don'ts
|
||
|
||
### Do:
|
||
- **Embrace Whitespace:** Use the spacing scale to create "breathing room" around complex approval workflows.
|
||
- **Use Nested Surfaces:** Put high-priority data on a `surface_container_lowest` card to make it "pop" naturally.
|
||
- **Editorial Alignment:** Align large headlines to the left, but allow supporting stats to sit asymmetrically to create visual interest.
|
||
|
||
### Don’t:
|
||
- **Don’t use 1px Dividers:** They clutter the UI. Use a 16px or 24px gap instead.
|
||
- **Don’t use Pure Black Shadows:** Always tint your shadows with the `on_surface` blue-grey hue to maintain a "high-end" look.
|
||
- **Don’t use standard System Fonts:** Stick strictly to the Manrope/Inter pairing to protect the brand persona.
|
||
- **Don't crowd the margins:** Professionalism is defined by the space you *don't* fill. |