Design System

STYLEGUIDE

Complete documentation of colors, typography, spacing, and components.

Foundation

Colors

Brand color palette and neutral scale used throughout the design system.

Brand Colors

do-yellow

#e8ff8f

Primary accent, CTAs, highlights

do-yellow-light

#f0ffb5

Hover states, subtle accents

do-yellow-bg

#edffa8

Page backgrounds (yellow pages)

do-green

#26341d

Primary text, dark backgrounds

do-green-outline

#3c3d37

Borders, outlines

do-green-bg

#adffa9

Green page backgrounds

do-pink

#ffadf7

Secondary accent, buttons

do-blue-bg

#a2fbff

Blue page backgrounds

do-gray

#ededed

Gray page backgrounds, cards

do-text-gray

#928989

Secondary text, captions

do-black

#1a1a1a

Card borders, dark elements

Neutral Scale

neutral-100

#ffffff

neutral-200

#f3f4f6

neutral-300

#d9d9d9

neutral-400

#a2a3a4

neutral-500

#656565

neutral-600

#4a4a4a

neutral-700

#313131

neutral-750

#252525

neutral-800

#191919

neutral-900

#0d0d0d

Typography

Font families, heading styles, and text scales used in the design system.

Font Family

Primary Font

JetBrains Mono

Monospace font used for all headings and body text. Excellent readability for technical content. Weights: 300-700.

Section Labels

.section-label

Hero Section Service Section Core Services Testimonials

Small uppercase display text with wide letter spacing. Used as section headers above content areas.

Heading Hierarchy

.text-hero / Hero Text

DO AI

Hero text. Uses JetBrains Mono. Clamp: 3rem - 10rem. No uppercase (preserve original case).

<h1> / .h1

Page Title Heading

H1 heading. Uses JetBrains Mono, uppercase, font-weight 700. Clamp: 2.5rem - 8rem.

<h2> / .h2

Section Heading

H2 heading. Uses JetBrains Mono, uppercase, font-weight 700. Clamp: 2rem - 6rem.

<h3> / .h3

Subsection Heading

H3 heading. Uses JetBrains Mono, uppercase, font-weight 700. Clamp: 1.5rem - 3rem.

<h4> / .h4

Card Title Heading

H4 heading. Uses JetBrains Mono, uppercase, font-weight 700. Clamp: 1.25rem - 2.5rem.

Underline Heading Styles

.heading-underline

Standard Underline

Default underline with 2px thickness and 4px offset. Used for card titles and links.

.heading-underline-thick

Thick Yellow Underline

4px yellow underline with 8px offset. Used for section titles and emphasis.

Body Text Sizes (JetBrains Mono)

text-base (1rem / 16px)

The quick brown fox jumps over the lazy dog. This is the default body text size used for paragraphs and general content.

text-lg (1.125rem / 18px)

The quick brown fox jumps over the lazy dog. Used for lead paragraphs and emphasized body text.

text-xl (1.25rem / 20px)

The quick brown fox jumps over the lazy dog. Used for large body text and subheadings.

text-sm (0.875rem / 14px)

The quick brown fox jumps over the lazy dog. Used for captions, labels, and secondary text.

text-xs (0.75rem / 12px)

The quick brown fox jumps over the lazy dog. Used for fine print and metadata.

Font Weights

Light

300

Regular

400

Medium

500

SemiBold

600

Bold

700

Text Styles

underline decoration-2

Standard underline

underline underline-offset-4

Underline with offset

decoration-do-yellow decoration-4

Yellow thick underline

font-mono

Monospace text

line-clamp-2

This is a long text that should be clamped to two lines. It demonstrates the line-clamp utility used in cards and lists.

tracking-wide

Wide letter spacing

Visual Styles

.img-square

Square corners (0 border radius) with 2px black border. All images use sharp corners.

.shadow-box

Card with box shadow

8px × 7.5px offset shadow with 25% black opacity. Matches Webflow card-shadow.

.shadow-box-lg

Large shadow card

12px × 10px offset shadow with 25% black opacity. For tablet breakpoint.

.shadow-box-sm

Small shadow

4px × 4px offset shadow with 25% black opacity. For mobile breakpoint.

border-2 border-do-black

Solid border (2px)

Solid border (1px)

Primary border style for cards and containers. Use border-2 for most elements.

border-2 border-dashed

Dashed border

Dashed borders with reduced opacity for decorative separators and section dividers.

Hover: shadow-lg + lift

Interactive card hover

Hover adds 1px lift with shadow-box-lg (12px × 10px) for emphasis.

Form States

Contact Form - Success State

Message sent successfully!

Thanks for reaching out. We've received your message and will get back to you within 48 hours.

Classes used:

Card: bg-do-green-bg (light green #adffa9) - applied via JS on success
Message container: bg-do-green-bg p-6 rounded (no border)
Heading: text-do-green (dark green #26341d)
Body: text-do-green (dark green)
Button: variant="outline" (standard outline style)

The success state applies bg-do-green-bg to the entire card and removes the border from the message container. The card reverts to bg-do-gray when "Send another message" is clicked.

Foundation

Spacing & Layout

Container widths, section spacing, and layout utilities.

Container Widths

default (max-w-7xl / 80rem / 1280px)

Standard content container with auto margins and responsive padding

wide (max-w-[90rem] / 1440px)

Wider container for hero sections and large content areas

narrow (max-w-4xl / 896px)

Narrow container for focused content like articles and forms

Section Spacing

tight: py-8 md:py-12

default: py-16 md:py-24

loose: py-24 md:py-32

Component Padding

compact: p-4

default: p-8

large: p-12

none: p-0

Custom Spacing Values

18 (4.5rem / 72px)

22 (5.5rem / 88px)

Components

Atomic Components

Smallest, foundational UI elements.

DashLines

horizontal

vertical

both

Button

Variants (all uppercase)

Sizes (Dark Variant)

ArrowCTA

Variants

OUTLINE DARK PRIMARY PINK

Sizes

SMALL DEFAULT LARGE

PartnerLogo

With grayscale hover effect

Components

Simple Components

Reusable card and content components.

Card

outline

2px solid #000 border, white bg, square corners.

dash

2px dashed border-do-green/30, white bg.

shadow

2px #000 border + shadow-box (8px × 7.5px).

filled

2px #000 border, bg-do-gray (#ededed).

Card Hover States

outline + hover

Hover adds 1px lift + shadow-box-lg.

shadow + hover

Hover upgrades to shadow-box-lg.

filled + hover

Hover adds lift + shadow-box-lg.

TeamMemberCard

Alex Johnson

AI Engineer

Sarah Chen

Product Lead

Passionate about building AI products that make a difference.

ProcessStep

Discovery

We start by understanding your business, goals, and challenges.

Strategy

We define the AI solution and approach that fits your needs.

Learn more

Components

Content Components

Components for displaying services, insights, testimonials, and FAQs.

ServiceCard

AI Consulting

Strategic guidance for AI integration into your business processes and products.

Find out more

Custom Development

Building bespoke AI solutions tailored to your specific requirements.

Find out more

FirstBuild

Rapid prototyping service to go from idea to working prototype in 2 weeks.

Find out more

InsightsCard

Understanding Large Language Models

A deep dive into how LLMs work and how they can benefit your business.

The Future of AI in Healthcare

Exploring the transformative potential of artificial intelligence in medical applications.

"Working with Do AI transformed our business. Their approach to AI integration was thoughtful and effective."

Jane Smith

CEO, SampleCorp

Accordion

Single selection (only one open at a time)

What services do you offer?

We offer AI consulting, custom development, and rapid prototyping through our FirstBuild service.

How long does a typical project take?

What industries do you work with?

Components

Complex Components

Large, feature-rich components and section layouts.

CaseStudyCard

Retail AI Transformation

The Challenge

The client faced significant challenges with manual inventory management that was slowing down operations and causing stock discrepancies.

The Solution

We implemented a custom AI solution that automated inventory tracking and forecasting using computer vision and machine learning algorithms.

The Impact

The solution delivered measurable results within 3 months, including 300% efficiency improvement, 50% reduction in stockouts, and significant cost savings.

Example impact text for demonstration.

Foundation

Page Backgrounds

Utility classes for page-wide background colors.

page-yellow

bg-do-yellow-bg

page-pink

bg-do-pink

page-green

bg-do-green-bg

page-blue

bg-do-blue-bg

page-gray

bg-do-gray

Architecture

Layouts

Page-level layout templates that wrap content and provide consistent structure.

Layout.astro

src/layouts/Layout.astro

Base layout providing:

SEO meta tags via SEO component
Header navigation component
Footer component
Google Analytics 4 + GTM integration
Global CSS imports
Page background color support via bodyClass

PageLayout.astro

src/layouts/PageLayout.astro

Extends Layout with optional CTA section. Used for standard content pages.

Hero slot for page-specific hero content
Configurable CTA section at bottom
Customizable CTA title, description, and buttons

ServiceLayout.astro

src/layouts/ServiceLayout.astro

Specialized layout for service pages. Extends PageLayout.

Hero section with service info
FullscreenCard for overview content
ProcessSteps section with numbered steps
Optional FAQ Accordion section

BlogLayout.astro

src/layouts/BlogLayout.astro

Layout for blog articles and insights. Extends PageLayout.

Article header with title and date
Author display with avatar and role
Rich text content area
Tags display section

Architecture

Section Components

Higher-level components that compose UI components into page sections.

SectionContainer.astro

src/components/sections/SectionContainer.astro

Wrapper component for page sections with consistent spacing and optional dash lines.

Configurable spacing: tight, default, loose, none
Container widths: default (7xl), wide, narrow, full
Optional dash lines decoration
Background color support

Hero.astro

variant="dual-headline" (Homepage)

For Founders

AI-powered MVPs for NZ founders

For Businesses

Secure, custom AI for your workflows

We're a hands-on build partner for founders and businesses.

Book a Call Email Us

12 AI products built in 2024 · 9 launched

variant="with-image"

About Do AI

We build AI-powered products and prototypes for founders and businesses.

Book a Discovery Call

ServiceCardsSection.astro

Grid section displaying ServiceCard components

3-column responsive grid with shadow card variant.

For Founders

FirstBuild

You have a great new idea, and need to make it real.

Functional MVP in 4 weeks, includes 3 months post-launch support

Budget

$20K-$30K

Find out more

For Founders

Product Lab

You have deep insight into a market gap. You need research + building partners.

Market research, validation, prototype, and launch strategy in 16 weeks

Budget

$30K-$80K

Find out more

For Businesses

AI Workshops

You've seen the demos. You've sat through the webinars. But how do you develop AI processes and solutions that deliver real value to your business.

Working AI solutions built on the day + framework to keep going + use case review report + 30 days follow-up support

Every workshop is led by the same team that builds the products — not facilitators reading from a slide deck. We have built AI systems across healthcare, professional services, logistics, and operations. We have run workshops for teams ranging from 10 people to enterprise operations.

Budget

$5,000–$10,000

Book a workshop

For Businesses

Business Accelerator

Off-the-shelf AI doesn't fit your business. You need proprietary solutions you own.

Discovery → Design → Prototype → Implementation + 3 months support

Budget

Custom pricing

Find out more

TestimonialsSection.astro

Auto-playing testimonial carousel with navigation dots

What our clients are saying

"Working with Do AI has been brilliant. They're not only technically excellent at what they do, but they genuinely care about our clients, which matters a lot to us since our reputation is on the line too. The partnership works really well because they understand what our clients already know about AI after working with us, so there's no disconnect. Their technical skills complement our coaching and guidance perfectly. Beyond the work itself, they're great people to work with. Principled, ethical, and fair. We wouldn't hesitate to recommend them."

Mark Laurence

Founder, Ten Past Tomorrow

Needed a technical partner who could work alongside their AI coaching practice

"Do AI didn’t just understand our brief, they understood us. They instantly grasped what we were trying to build with The Village Co. and made it better through smart, thoughtful ideas and a genuine understanding of our world as parents and founders."

Nikki Pak

Co-Founder, The Village Co

Needed to validate their parenting platform concept quickly

"Do AI are the best kind of collaborators. They are quick at discerning what is important and what is just noise, they follow through with impeccable execution, and they’re flexible in their approach to match your work patterns and systems. And on top of all of this, perhaps the best thing about working with them is that they bring zero stress or fluster, and 100% integrity. Don’t sleep on Do AI!"

Per document cost reduced from thousands to tens of dollars

Erika Butters

Founder, Volition

Needed to automate document processing for disability support sector

PartnersSection.astro

4-column responsive grid with grayscale hover effect

FullscreenCard.astro

Large content card with 5-column grid layout

FirstBuild Process

From idea to working product in 2 weeks. We work with founders who have validated their problem and need technical execution.

Our process includes discovery, design, build, and validation phases.

Learn More

<FullscreenCard
title="FirstBuild Process"
content="<p>From idea to working product...</p>"
image="/images/pen.svg"
cta={{ text: "Learn More", href: "#", variant: "arrow" }
/>