[ SYSTEM SPECIFICATION // V1.0 ]

AWS SBG USJ Design System

The definitive design system and component specification derived from the official brand identity. Engineered for developers, designers, and AI agents to craft unified, technical interfaces.

01. Official Color Matrix

#FF9900

Builder Orange

Primary Brand / Hero Fill / CTAs

oklch(0.72 0.18 55.0)

#FFB84D

Builder Orange Light

Hover States / Glow Accents

oklch(0.80 0.14 62.0)

#0A0E17

Builder Dark Canvas

Primary Background / Dark Elements

oklch(0.14 0.02 260.0)

#161F2E

Builder Slate Surface

Cards / Mosaic Blocks / Anchors

oklch(0.22 0.03 255.0)

02. Typography Pairing

[ PRIMARY DISPLAY & BODY ]Google Fonts

Space Grotesk

Applied to all high-impact headlines, navigation items, buttons, and readable body paragraphs. Offers clean geometric proportions, high x-height, and architectural crispness.

Aa Bb Cc 123 - Black 900

From Students to Builders - Bold 700

Clean geometric paragraph text for comfortable reading.

[ SECONDARY MONOSPACE ]Google Fonts

JetBrains Mono

Applied to brand signatures, eyebrows, terminal headers (Launching soon...), cloud coordinates, metrics, and tags.

AWS Student Builder Group at University of Sri Jayewardenepura

[ STATUS: 200 OK // 48px GRID SYSTEM ]

0123456789 (const aws = new CDK.Stack())

03. The 7×7 Builder Chip Glyph

Iconic Hardware-Software Silicon Motif

Derived directly from the official graphics. Formed of an outer 5×5 square ring with a 3×3 hollow center, augmented by 3 modular pins per side (12 leads total), mapped onto an exact 7×7 coordinate grid.

Orange on Dark Canvas

Dark on Builder Orange

Framed Anchor Block

[ OFFICIAL COMBINED BRAND BADGE ]

AWS Student Builder Group

at University of Sri Jayewardenepura

04. Modular Grid & Mosaic System

[ 48px × 48px ARCHITECTURAL GRID ]

Dark Coordinate Canvas

1px coordinate lines with 7% white opacity against deep dark #0A0E17.

class: .bg-builder-grid-dark

[ STEPPED BUILDER MOSAIC ]

Pixelated Architectural Blocks

Replicates the mosaic seen in the official banners and teaser graphics.

05. React Bits ShapeGrid Canvas

[ REACT BITS ANIMATED SQUARE CANVAS ]

Interactive Square Grid Backdrop

Integrated from React Bits. Features configurable tile dimensions, animation velocity, diagonal drift, and mouse hover trails with fading opacities matching our 48px square architecture.

Move Cursor Across Canvas

squareSize: 48px • speed: 0.4 • direction: diagonal • trail: 5