Sakai Vue

Overview

Sakai Vue is a professional enterprise dashboard framework that prioritizes data clarity and functional elegance. Built on PrimeVue components, it serves product teams, analysts, and administrators who need to visualize complex metrics without visual noise. The aesthetic movement is 'Functional Minimalism'—a philosophy that strips away decorative elements while maintaining visual warmth through carefully chosen accent colors and generous whitespace. The UI evokes a sense of calm authority: users feel in control of their data, never overwhelmed. The brand personality is precise, approachable, and trustworthy. Sakai speaks in clear, direct language without corporate jargon. Example sentence: 'Your revenue stream shows a 12% lift in Q3 subscriptions—here's where it came from.'

Colors

Sakai's color system is anchored in a light, neutral foundation with a vibrant emerald primary (#10b981) that commands attention on CTAs, active states, and key metrics. The surface stack uses slate grays (#f1f5f9 → #334155) to create visual hierarchy without harsh contrast; this ensures readability at 14px body text while maintaining a professional, calm aesthetic. Primary (#10b981) is used exclusively for actionable elements: 'Get Started' buttons, active navigation items, focus rings (3px rgba(16, 185, 129, 0.1)), and metric highlights. Secondary (#0ea5e9, sky blue) supports data visualization and secondary CTAs. Tertiary (#f59e0b, amber) flags warnings and secondary information. Error (#ef4444) is reserved for destructive actions and validation failures. The surface stack progresses: s

Typography

The type system uses Lato throughout, a humanist sans-serif that balances professionalism with approachability. Display (60px, 700 weight) anchors hero sections and major page titles. Headline-lg (40px, 600 weight) introduces dashboard sections. Headline-md (28px, 600 weight) is used for card titles and subsections. Title-lg (20px, 600 weight) marks metric labels and form headings. Body-lg (18px, 400 weight) is reserved for introductory copy and callouts. Body-md (14px, 400 weight) is the workhorse: table cells, descriptions, and default UI text. Label-md (14px, 600 weight) emphasizes button text and form labels. Label-sm (12px, 500 weight) handles badges, timestamps, and tertiary information. Letter-spacing ranges from -0.04em (display, to tighten large text) to +0.05em (label-sm, for leg

Layout

Sakai uses a 12-column fluid grid with a max-width of 1280px, centered on the viewport. The sidebar navigation occupies 280px (fixed), leaving 1000px for content on desktop; on tablet (768px+), the sidebar collapses to 60px icons. Spacing follows an 8px unit system: xs (4px) for micro-spacing within components, sm (12px) for internal padding, md (24px) for section gutters, lg (40px) for major section separation, and xl (64px) for hero/footer margins. Cards use md (24px) padding; inputs use sm (12px) padding. The container-max-width of 1280px ensures readability without excessive line lengths. Whitespace is generous: stat cards are separated by 24px horizontal gutters, and vertical rhythm is maintained at 8px increments. The layout philosophy prioritizes scanning: metrics are grouped into 4

Elevation & Depth

Depth is conveyed through subtle shadows and layering, never through color darkening. Level 1 (Base): no shadow; surface is #ffffff with a 1px border at #cbd5e1. Level 2 (Cards/Inputs): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); used on stat cards, input fields, and list items. Level 3 (Modals/Dropdowns): box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.06); applied to overlays and floating panels. Hover states elevate cards from Level 2 to Level 3 with a 0.2s transition. Focus rings are 1px solid #10b981 with a 2px offset and a 3px blur halo (rgba(16, 185, 129, 0.1)). Da

Shapes

The shape philosophy is 'Geometric Precision'—rounded corners are used strategically to soften interfaces without sacrificing clarity. Buttons use full (50% border-radius, 9999px) to create pill-shaped CTAs that feel modern and approachable. Cards and modals use md (0.75rem / 6px) for a subtle, professional curve. Inputs use DEFAULT (0.5rem / 4px) for a tighter, more technical appearance. Navigation items use sm (0.25rem / 2px) for minimal visual weight. Badges use full (9999px) to emphasize their discrete, contained nature. The rationale: larger radius values (full, xl) are reserved for prima

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses #10b981 background with white text, 48px height, 24px horizontal padding, and full border-radius (50%). On hover, the background shifts to #059669 with a 0.2s ease transition. On active/pressed, it becomes #047857. Button-secondary uses the primary-container background (#d1fae5) with on-primary-container text (#047857), maintaining the same dimensions. Focus states apply a 1px solid #10b981 outline with 2px offset and 3px rgba(16, 185, 129, 0.1) blur. Disabled buttons reduce opacity to 0.6 and remove pointer events.

Containers & Surfaces Cards are the primary content container. Standard card: background #ffffff, 1px border #cbd5e1, 6px border-radius, 24px padding, box-shadow 0 3px 8px rgba(0, 0, 0,

Do's and Don'ts

**Do**

• Do use the emerald primary (#10b981) exclusively for CTAs, active states, and focus indicators—never on backgrounds or body text.
• Do maintain 24px gutters between major sections and 12px between components to preserve the calm, spacious aesthetic.
• Do apply the full border-radius (50%) only to primary buttons and badges; use smaller radii (4–6px) for cards and inputs to maintain hierarchy.
• Do use Lato 14px regular for all body text and 14px 600 weight for labels; never mix font families or use system fonts.
• Do apply box-shadow 0 3px 8px rgba(0, 0, 0, 0.15) to cards and inputs; reserve the larger shadow for modals and overlays.
• Do ensure focus rings are 1px solid #10b981 with 2px offset and 3px blur halo for keyboard accessibility.

**Don't**

• Don't use the primary color (#10b981) for backgrounds, body text, or decorative elements—it's reserved for interactive states.
• Don't apply border-radius greater than 6px to form inputs or navigation items; the full radius is exclusive to buttons and badges.
• Don't mix Lato with system fonts or other typefaces; the entire system relies on Lato's consistent humanist character.
• Don't use shadows darker than rgba(0, 0, 0, 0.15) on light backgrounds or lighter than rgba(0, 0, 0, 0.3) in dark mode; maintain subtle depth.
• Don't apply color to text smaller than 12px without a 0.05em letter-spacing increase; small text needs extra breathing room.
• Don't use the secondary (#0ea5e9) or tertiary (#f59e0b) colors for primary CTAs; reserve them for data visualization and secondary actions.