Structured & Balanced
Living component library for the GOER design system.
Design Rules
general
color
components
layout
Exact Color Definitions
Depth
Deep, structured, and foundational navy tones.
Energy
Warm, friendly, and inviting sun tones.
Sky
Expansive and bright sky blues.
Versatile Accents
Carefully tuned with 3 variations (light, base, dark) to maintain excellent vibrancy against both white backgrounds and deep navy blocks.
Functional Scales
Full OKLCH-based scales for success, danger, info, and warning — replacing raw Tailwind defaults.
Signature Contrast Patterns
The Navy Focus Block
Navy is used intentionally to pause the user, providing a high-contrast foundation for our most important calls to action.
Elevated Excellence
When deployed on a white page, a massive navy block stops scrolling in its tracks. The sun button completes the contrast hierarchy.
Accent Versatility
Watch how Electric and Violet adapt seamlessly as bold features on Light Backgrounds, and striking neons on Navy Backgrounds.
On Light Surfaces
Modern Integrations
The electric accent is deep enough to read clearly as an icon or text against absolute white.
Pioneer Access
Violet pops gorgeously alongside navy text, providing a highly premium look.
On Navy Focus Blocks
Electric Punch
Within a dark context, electric acts like a neon light, guiding the user effortlessly.
Deep Contrast
Violet holds its ground against deep navy, bleeding beautifully into the dark background.
Typography Examples
P22 Mackinac Pro
var(--font-serif)
Used for high-impact headlines, expressive moments, and establishing trust.
TT Commons Pro
var(--font-sans)
Used for all body copy, interface elements, and data display. Clean and legible.
Scale & Hierarchy
Dynamic Growth
Scale Your Vision
Core Platform Features
For introductory paragraphs and important descriptions. The quick brown fox jumps over the lazy dog, creating balance.
Standard interface copy and reading text. It maintains excellent legibility at smaller sizes while keeping a modern geometric structure.
Elements Pack
GButton
Props: variant: sun | navy | sky | electric | outline | ghost | glass | white (default: sun)size: sm | md | lg (default: md)to — Vue Router path → renders as <RouterLink>href — External URL → renders as <a target="_blank">icon — Position controlled by iconPositioniconPosition: left | right (default: right)block (default: false) — Full-widthdisabled (default: false)type: button | submit | reset (default: button)
On Light Background
On Dark Background
GInput & GTextarea
Props: modelValue — Use v-modellabelplaceholdertype (default: text) — Any HTML input typeerror — Shows danger-colored error message below inputrequired (default: false)id — Auto-generated if omitted
Special characters are not allowed.
This field is required.
GIconBox
Props: icon — Requiredcolor: sky | sun | navy | violet | electric | success | danger | info | warning | slate (default: sky)variant: light | solid | glass (default: light) — glass only on navy/dark backgroundssize: sm | md | lg (default: md)
Light variant — all colors, md size
Solid variant
Glass variant (on navy)
GCard
Props: variant: light | dark | tinted (default: light) — dark = navy bg + white text; tinted = slate-50 bgpadding: sm | md | lg (default: md)rounded: md | lg | xl (default: xl)hoverable (default: false)border (default: true)
light + hoverable
The default card — white background with a subtle border. Hover to see the shadow effect.
dark + hoverable
Navy background with white text — used for feature cards and CTA areas.
tinted
Slate-50 background — for secondary info blocks and section sub-containers.
GSectionHeader
Props: title — Requiredsubtitletag — Small uppercase label above titlealign: left | center (default: center)dark (default: false) — Use inside GCard variant="dark" or GHero
Centered, with tag
Our Accreditation Process
Transparent, proportionate, and focused on real-world practice — not box-ticking.
Left-aligned, dark mode
Expert Partners
We connect ambitious providers with elite experts across curriculum, product, and operations.
GChecklistItem
Props: color: sky | sun | electric | success | accent-violet (default: sky)dark (default: false) — Use inside GCard variant="dark"size: sm | md (default: md)
All colors — light
- Full accreditation included
- Preferred partner pricing
- Priority review timeline
- Verified GOER badge
- Pioneer network access
- Small variant — Supporting detail text
All colors — dark mode
- Full accreditation included
- Preferred partner pricing
- Priority review timeline
- Verified GOER badge
Content Blocks
Did you know?
The box-shadow-premium class is specifically tuned to our deep navy tones.
Warning Example
This card uses the energy colors lightly inside a subtle block layout for alerts.
Success Confirmation
Used for accreditation confirmations, verification states, and completion feedback.
Error State
Validation errors, failed submissions, and critical system alerts.
GHero Patterns
GHero — Sky gradient variant
Design System
The GHero Component
Background content goes in the background slot. Main content goes here, always z-10.
GCtaBanner — standalone
Preferred pricing.
Maximum leverage.
GOER providers unlock elevated access automatically.