Design System

Automate
any
infrastructure.

Clean developer infrastructure — a bright, minimal canvas with sharp typographic hierarchy and a distinctive teal accent for the tools that provision the cloud.

15 color tokens 12 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Deliberately restrained palette: near-black text on white surfaces, with #62D4C3 teal as the singular brand accent. 15 tokens across base surfaces, text, and status signals.

White
#ffffff
Primary page background
Near Black
#000000
Primary text, headings
Dark Slate
#1a1a1a
Secondary text, body copy
Stone Gray
#6b6b6b
Tertiary text, captions
Silver
#b4b4b4
Placeholders, disabled states
Divider
#e0e0e0
Borders, dividers, outlines
Cloud
#f5f5f5
Code blocks, secondary surfaces
Snow
#fafafa
Hover states, inset panels
Teal
#62D4C3
Brand accent, links, CTAs
Teal Dark
#0C7C73
Hover state, pressed buttons
Teal Light
#e6f9f6
Tinted backgrounds, selected states
Signal Green
#17b86c
Success states
Signal Red
#d43d3d
Error states
Signal Yellow
#e5a000
Warning states
Signal Blue
#1a8fff
Informational states
Typography

Type Scale

Gilroy for headings (Inter substitute), Satoshi for body text, Source Code Pro for code. Clean geometric hierarchy for technical content.

Display Automate anything 48px / 1.2 / -0.02em
Heading-xl Provision at scale 40px / 1.2 / -0.01em
Heading-lg Infrastructure as code 32px / 1.25 / -0.01px
Heading Section heading 24px / 1.3 / —
Heading-sm Subsection heading 20px / 1.4 / —
Body Default body text for readable documentation 16px / 1.6 / —
Body-sm Dense data, table cells, comparison rows 14px / 1.5 / —
Code resource "aws_instance" "web" { 14px / 1.6 / mono
Caption Meta info · Footer · Labels 12px / 1.5 / —

Fonts

Primary Gilroy 400–700 · 20–48px · Headings
Body Satoshi 400–700 · 12–18px · Body & UI
Code Source Code Pro 400–600 · 13–16px · Code only
Fallback Inter Substitute for all above
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous whitespace. 14-step spacing scale, 6 border radius values.

Spacing Scale (4px base)

44px
88px
1212px
1616px
2424px
3232px
4848px
9696px

Border Radius

default 4px
buttons 4px
input 4px
cards 6px
code 6px
pill 9999px
Elevation

Surfaces

Border-based elevation over shadows. Clean white surfaces with structural dividers. 4 distinct surface levels.

White #ffffff
Snow #fafafa
Cloud #f5f5f5
Divider #e0e0e0
Components

Buttons & Elements

Primary teal, secondary outline, and ghost variants. Minimal, high-contrast, built for developer interfaces.

Primary Teal Button
Main call to action
.btn-primary
Teal (#62D4C3) background, Near Black (#000000) text, 4px radius. Hover transitions to Teal Dark (#0C7C73) with white text.
Secondary Outline Button
Secondary interactive actions
.btn-secondary
White background, Near Black text, 1px Divider border, 4px radius. Clear hierarchy without competing with primary.
Ghost Teal Button
Tertiary actions, inline links
.btn-ghost
Teal Dark text, Teal border, transparent background. Hover adds Teal Light tint.
Code Block
Code snippets, configuration
.code-block
$ terraform init
Initializing the backend...
Initializing provider plugins...
Terraform has been successfully initialized!
Near Black background, White text, Source Code Pro 13px, 6px radius. For CLI output and HCL configuration.
Content Card
Feature descriptions, documentation blocks
.content-card
Infrastructure as Code
Define, deploy, and manage cloud infrastructure with declarative configuration files.
White background, 1px Divider border, 6px radius, 24px padding. Clean, no shadows.
Input Field
User text input, search
input
White background, Divider border, 4px radius. Focus state uses Teal border.
Guidelines

Do's & Don'ts

Do — Embrace
  • White (#ffffff) as primary background — light-first system
  • Teal (#62D4C3) exclusively for interactive elements and CTAs
  • Near Black (#000000) for headings and high-contrast text
  • 4px radius for buttons/inputs, 6px for cards/code
  • Cloud (#f5f5f5) for code blocks and secondary surfaces
  • Border-based elevation over drop shadows
  • Source Code Pro for all code content exclusively
  • Generous whitespace — 64–96px section gaps
Don't — Avoid
  • Teal (#62D4C3) as a large-area background color
  • Drop shadows on cards — use borders instead
  • Signal colors for non-status purposes
  • Body typefaces (Gilroy, Satoshi) for code content
  • Dense layouts without breathing room
  • Decorative gradients in content areas
  • Near Black backgrounds outside terminal blocks