MiSchool

Overview

MiSchool is a comprehensive academic management and operational data platform designed for Indonesian schools, serving administrators, teachers, and staff. The design aesthetic embraces "Accessible Modernism"—a clean, bright interface with strategic use of vivid blue accents that convey trust, clarity, and forward momentum. The platform transforms complex school operations (attendance, discipline, teaching journals, student feedback) into intuitive workflows. The emotional response is one of calm competence: users feel supported by a system that anticipates their needs without overwhelming them with options.

The brand voice is professional yet approachable, speaking to educators in their language without condescension. Vocabulary emphasizes simplicity and action: "Masuk Sekarang" (Enter Now), "Fitur – Fitur" (Features), "Tentang Mischool" (About MiSchool). The tone avoids jargon; instead, it frames features as solutions to real school challenges. Example sentence in brand voice: "Kelola absensi siswa, catat pelanggaran, dan bagikan jurnal mengajar—semua dalam satu platform yang mudah digunakan." (Manage student attendance, record discipline, and share teaching journals—all in one easy-to-use platform.)

Colors

The color system is anchored by a vibrant, trust-inducing primary blue (#007bff) deployed on all call-to-action buttons, active navigation states, and key interactive elements. This blue is the visual signature of MiSchool's brand identity and appears most prominently in the hero CTA "Masuk Sekarang" (44px height, 9px 38px padding, border-radius 9999px). The secondary gray (#6c757d) provides neutral support for body text, disabled states, and secondary navigation. A supporting tertiary blue (#5d87ff) is used for accent elements like badges and secondary highlights, creating visual hierarchy without competing with primary.

The surface stack is built on a soft lavender-tinted white (#f6f4ff) that serves as the page background, creating a calm, approachable aesthetic. Surface containers prog

Typography

The type system uses Plus Jakarta Sans exclusively, a modern geometric sans-serif that conveys both professionalism and accessibility. Display (60px, 700 weight, -0.04em letter-spacing) is reserved for hero headlines like "Selamat Datang di MISCHOOL," commanding attention while remaining legible. Headline-lg (40px, 700 weight) anchors section titles; headline-md (28px, 700 weight) breaks content into digestible chunks. Body-md (17px, 400 weight, 26px line-height) is the workhorse for descriptive copy and feature descriptions, chosen to match the rendered DOM default. Label-md (15px, 700 weight) is applied to button text and navigation links, providing visual weight to interactive elements. Label-sm (12px, 600 weight, 0.05em letter-spacing) is used for badges, helper text, and metadata. On

Layout

The layout follows a 12-column fluid grid with a max-width container of 1140px, centering content on larger screens while allowing full-width breathing room on mobile. The page rhythm is structured around a "hero-then-features" model: a dominant hero section (padding: 120px 50px 50px 50px) establishes brand presence, followed by feature cards in a 3-column grid (col-md-4) with consistent md spacing (24px) between sections. White-space is generous: section separators use lg spacing (40px) to create visual rest between major content blocks. The gutter width is 24px, applied consistently to card padding and container margins. Feature cards use p-5 (padding: 3rem / 48px) internally, creating a spacious, uncluttered feel. Responsive breakpoints collapse to single-column layouts below 768px, wit

Elevation & Depth

Depth is conveyed through a restrained shadow system that avoids heavy drop-shadows in favor of subtle layering. Level 1 (Base) uses no shadow—the soft lavender background (#f6f4ff) provides the foundation. Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a gentle lift from the surface. Level 3 (Hover/Elevated States) escalates to box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), signaling interactivity without visual harshness. Focus states on inputs and buttons use a 0.2rem rgba(0, 123, 255, 0.25) ring (box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25)), providin

Shapes

The shape philosophy is "Soft-Technical Pragmatism"—rounded corners are used strategically to soften the interface while maintaining clarity and hierarchy. Buttons use border-radius: 9999px (full roundness), creating pill-shaped CTAs that feel friendly and inviting; this is the most prominent shape on the page and signals primary actions. Input fields and standard cards use border-radius: 0.5rem (8px), providing subtle rounding that feels modern without being playful. Secondary elements like dropdowns and select panels use border-radius: 4px, a tighter radius that maintains visual distinction

Components

Action Elements Buttons are the primary interaction mechanism. The button-primary component uses background: #007bff, color: #ffffff, padding: 9px 38px, height: 44px, border-radius: 9999px, with typography label-md (15px, 700 weight). On hover, the background transitions to #0056b3 over 0.3s ease-in-out, providing clear feedback. For premium or secondary CTAs, button-primary-gradient applies a linear-gradient(45deg, #79C7FF, #0042FF) that reverses on hover to linear-gradient(45deg, #0042FF, #79C7FF), creating a dynamic visual effect. The button-stroke variant uses a transparent background with a 2px solid border in #5d87ff, and on hover, the background fills with the gradient while the border becomes transparent—a smooth 0.3s transition. All buttons include cursor: pointer and transiti

Do's and Don'ts

**Do**

• Do use the primary blue (#007bff) exclusively for call-to-action buttons and active states—it is the brand's signature accent and must remain visually distinct.
• Do apply the full gradient (linear-gradient(45deg, #79C7FF, #0042FF)) only to premium or secondary CTAs; primary buttons use solid #007bff to maintain hierarchy.
• Do maintain the soft lavender background (#f6f4ff) as the page foundation—it creates the calm, approachable aesthetic that differentiates MiSchool from competitors.
• Do use Plus Jakarta Sans exclusively for all typography; it is the only font family declared in the rendered DOM and ensures brand consistency.
• Do apply box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) to standard cards and box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) on hover to create subtle depth without visual heaviness.
• Do use border-radius: 9999px (full roundness) for all primary buttons to signal interactivity and approachability.
• Do include focus rings (box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25)) on all interactive elements for keyboard navigation accessibility.

**Don't**

• Don't use the primary blue (#007bff) for body text, backgrounds, or non-interactive elements—reserve it exclusively for CTAs and active states to maintain visual hierarchy.
• Don't apply gradients to primary buttons; use solid #007bff only. Gradients are reserved for secondary or premium CTAs where visual distinction is needed.
• Don't replace Plus Jakarta Sans with system fonts or generic sans-serif fallbacks; the typeface is integral to the brand identity.
• Don't use box-shadow values larger than 0 8px 24px rgba(0, 0, 0, 0.12)—heavier shadows create a dated, skeuomorphic aesthetic that conflicts with the modern, accessible brand.
• Don't apply border-radius values smaller than 4px or larger than 9999px outside their designated use cases (inputs use 8px, cards use 12px, buttons use 9999px).
• Don't use the error red (#dc3545) for non-destructive actions or warnings—reserve it for validation failures and critical alerts only.
• Don't omit focus rings on interactive elements; they are essential for keyboard navigation and WCAG 2.1 AA compliance.