Style identity
Nightline Cloud
An unofficial original system for a repository becoming a visible, healthy service graph.
Dark, cinematic infrastructure canvas with violet editorial type, warm secondary themeDesign system Pro AI Kit14 components
Railway-inspired Nightline Cloud Product System
An unofficial, original Railway-inspired design system for a repository becoming a visible, healthy service graph. Fourteen focused elements for a concrete product workflow.
Desktop · 1440 × 12180
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
Inter
Interface, navigation, and body copy
Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif- Weights
- 400–700
- Sizes
- 14–18px
- Line height
- 1.45–1.6
- Tracking
- −0.02em to 0
Fallback: system-ui, "Segoe UI", sans-serif
IBM Plex Serif
Large editorial product headings
"IBM Plex Serif", Georgia, Cambria, "Times New Roman", serif- Weights
- 400–700
- Sizes
- 36–64px desktop; 30–42px mobile
- Line height
- 1.15–1.3
- Tracking
- −0.03em to 0
Fallback: Georgia, serif
JetBrains Mono
Runtime metrics, commands, and technical labels
"JetBrains Mono", ui-monospace, SFMono-Regular, monospace- Weights
- 400–700
- Sizes
- 11–14px
- Line height
- 1.4–1.55
- Tracking
- 0 to 0.02em
Fallback: ui-monospace, SFMono-Regular, monospace
Palette
Core colors
Night canvas
#11101aPrimary dark page background
Night surface
#1a1725Service panels and cards
Violet
#a887ffPrimary action and selected state
Deep violet
#5b3d96Action contrast and active detail
Warm peach
#f09b8fSecondary chapter accent
Runtime green
#43df9aHealthy/deployed state
Dark border
#393047Canvas and card boundaries
Light canvas
#f7f5fbExplicit light-mode background
Light surface
#ffffffLight-mode elevated surface
Light text
#211a2bLight-mode primary copy
Muted text
#8e8598Supporting metadata
Alert amber
#e6a04dDegraded or pending 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
- Dense operational surfaces inside spacious, cinematic chapter frames
- Base unit
- 4px
- Max width
- 1180px
- Section gap
- 64–112px
- Card padding
- 20–28px
- Element gap
- 8–14px
Iconography
Thin geometric outlines with occasional filled status marks
1.5–2px stroke · 16px / 20px / 24px
Use an icon only when it explains deploy, network, scale, or observability; always pair ambiguous symbols with text.
System metrics
Radius
sm 6pxmd 8pxlg 12pxxl 16pxpill 999px
Spacing
Base unit 4pxInline gap 8–14pxCard padding 20–28pxSection gap 64–112pxContent rail 1180px
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
#f7f5fb / #11101aPage background in light / dark mode
Surface
#ffffff / #1a1725Cards, controls, and product frames
Raised
#f0ecf7 / #231e31Selected rows, nested panels, and focus context
Guidelines
Do
- Keep service relationships visible while one node is being edited.
- Use deep surfaces, hairline borders, violet type, and sparing green/peach state color.
- Let preview, scale, health, and rollback read as adjacent states in one operational loop.
- 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 service maps, command panels, log excerpts, telemetry lines, and connected nodes. Avoid live Railway screenshots, mountains, customer marks, or proprietary illustrations.
Layout
Use a dark full-bleed canvas with a short serif headline, a strong deploy action, and a contained service preview. Long sections can alternate subtle tinted panels with a vertical workflow spine; collapse to one column on small screens.
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
Railway-inspired Nightline Cloud Interface Elements
14 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.