Brand Guidelines

Proposed color and typography system for STIKOM Yos Sudarso

This page is a working draft for the public-facing visual system. The direction starts from the logo itself: sky blue, warm gold, maroon red, and strong dark outlines, then translates those elements into a cleaner web identity.

Back to homepage

This page can be revised later once the final brand direction is approved.

The site should not be built on maroon alone. For this institution, blue should carry the main visual field, maroon should handle action, gold should work as accent, and dark ink should anchor typography. That keeps the website academic, modern, and still tied to the official mark.

Recommended direction

Recommended palette

This palette is intentionally tighter than the full logo. The goal is not to mirror every logo color, but to create a digital system that is stable and easy to apply.

STIKOM Maroon

#95001E

Primary action color for buttons, key links, and institutional emphasis.

Academic Sky

#69B7E3

Primary identity hue drawn from the logo field, suited for hero areas, panels, and academic highlights.

Signal Gold

#F3D23B

Warm accent for stats, featured labels, and elements that should feel optimistic.

Campus Ink

#1F2D3D

Dark neutral for headings, footer, overlays, and high-priority text.

Slate Support

#5D6B78

Support tone for secondary copy, dividers, and metadata.

Ivory Paper

#F7F3EA

Soft background for informational sections to keep the site warm and institutional.

Recommended typography

Modern university websites tend to work best when headings use an editorial serif and body text uses a clean sans-serif. For STIKOM, that pairing balances academic credibility with technical clarity.

Headings and institutional statements

Source Serif 4

It feels academic and established, and it suits a higher-education institution better than a generic sans.

Body, navigation, and interface

Public Sans

Clear, modern, and reliable for a bilingual website. Formal enough for an institution without feeling stiff.

Data, slugs, and technical utility

Geist Mono

Still useful in admin and technical contexts without dominating the public brand expression.

Simple usage rules

Use Academic Sky for large identity surfaces: hero areas, information strips, and introductory sections.
Use STIKOM Maroon for primary CTAs, key links, and active states.
Use Signal Gold sparingly for metrics, highlights, and featured labels. Do not use it for long-form text.
Use Campus Ink for headings and major footer surfaces. Move away from the older brown as a core system color.
Keep the hero slider visually disciplined: strong media, short copy, and a light dark overlay so video remains readable.

Layout direction

Across your references, the strongest pattern is not a homepage filled with unrelated blocks, but a clear sequence: strong hero, quick facts, programs, admissions, trust, then news. STIKOM should feel like a confident institution site, not an older campus portal.

Hero

Strong visual, short message, one clear action.

Programs

Academic offer first

Admissions

Clear next steps

Trust

Accreditation, contact, outcomes

Implementation note

I have already prepared the base color variables and this font pairing inside the app, so the visual rollout can happen in stages without reworking the content structure again.

References used