The ROSE Network visual identity and component reference.
The ROSE Network logo exists in two formats. Use the horizontal version in headers and horizontal layouts. Use the portrait version in footers and compact spaces. Always maintain clear space around the logo.
Horizontal — light background
Horizontal — dark background
Portrait — light background
Portrait — dark background
The palette is built around four signature colours — teal, gold, sage, and ICA red — supported by neutral tones that convey institutional authority with warmth.
Primary Colours
Primary (Teal)
--color-primary
Primary Dark
--color-primary-dark
Primary Deeper
--color-primary-deeper
Accent (Gold)
--color-accent
Sage (Green)
--color-sage
ICA Red
--color-ica-red
Neutrals & Backgrounds
Background
--color-bg
Surface (White)
--color-surface
Highlight
--color-highlight
Text
--color-text
Text Muted
--color-text-muted
Border
--color-border
Two typefaces create the editorial tone: Spectral for headings (authority, tradition) and Figtree for body text (clarity, accessibility).
Heading — Spectral
H2 — Section Heading
H3 — Card / Subsection Heading
Hero Subtitle — Spectral Italic
Intelligence. Community. Opportunity.
Body Text — Figtree
The ROSE Network connects serving personnel, veterans, and their families with trusted professional opportunities and mentoring across the Intelligence Corps community.
Section Lead
Built for those who have served, those who are serving, and those who support them.
Label / Uppercase
Transition Network EnterpriseTwo button styles provide clear visual hierarchy. Primary buttons drive action; secondary buttons offer alternatives.
Cards are the primary content container. Each variant serves a different purpose but shares a consistent border, radius, and hover pattern.
Pillar Cards
Structured support for Service Leavers navigating the move to civilian employment.
Connecting the Corps family with trusted contacts across industries.
Opening commercial pathways and organisational partnerships.
Principle Cards (Icon Cards)
One-to-one guidance from experienced professionals.
Employment passed through the civilian network.
A network that compounds with every new member.
Pathway Cards (Top Accent)
Register for transition support and career guidance.
Contribute your expertise and industry connections.
Access a trusted pipeline of intelligence-trained professionals.
Step Cards (Numbered)
Complete the initial contact form.
Matched with a relevant Networker.
Receive guidance and introductions.
Pill-shaped tags for categorisation. Hover to see the interactive state.
Consistent spacing creates rhythm across the site. All spacing uses CSS custom properties.
Shadows
Border Radius
Container
Max width: 1160px with 2rem horizontal padding. Class: .container
Standard grid configurations used across the site. All grids collapse responsively.
3-Column (Default)
4-Column
Content + Sidebar
Footer Grid
Consistent accent lines and gradients create visual cohesion across the site.
The ROSE Network's voice should be consistent across all communications.