BizOne-web/stitch_www.bizone.id/professional_efficiency/DESIGN.md

---
name: Professional Efficiency
colors:
  surface: '#faf8ff'
  surface-dim: '#d9d9e2'
  surface-bright: '#faf8ff'
  surface-container-lowest: '#ffffff'
  surface-container-low: '#f3f3fc'
  surface-container: '#ededf6'
  surface-container-high: '#e7e7f0'
  surface-container-highest: '#e2e2eb'
  on-surface: '#191b22'
  on-surface-variant: '#434653'
  inverse-surface: '#2e3037'
  inverse-on-surface: '#f0f0f9'
  outline: '#737784'
  outline-variant: '#c3c6d5'
  surface-tint: '#2559bd'
  primary: '#00327d'
  on-primary: '#ffffff'
  primary-container: '#0047ab'
  on-primary-container: '#a5bdff'
  inverse-primary: '#b1c5ff'
  secondary: '#006a6a'
  on-secondary: '#ffffff'
  secondary-container: '#7af2f2'
  on-secondary-container: '#006e6e'
  tertiary: '#27374c'
  on-tertiary: '#ffffff'
  tertiary-container: '#3e4e63'
  on-tertiary-container: '#afbfd9'
  error: '#ba1a1a'
  on-error: '#ffffff'
  error-container: '#ffdad6'
  on-error-container: '#93000a'
  primary-fixed: '#dae2ff'
  primary-fixed-dim: '#b1c5ff'
  on-primary-fixed: '#001946'
  on-primary-fixed-variant: '#00419e'
  secondary-fixed: '#7df5f5'
  secondary-fixed-dim: '#5dd9d8'
  on-secondary-fixed: '#002020'
  on-secondary-fixed-variant: '#004f4f'
  tertiary-fixed: '#d3e4fe'
  tertiary-fixed-dim: '#b7c8e1'
  on-tertiary-fixed: '#0b1c30'
  on-tertiary-fixed-variant: '#38485d'
  background: '#faf8ff'
  on-background: '#191b22'
  surface-variant: '#e2e2eb'
typography:
  display-lg:
    fontFamily: Manrope
    fontSize: 48px
    fontWeight: '700'
    lineHeight: 56px
    letterSpacing: -0.02em
  headline-lg:
    fontFamily: Manrope
    fontSize: 32px
    fontWeight: '600'
    lineHeight: 40px
    letterSpacing: -0.01em
  headline-lg-mobile:
    fontFamily: Manrope
    fontSize: 24px
    fontWeight: '600'
    lineHeight: 32px
  title-md:
    fontFamily: Inter
    fontSize: 18px
    fontWeight: '600'
    lineHeight: 28px
  body-lg:
    fontFamily: Inter
    fontSize: 16px
    fontWeight: '400'
    lineHeight: 24px
  body-sm:
    fontFamily: Inter
    fontSize: 14px
    fontWeight: '400'
    lineHeight: 20px
  label-caps:
    fontFamily: Inter
    fontSize: 12px
    fontWeight: '600'
    lineHeight: 16px
    letterSpacing: 0.05em
rounded:
  sm: 0.25rem
  DEFAULT: 0.5rem
  md: 0.75rem
  lg: 1rem
  xl: 1.5rem
  full: 9999px
spacing:
  unit: 4px
  container-max: 1440px
  gutter: 24px
  margin-desktop: 40px
  margin-mobile: 16px
  stack-sm: 8px
  stack-md: 16px
  stack-lg: 32px
---

## Brand & Style

This design system is built on the pillars of reliability, structural clarity, and forward momentum. It targets business owners and service teams who require a high-density information environment that remains legible and stress-free. 

The aesthetic follows a **Corporate / Modern** movement—fusing the systematic precision of enterprise software with the approachability of modern consumer SaaS. The visual language prioritizes functional elegance, using generous whitespace to reduce cognitive load while employing strategic color accents to guide the user's journey toward growth-oriented actions.

## Colors

The palette is anchored by **Deep Professional Blue**, a color synonymous with stability and institutional trust. This is used for primary navigation, key branding elements, and primary success actions. 

**Clean Teal** serves as the functional secondary color, reserved specifically for "active" states, incremental growth indicators, and secondary call-to-actions to distinguish them from structural navigation. 

The **Neutral Palette** leans heavily on "Dark Slate" for typography to ensure high legibility without the harshness of pure black. Backgrounds remain predominantly white to maximize the "spacious" feel, with soft gray borders providing subtle containment for modular data.

## Typography

This design system utilizes a dual-font strategy. **Manrope** is used for headlines and display text to provide a refined, modern character that feels "designed" yet professional. **Inter** is the workhorse for all body copy, data tables, and UI labels due to its exceptional legibility at small sizes and its neutral, systematic aesthetic.

Hierarchy is established through weight and color rather than excessive size shifts. Display titles use tighter letter spacing for a "tucked-in" professional look, while labels and small captions use slightly increased tracking to maintain clarity in high-density dashboards.

## Layout & Spacing

The system employs a **12-column fixed-grid** layout for desktop, transitioning to a **4-column fluid-grid** for mobile devices. The core spacing rhythm is based on a 4px baseline, ensuring all elements align to a consistent mathematical scale.

- **Desktop:** 1440px max-width container, centered. Use 24px gutters to allow data-heavy components enough "breathing room" to prevent visual clutter.
- **Tablets:** Adaptive fluid width with 24px side margins.
- **Mobile:** 16px side margins with vertical stacking for all multi-column components.

Vertical rhythm should follow the "Stack" units (8/16/32px) to maintain a sense of structured growth and order throughout the platform.

## Elevation & Depth

To maintain the "Modern SaaS" aesthetic, depth is communicated through **Ambient Shadows** and **Tonal Layers**. 

1. **Surface Layers:** The primary background is white. Secondary containers (sidebars, utility panels) use a subtle "Surface" tint (#F8FAFC) to create a natural hierarchy without needing heavy lines.
2. **Shadow Profile:** Shadows must be extremely soft and diffused. Use a large blur radius (20px-30px) with low opacity (4-8%) blue-tinted grays. Shadows are reserved for floating elements like modals, dropdowns, and active cards.
3. **Borders:** Structural elements like input fields and table rows use low-contrast outlines (#E2E8F0). This creates a "flat-plus" look that feels organized but not heavy.

## Shapes

The shape language is defined by **Rounded (Level 2)** corners. This 8px-12px range is chosen to soften the "industrial" feel of business software, making it feel more like a modern tool and less like a legacy database.

- **Standard (8px):** Used for buttons, input fields, and small UI components.
- **Large (16px):** Used for cards, dashboard widgets, and modal containers.
- **Extra Large (24px):** Used for promotional banners or specialized "Growth" containers.

## Components

- **Buttons:** Primary buttons use the Deep Professional Blue with white text. Secondary "Action" buttons use a Clean Teal outline or subtle fill. All buttons feature an 8px corner radius and a subtle hover lift effect.
- **Input Fields:** Use a 1px border (#E2E8F0) with a 2px Teal focus ring. Labels sit above the field in `label-caps` style for maximum clarity.
- **Cards:** White background with a 1px border or a very soft ambient shadow. 16px padding is the minimum for internal content.
- **Chips/Badges:** Small, pill-shaped elements with low-opacity background fills of the primary or secondary colors. Used for status indicators (e.g., "Active", "In Progress").
- **Lists & Tables:** High-density but legible. Use subtle zebra-striping or thin horizontal dividers. Typography in tables should default to `body-sm`.
- **Data Visualizations:** Charts should utilize the Primary Blue and Clean Teal as the dominant data series colors, supported by Slate grays for axes and grid lines.