Style identity
Tideway Studio
An unofficial original system for an idea moving through prompt, preview, delivery, and global web infrastructure.
Reference style: Bright web-builder system with dark teal proof panels, electric aqua actions, roAn 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.
Includes DESIGN.md, tokens.json, full CSS, Tailwind v4 token mapping and matching UI specimens. Preview for free; protected guidance and style downloads require Starter or Super. Framework installation and theme support are verified only where listed.
Delivered component specimen
HTML/CSS · JavaScript
Frontend ForeverInspect the kit's typography, palette, icons, spacing and motion.
Style identity
An unofficial original system for an idea moving through prompt, preview, delivery, and global web infrastructure.
Reference style: Bright web-builder system with dark teal proof panels, electric aqua actions, roTypography
Figtree
Display headings and strong platform labels
Figtree, system-ui, Helvetica, sans-serifFallback: system-ui, Helvetica, sans-serif
Instrument Sans
Body copy and supporting UI text
"Instrument Sans", system-ui, Helvetica, sans-serifFallback: system-ui, Helvetica, sans-serif
Martian Mono
Eyebrows, code, metrics, and technical state
"Martian Mono", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospaceFallback: ui-monospace, Menlo, Consolas, monospace
Palette
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
| 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
Iconography
Use a recognizable glyph for agent, code, deploy, copy, and edge actions; never substitute a logo or trademark for accessible text.
System metrics
Radius
Spacing
Motion
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
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.
Assigned collection
9 published components in collection order
Components
HTML/CSS · JavaScript
Frontend ForeverHTML/CSS · JavaScript
Frontend ForeverHTML/CSS · JavaScript
Frontend ForeverHTML/CSS · JavaScript
Frontend ForeverHTML/CSS · JavaScript
Frontend ForeverHTML/CSS · JavaScript
Frontend ForeverHTML/CSS · JavaScript
Frontend ForeverHTML/CSS · JavaScript
Frontend Forever
HTML/CSS · JavaScript
Frontend ForeverMore AI Kits
An unofficial, original Postman-inspired interface study with 14 focused specimens supported by the live product and content experience.
An unofficial, original v0-inspired Prompt Workshop system grounded in 16 retained, evidence-backed interface patterns.
13 focused, original elements for Borderless Ledger.
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.
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.
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.
