SMP Labschool Jakarta

Overview

SMP Labschool Jakarta is a premier Indonesian junior secondary institution positioned as an academic excellence hub within the Labschool UNJ network. The design system embodies 'Institutional Prestige Modernism'—a visual language that merges institutional authority with contemporary digital sophistication. The brand evokes confidence, aspiration, and forward-thinking pedagogy through a vibrant blue-to-purple gradient hero aesthetic paired with glassmorphic interface elements that suggest transparency and accessibility. The UI communicates that this is a school unafraid of modernity, yet grounded in rigorous academic standards.

The brand voice is authoritative yet approachable: direct, achievement-focused, and celebratory of student accomplishment. Vocabulary patterns emphasize 'prestasi' (achievement), 'fasilitas modern' (modern facilities), and 'kurikulum berkualitas tinggi' (high-quality curriculum). The tone avoids corporate jargon; instead, it speaks to parents and students with clarity and pride. Example sentence in brand voice: 'Kami menghasilkan 50+ prestasi tahun ini—setiap siswa adalah bagian dari kesuksesan Labschool.'

Colors

The color system is anchored by a vibrant primary blue (#3b82f6) that dominates CTAs, navigation highlights, and focus states—this is the institutional signature color, appearing on the 'Pelajari Lebih Lanjut' button and throughout interactive elements. Secondary purple (#a855f7) provides a complementary accent for badges, highlights, and tertiary actions, creating visual rhythm without competing for attention. The tertiary yellow (#facc15) is reserved for accent highlights and celebratory elements (e.g., achievement badges). The surface stack progresses from pure white (#ffffff) for the main canvas through light blues (#dbeafe, #bfdbfe, #93c5fd) for container hierarchy, ensuring sufficient contrast for accessibility while maintaining the brand's cool, modern aesthetic. On-surface text is

Typography

The typography system uses Nunito Sans exclusively, a humanist sans-serif that balances institutional credibility with contemporary warmth. Display (60px, 700 weight, -0.04em letter-spacing) anchors hero headlines with commanding presence; Headline-lg (40px, 600 weight) is used for major section titles; Headline-md (28px, 600 weight) for subsections; Title-lg (20px, 600 weight) for card titles and navigation labels. Body-lg (18px, 400 weight, 28px line-height) is reserved for hero copy and prominent descriptive text, while Body-md (16px, 400 weight, 24px line-height) serves as the default body text for paragraphs and list content. Label-md (14px, 600 weight, 0.02em letter-spacing) is applied to button text and form labels, and Label-sm (12px, 500 weight, 0.03em letter-spacing) for badges a

Layout

The layout follows a 12-column fluid grid with a maximum container width of 1280px, ensuring responsive scaling from mobile (single column) through tablet (6–8 columns) to desktop (12 columns). The gutter spacing is consistently 24px (md spacing token), applied as margin between grid items and padding within containers. Hero sections span full viewport width with a 90vh minimum height, creating immersive entry points; content within heroes is centered and uses lg spacing (40px) for section separation. Card-based layouts (e.g., achievement statistics, news articles) use md spacing (24px) for inter-card gaps and sm spacing (12px) for internal padding. Navigation and header elements maintain a fixed 56px height on desktop (h-16 in Tailwind) with 14px vertical padding, ensuring touch-target co

Elevation & Depth

Depth is conveyed through a three-tier shadow and glass system. Level 1 (Base/Cards): standard cards use box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), creating subtle separation from the surface without visual heaviness. Level 2 (Elevated/Modals): modals and prominent containers use box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), signaling modal priority and focus. Level 3 (Glass/Hero Overlays): glassmorphic elements layer backdrop-filter: blur(20px) with background: rgba(255, 255, 255, 0.1) and a 1px border at rgba(255, 255, 255, 0.2), creating a frosted-lens effect that floats above the hero grad

Shapes

The shape philosophy is 'Soft Institutional'—rounded corners are used strategically to soften the formal nature of an educational institution while maintaining professional clarity. Buttons use lg radius (1rem / 16px) for primary actions, creating approachable, clickable targets; secondary buttons use full radius (9999px) for a pill shape, reinforcing their secondary role. Cards and containers default to xl radius (1.5rem / 24px), balancing softness with visual distinction from the background. Input fields use DEFAULT radius (0.5rem / 8px) for a more utilitarian, form-like appearance. Glass ov

Components

Action Elements Primary buttons (button-primary) use background: {colors.primary} (#3b82f6), text: {colors.on-primary} (white), padding: 16px 32px, height: 48px, rounded: lg (1rem), and box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3). On hover, the background transitions to #2563eb (darker blue) with an expanded shadow (0 8px 20px rgba(59, 130, 246, 0.4)) over 300ms ease-out. On active/pressed, the background drops to #1e40af with a reduced shadow (0 2px 8px rgba(59, 130, 246, 0.2)), creating tactile feedback. Secondary buttons (button-secondary) use a glassmorphic treatment: background: rgba(255, 255, 255, 0.1), border: 1px solid rgba(255, 255, 255, 0.2), backdrop-filter: blur(8px), padding: 12px 24px, height: 44px, rounded: full (9999px). On hover, the background increases to rgba(255

Do's and Don'ts

**Do**

• Do use the primary blue (#3b82f6) exclusively for CTAs and interactive focus states—this creates a consistent, recognizable affordance across the entire interface.
• Do apply glassmorphic treatments (backdrop-filter: blur(20px–40px) + rgba(255, 255, 255, 0.1–0.15)) only to hero overlays and secondary buttons to maintain visual hierarchy and prevent glass from becoming the default.
• Do maintain the 300ms ease-out transition timing across all hover and focus state changes—this creates a cohesive, polished interaction feel.
• Do use the full rounded radius (9999px) exclusively for secondary buttons and badges to visually distinguish them from primary buttons (lg radius) and cards (xl radius).
• Do enforce the 1280px container max-width on desktop to prevent excessive line lengths and maintain readability at 65–75 characters per line.

**Don't**

• Don't use the secondary purple (#a855f7) or tertiary yellow (#facc15) as primary CTA colors—these are supporting accents only and will dilute the brand's visual clarity.
• Don't apply drop shadows to glass elements; rely instead on backdrop-filter blur and border opacity to establish depth—drop shadows flatten the frosted-lens effect.
• Don't mix rounded radii arbitrarily; always use lg (1rem) for buttons, xl (1.5rem) for cards, DEFAULT (0.5rem) for inputs, and full (9999px) for pills to maintain visual grammar.
• Don't use Nunito Sans weights below 400 (regular) or above 700 (bold)—this maintains the humanist character without introducing visual noise or excessive contrast.
• Don't apply the primary blue (#3b82f6) to non-interactive elements (e.g., body text, backgrounds, decorative shapes)—reserve it exclusively for CTAs, links, focus states, and badges to preserve its affordance signal.