CodeMind style guide
Colour
A white site with one electric-blue family. Dark and blue are only used for the hero, the About band, the use-case card, the CTA card and the footer.
Blue
Blue 100
#E4ECFF · chips, pills
Blue 200
#A8C4FF · on dark
Blue 400
#2F7BFF · brand
Blue 500
#1556E0 · buttons
Blue text
#1450D6 · links, active
Blue 700
#0F43B8 · deep
Surfaces and ink
Page
#FFFFFF
Card
#F4F5F8 · bentos, cards
Track
#EEF1F6 · toggles, pills
Ink
#0B1020 · headings
Secondary
#4A5366 · body
Muted
#646C7E · notes
Dark blocks and accents
Hero sky
#05060E → #0F2A9A
Footer
#1556E0 → #0F43B8
Graphite
#353B44 → #242A31
Stars
#FFB020
Success
#1F9D55 / #DDF5E6
Error
#B42318 / #FDE8E8
Type
Inter everywhere. Host Grotesk only for the logo, DM Sans for section tags and Geist Mono for the pricing list labels.
H1 · 64/72 · −5%
Build Apps
Section title · 44/50 · −5%
Ship faster with AI
Statement · 40/54 · −3.5%
CodeMind is the AI builder
Card title · 24/30 · −4%
Prompt to Product
Body · 16/24 · −2%
Describe what you want in plain language and CodeMind builds it.
Small · 14/22
We reply within one business day.
Tag · DM Sans 13 caps
Features
Mono · Geist Mono 13 caps
Everything in Essential, plus:
Buttons
Fully rounded pills, 38px tall, with no border. Each is a gradient with a soft inner light and two soft drop shadows. On hover the label rolls up while the chevron leaves to the right and a twin slides in from the left. Pressed: scale .98.
On white
On dark
Pills, tags and toggles
Flat, with no inner shadow. They are optically centred: 2px less padding on top than on the bottom.
How it works
1 seat
5 projects
20 projects
-20%
01
Live
Monthly
Yearly
On dark
About CodeMind
Cards and surfaces
Grey cards have no border. A white card on white gets a 1px border. Dark cards use the hero sky.
Prompt to Product
Grey bento · #F4F5F8 · radius 28
Form card
White · 1px border rgba(15,30,80,.1) · radius 20
CTA / use-case card
Hero sky with a dot grid, radius 24–32, no border
Inputs
White field, 1px border, radius 8. Hover darkens the border; focus turns it blue. No inner shadow.
Full name
Sarah Mitchell
Work email (focus)
sarah@tidewell.com
Icons
Lucide 0.469 at whole-pixel sizes, with stroke = size / 12: 16px icons in buttons, tags and lists, 20px icons in step circles and contact links.
The step circle (idle and lit), a plain link icon, and the glossy About tiles. No dark inner shadows or dark outlines on any tile.
Logo
An isometric cube with no shadow and no edge lines. Blue faces go on white and on the dark nav; white faces with a blue core go on the blue footer.
Spacing and radii
A 4px base. Sections sit about 112px apart; the content column is 1096px wide.
4
8
12
16
20
24
32
40
48
64
96
Radii
8 · input
16 · tile
20 · form
24 · card
28 · bento
999 · pill
Template components
Native components behind the Home sections. Icons, labels and texts are controls on each instance; loops run on variants with timed Appear triggers.
App Tile · Blue, Violet, Amber, Green, Graphite
Feature Row · Row (desktop list), Card (tablet), Card Small (phone)
Real-Time Collaboration
Build together with your team and review changes live
Real-Time Collaboration
Build together with your team and review changes live
Real-Time Collaboration
Build together with your team and review changes live
Step · Off, On (driven by How It Works)
1. Describe Your Idea
Tell CodeMind what you want to build in plain language: a website, an app or a workflow.
1. Describe Your Idea
Tell CodeMind what you want to build in plain language: a website, an app or a workflow.
Dock Tile · Websites, Mobile apps, Internal tools, Automations, APIs and backends
Hero Icon and Hero Window (loop)
Shadows
Soft and layered, tinted navy or blue. Never one hard dark shadow.
Nav pill · cards
Mockup widgets
CTA card
Motion
Ease is cubic-bezier(.22,1,.36,1), with 400–700ms for UI. Loops start in view, never on hover, and pause off screen. Reduced motion shows the end state.
Appear: opacity, a 16px rise and a 6px blur clearing, staggered 80ms.
Buttons: the label rolls up, the arrow swaps in from the left, and a press scales to .98.
Light lines: a comet runs head-first with a fading tail along circuit lines (hero, CTA) and lights the nodes it passes.
About: words light up on scroll, and the tiles draw on with a small tilt and a light sweep.
How it works: a line fills at about 3s per step, and each step turns blue as the line reaches it. No pop-in.
Dock: the hovered tile lifts 8px and scales 1.14 with a tooltip, and a click bounces it.
Nav: after 40px of scroll the bar eases into a white pill, and the active link slides with the section in view.
