CoLabs

Overview

CoLabs is a collaborative laboratory and office ecosystem designed for bio-tech and deep-tech startups across Australia. The brand embodies 'Warm Precision'—a design philosophy that merges scientific rigor with organic, tactile warmth. The interface celebrates the intersection of nature and technology through a carefully curated palette of golden yellows (#d9db4d), vibrant teals (#32c58b), and deep blues (#0046c7), set against a soft, off-white canvas (#f9f8f6). This aesthetic evokes the feeling of a living laboratory: energetic, collaborative, and grounded in real-world impact.

The CoLabs voice is direct, optimistic, and grounded in action. The brand speaks to founders and scientists as peers—no corporate jargon, no false promises. Tone: conversational yet authoritative, encouraging yet honest. Example: 'Build what the world needs faster with our support & community.' The typography system uses MatterSQ, a geometric sans-serif that balances approachability with technical credibility, reinforcing the brand's dual nature as both a welcoming community hub and a serious innovation engine.

Colors

The CoLabs color system is built on three primary roles: Primary (#d9db4d) is the signature accent—a warm, energetic yellow-green that appears on CTAs, highlights, and key interactive elements. It commands attention without aggression, evoking both scientific precision and natural vitality. Secondary (#0046c7) is a deep, confident blue used for secondary actions, links, and data-heavy contexts; it grounds the palette and adds gravitas. Tertiary (#32c58b) is a vibrant teal-green reserved for success states, positive reinforcement, and accent cards—it represents growth and forward momentum.

The surface stack uses a warm off-white (#f9f8f6) as the base, with carefully calibrated container layers (surface-container-lowest: #f3f1ed, surface-container: #e7e3db, surface-container-highest: #dbd6c

Typography

The type system is anchored by MatterSQ, a geometric sans-serif that communicates both approachability and technical authority. Display (60px, 700 weight, -0.04em tracking) is reserved for hero statements and major section breaks—the headline 'Making space for transformative innovation' uses this scale at 54.816px rendered size. Headline-lg (40px, 600 weight) and headline-md (28px, 600 weight) structure content hierarchy with tight negative tracking (-0.02em to -0.01em) to create visual punch. Body text (16px–18px, 400 weight, 24–28px line-height) is set with 0.01em positive tracking to enhance readability in dense paragraphs. Labels (12–14px, 500–600 weight) use 0.02em tracking for UI elements and buttons. All type scales include explicit line-height in pixels (not unitless ratios) to ens

Layout

CoLabs uses a 12-column fluid grid with a max-width of 1280px, allowing content to breathe on desktop while remaining responsive on mobile. The gutter is fixed at 24px, creating consistent rhythm across sections. White-space is generous—section separation uses lg spacing (40px) vertically, with md spacing (24px) for component-level breathing room. The container-max-width of 1280px ensures text never exceeds comfortable reading lengths (around 70–80 characters per line at body-md size). Hero sections use full-bleed imagery with overlaid text positioned at the left edge, leveraging the golden ratio for visual balance. Card grids typically span 3–4 columns on desktop, collapsing to 2 on tablet and 1 on mobile. Padding inside cards is consistently md (24px), with sm (12px) for compact list ite

Elevation & Depth

Depth in CoLabs is achieved through subtle shadow and layering, not through dark overlays or harsh contrast. The elevation system uses three tiers: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for resting cards and input fields, md (0 4px 12px rgba(0, 0, 0, 0.08)) for hovered cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like dropdowns or sticky headers. All shadows use soft, spread blur radii to avoid harsh edges. Interactive elements transition between elevation levels on hover with a 0.2s ease timing function. Input fields use an inset shadow (inset 0 1px 1px rgba(0

Shapes

The shape philosophy is 'Geometric Warmth'—sharp enough to feel modern and technical, rounded enough to feel approachable. Buttons and primary CTAs use lg radius (1rem / 16px), creating a soft-cornered rectangle that feels inviting without being bubbly. Cards and containers use xl radius (1.5rem / 24px) for a more pronounced softness, reinforcing the collaborative, human-centered nature of the spaces. Input fields use DEFAULT radius (0.5rem / 8px) for a neutral, business-like appearance. Badges and small UI elements use full radius (9999px) for pill-shaped consistency. The most-used radius in

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses {colors.primary} (#d9db4d) background with {colors.on-primary} (#1a1a1a) text, 48px height, md padding (24px horizontal), and lg radius (16px). On hover, the background transitions to {colors.primary-fixed-dim} (#cccf8f) with elevation.md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) applied over 0.2s ease. On active, the background darkens to #b8bb00 and scales to 0.98 for tactile feedback. Button-secondary uses a transparent background with a 2px solid border in {colors.primary}, matching the primary button's dimensions and radius. Secondary buttons transition to {colors.surface-container-high} background on hover while maintaining the border. All buttons use label-md typography (14px, 600 weight) and includ

Do's and Don'ts

**Do**

• Do use {colors.primary} (#d9db4d) exclusively for primary CTAs and high-priority interactive elements—it's the brand's signature accent and should never be diluted.
• Do maintain the 24px gutter and lg spacing (40px) between sections to preserve the generous, collaborative feel of the design.
• Do apply elevation.md shadow (0 4px 12px rgba(0, 0, 0, 0.08)) on hover for cards and buttons to create tactile feedback without harsh contrast.
• Do use MatterSQ typography at the specified weights and tracking values—geometric sans-serifs lose their precision if tracking is ignored.
• Do reserve {colors.tertiary} (#32c58b) for success states and positive reinforcement, never for neutral or secondary content.
• Do use 0.2s ease timing for all interactive transitions to maintain the brand's smooth, confident pace.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text or backgrounds—the brand uses warm off-whites (#f9f8f6) and near-blacks (#1a1a1a) for a softer, more organic feel.
• Don't apply drop shadows to cards at rest—shadows should only appear on hover to signal interactivity.
• Don't mix {colors.primary} with {colors.secondary} or {colors.tertiary} in the same component—each color has a distinct role and mixing dilutes the hierarchy.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full)—arbitrary radii break the geometric precision.
• Don't apply text-shadow to body text—it's reserved for small labels over busy backgrounds only.
• Don't exceed the container-max-width of 1280px or use gutters smaller than 24px, as this compromises readability and the spacious, collaborative aesthetic.