factory_mp/.playwright-mcp/DESIGN.md

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.