Style identity
Tideway Studio
An unofficial original system for an idea moving through prompt, preview, delivery, and global web infrastructure.
Bright web-builder system with dark teal proof panels, electric aqua actions, ro themeDesign system Pro AI Kit9 components
Netlify-inspired Tideway Studio Product System
An unofficial, original Netlify-inspired design system for an idea moving through prompt, preview, delivery, and global web infrastructure. Nine focused elements for a concrete product workflow.
Desktop · 1440 × 7614
Foundations
The visual decisions behind the system
A public overview of the typography, palette, icon language, spacing, shape, and motion used throughout this AI Kit.
Visit website
Typography
Font families
Figtree
Display headings and strong platform labels
Figtree, system-ui, Helvetica, sans-serif- Weights
- 100–900 variable
- Sizes
- 42–76px desktop; 34–48px mobile
- Line height
- 0.96–1.1
- Tracking
- −0.06em to −0.02em
Fallback: system-ui, Helvetica, sans-serif
Instrument Sans
Body copy and supporting UI text
"Instrument Sans", system-ui, Helvetica, sans-serif- Weights
- 100–900 variable
- Sizes
- 15–18px
- Line height
- 1.45–1.65
- Tracking
- −0.01em to 0
Fallback: system-ui, Helvetica, sans-serif
Martian Mono
Eyebrows, code, metrics, and technical state
"Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace- Weights
- 400–700
- Sizes
- 11–14px
- Line height
- 1.35–1.55
- Tracking
- 0 to 0.04em
Fallback: ui-monospace, Menlo, Consolas, monospace
Palette
Core colors
Aqua
#20d9d2Primary action and active state
Deep teal
#032f2fHero and product proof panels
Teal ink
#0d3c3bDark surface text and illustration
Lavender
#7c68ffSecondary AI or data accent
Light canvas
#ffffffPrimary page background
Mist surface
#f5fafaQuiet section background
Border
#c9e5e4Card and grid boundaries
Ink
#122325Primary copy
Muted ink
#5d777bSupporting copy
Dark canvas
#11181fExplicit dark-mode background
Success
#27b981Live/ready proof
Amber
#e6a14bAttention state
Type scale
Responsive hierarchy
| Role | Size | Weight | Line height | Tracking |
|---|---|---|---|---|
| Hero | clamp(2.5rem, 7vw, 5.5rem) | 600 | 0.98 | -0.06em |
| Section heading | clamp(2rem, 4.5vw, 4rem) | 600 | 1.02 | -0.05em |
| Product heading | 24px | 600 | 1.2 | -0.03em |
| Body large | 18px | 400 | 1.6 | -0.01em |
| Body | 16px | 400 | 1.55 | 0 |
| Interface | 14px | 500 | 1.4 | -0.01em |
| Technical | 12px | 500 | 1.45 | 0.02em |
Spacing & shape
Layout rhythm
- Density
- Airy editorial sections with compact three-card proof rows
- Base unit
- 4px
- Max width
- 1200px
- Section gap
- 72–128px
- Card padding
- 20–28px
- Element gap
- 10–18px
Iconography
Flat, legible glyphs with line-art product illustrations
Collection-dependent; preserve the source glyph’s weight stroke · 16px / 20px / 24px
Use a recognizable glyph for agent, code, deploy, copy, and edge actions; never substitute a logo or trademark for accessible text.
System metrics
Radius
sm 8pxmd 12pxlg 16pxxl 20pxpill 999px
Spacing
Base unit 4pxInline gap 10–18pxCard padding 20–28pxSection gap 72–128pxContent rail 1200px
Motion
Fast control 150msStandard transition 220msReveal 420msReduced motion Remove transforms and nonessential animation
Elevation
Boundary
1px neutral border with one-step surface shiftDefault cards and product frames
Floating
0 12px 36px rgba(0, 0, 0, .18)Menus and command surfaces
Modal
0 24px 80px rgba(0, 0, 0, .32)Dialogs and blocking confirmation
Surfaces & shape
Canvas
#ffffff / #11181fPage background in light / dark mode
Surface
#f5fafa / #18252bCards, controls, and product frames
Raised
#e7f7f6 / #21333aSelected rows, nested panels, and focus context
Guidelines
Do
- Make the live URL the clearest proof of progress.
- Use dark teal panels for product proof and aqua for high-intent actions.
- Pair AI acceleration with visible preview, edge, security, and observability states.
- Keep status understandable in grayscale with text, shape, or icon.
Don't
- ×Do not copy logos, screenshots, protected marketing passages, or proprietary artwork.
- ×Do not add taxonomy filler, decorative-only patterns, or dashboard-sized specimens.
- ×Do not use color as the sole carrier of meaning.
- ×Do not make the compact element frame depend on a full-page shell.
Imagery
Use original browser frames, line-art infrastructure diagrams, code blocks, preview cards, and small delivery indicators. Avoid Netlify wordmarks, mascots, customer logos, and captured production imagery outside the documentary reference screenshots.
Layout
Center a 1200px rail. Use a dark proof hero, a light modular workflow, and stacked dark platform panels. Keep action pairs close to the hero and collapse three-card rows into a readable one-column sequence below 760px.
Concept
A complete visual language, ready to inspect.
Use the file tree to move between the full reference preview, implementation guidance, portable tokens, and framework-ready styles. Each surface stays focused, so you can understand the system before copying code.
Assigned collection
Netlify-inspired Tideway Studio Interface Elements
9 published components in collection order
Components
Built from the same system
Production-ready specimens from this AI Kit's approved collection.
More like this
Postman-inspired API Orbit
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
v0-inspired Prompt Workshop
An unofficial, original v0-inspired Prompt Workshop system grounded in 17 retained, evidence-backed interface patterns.
Borderless Ledger — Wise-inspired AI Kit
13 focused, original elements for Borderless Ledger; categories are retained only when supported by the live reference. Published flags remain disabled.
Runway-inspired Real-World Studio
A high-contrast studio language for a platform that moves between creative production, developer workflows, robotics, research, and enterprise. The system uses a dark stage, warm action color, and compact cross-platform wayfinding without copying Runway's wordmark, content, or media. Responsive previews and 8 evidence-backed interface elements.
Observable-inspired Signal Notebook
An original, unofficial Observable-inspired system for reactive notebooks, executable explanations, and data visualization surfaces. It retains only 11 focused elements supported by Observable's live notebook and chart workflows.
Replit-inspired Build Canvas
A friendly builder language for moving from prompt to app: vivid purple/green accents, a prominent idea field, artifact type selection, parallel execution, built-in infrastructure, team plans, agent chat, and a clear publish handoff. It is an original study without Replit's logo, pixel font, testimonials, screenshots, or protected copy. Responsive previews and 14 evidence-backed interface elements.