STMIK Triguna Dharma

Overview

STMIK Triguna Dharma's design system embodies Institutional Clarity—a purposeful aesthetic that prioritizes information hierarchy, accessibility, and institutional trust through structured layouts and deliberate color signaling. The brand serves students, faculty, and prospective applicants navigating academic programs and administrative functions; the UI conveys competence and stability through a cool blue institutional palette anchored by a vibrant orange accent that signals actionable moments (registration, enrollment, calls-to-action). The emotional response is one of professional reassurance: the interface feels organized, navigable, and authoritative without coldness.

The voice is formal yet approachable, precise and procedural. Vocabulary favors clarity over flourish: "Register Online," "View Accreditation," "Login," "Go." Sentences are direct and task-oriented. Example sentence in brand voice: "Teknik Komputer (D-III) holds accreditation rating B from BAN-PT—view the certificate."

Colors

The color system operates on a dual-axis model: institutional authority (deep blue #094a80 for navigation, headers, and secondary CTAs) paired with energetic action (vivid orange #ff6305 for primary CTAs, registration links, and urgent calls). The neutral foundation (#ffffff surface, #eeeeee container-lowest, #333333 on-surface text) ensures legibility across dense information layouts typical of academic portals. Primary (#ff6305) is reserved exclusively for high-priority interactive elements—the "Register Online" button in the top bar, login submission, and enrollment actions—creating visual urgency without overuse. Secondary (#094a80) anchors the header bar, primary navigation, and institutional branding, conveying stability and official authority. Tertiary (#1abc9c) accents accreditatio

Typography

The type system pairs Raleway (headlines, institutional titles, navigation) with Lato (body, labels, form text), creating a hierarchy that separates structural content from transactional copy. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major institutional announcements; headline-lg (40px, 600 weight) frames section titles and program names; headline-md (28px, 600 weight) organizes subsections; title-lg (20px, 600 weight) labels cards and form groups. Body-lg (18px, 400 weight, 28px line-height) and body-md (16px, 400 weight, 24px line-height) carry descriptive and procedural text, with generous line-height (1.5–1.75) ensuring readability in dense academic content. Label-md (14px, 600 weight, 0.02em tracking) and label-sm (12px, 500 weight, 0.03em tracking) handl

Layout

The layout operates on a 12-column fluid grid with a fixed container max-width of 1199px, accommodating both desktop and tablet viewports without excessive horizontal scrolling. The page rhythm follows a modular card-based structure: header (fixed, 56px height with 16px vertical padding), primary navigation (48px height, full-width blue bar), hero/carousel section (variable height, typically 300–400px), and content sections separated by lg spacing (40px vertical margin). The gutter is consistently 24px between columns and sections, creating visual breathing room without excessive whitespace. Container padding is 24px on desktop, reducing to 16px on tablets and 12px on mobile. Form fields and input groups use sm spacing (12px) for internal padding and md spacing (24px) for vertical separati

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle background shifts rather than dramatic layering. Level 1 (Base): white surface (#ffffff) with no shadow, establishing the default plane. Level 2 (Cards, Dropdowns): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), a soft shadow with 3px vertical offset and 8px blur, creating gentle separation from the base. Level 3 (Modals, Overlays, Hover States): box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12), a deeper shadow with 8px offset and 16px blur, reserved for floating panels and elevated interactive states. The header bar uses Level 2 shadow to

Shapes

The shape philosophy is Institutional Minimalism: minimal rounding that conveys professionalism and precision without softness. Border-radius follows a tight scale: sm (2px) for subtle softening on small UI elements (badges, small buttons), DEFAULT (3px) for primary components (buttons, input fields, cards), md (4px) for slightly larger containers, lg (6px) for larger cards and modals, xl (10px) for hero sections and full-width containers, and full (9999px) for circular elements (avatars, icon buttons). Buttons use DEFAULT (3px) radius, creating a clean, squared-off appearance that reinforces

Components

Action Elements Buttons follow a three-tier system: primary (orange #ff6305, 12px label-md, 6px 12px padding, 32px height, 3px radius) for high-priority actions like "Register Online" and form submission; secondary (semi-transparent dark overlay rgba(0, 0, 0, 0.3) with blue text #094a80, 14px body-md, 8px 16px padding, 40px height, 0px 3px 3px 0px radius) for contextual actions like "View More"; tertiary (solid blue #094a80, 12px label-md, 8px 16px padding, 36px height, 4px radius) for navigation and supplementary actions. All buttons transition on hover via background-color 150ms ease-out, with primary shifting to #cc4d00 (darker orange), secondary to rgba(0, 0, 0, 0.4), and tertiary to #063a66 (darker blue). Focus states add a 2px outline at {colors.primary} with 4px offset, ensuring

Do's and Don'ts

**Do**

• Do use primary orange (#ff6305) exclusively for high-priority CTAs (registration, enrollment, login submission) to create visual urgency and guide user attention.
• Do maintain the 3px default border-radius on buttons and cards to preserve institutional precision and avoid softness that undermines authority.
• Do apply Level 2 shadow (0 3px 8px rgba(0, 0, 0, 0.15)) to cards and dropdowns, transitioning to Level 3 on hover to signal interactivity without dramatic depth shifts.
• Do use Raleway for all headlines and structural content (navigation, titles, institutional names) and Lato for body text and forms to maintain clear typographic hierarchy.
• Do preserve white (#ffffff) as the dominant surface color and use surface-container-high (#dddddd) for alternating sections to reduce visual fatigue in information-dense layouts.

**Don't**

• Don't apply primary orange to non-interactive elements (backgrounds, borders, decorative accents) as it dilutes the urgency signal and confuses user intent.
• Don't use rounded corners larger than lg (6px) on standard components; excessive rounding (12px+) contradicts the institutional minimalism aesthetic and reads as casual rather than authoritative.
• Don't layer multiple shadows (e.g., combining Level 2 and Level 3) on a single element; the shadow system is discrete and mutually exclusive to maintain clarity.
• Don't mix Raleway and Lato within a single headline or body paragraph; maintain strict separation—Raleway for structure, Lato for content—to avoid visual fragmentation.
• Don't introduce new accent colors (greens, purples, reds) for non-error states; the tertiary teal (#1abc9c) is reserved for accreditation badges and status indicators only.