sg-crest
A Singapore Government Agency Website

Government officials will never ask you to transfer money or disclose bank log-in details over a phone call.

Call the 24/7 ScamShield Helpline at 1799 if you are unsure if something is a scam.

Back to Documentation

UI Documentation

Comprehensive design system documentation including favicons, colors, typography, components, and layout guidelines for HSA Self Help Tools platform.

Documentation Progress

3 of 7 sections available

43%

Complete

Available Sections

Favicons & Logos

Available

Complete guide to HSA favicons and logos. Learn how to use each file for optimal display across all platforms and devices.

View Documentation

Static Assets (CloudFront/S3)

Available

Guide to hosting and accessing static images and videos from AWS S3 with CloudFront CDN for optimal performance and scalability.

View Documentation

Color Palette

Coming Soon

HSA brand colors, color usage guidelines, accessibility standards, and color combinations for consistent branding.

Typography

Coming Soon

Font families, font sizes, line heights, font weights, and typography scale for consistent text styling.

Components

Available

Reusable UI components including buttons, cards, forms, modals, and navigation elements with usage examples.

View Documentation

Icons

Coming Soon

Icon library, icon usage guidelines, sizes, and best practices for using icons throughout the platform.

Layout Guidelines

Coming Soon

Grid systems, spacing, breakpoints, and layout patterns for responsive design across all device sizes.

Design Principles

Consistency

Maintain visual and functional consistency across all applications and platforms.

Accessibility

Design with WCAG AA compliance for inclusive user experiences.

Clarity

Create clear, intuitive interfaces that guide users to accomplish their goals.

UI Documentation | HSA Documentation