Overview
Build a dark system that feels exacting, technical, and fast to trust. A dark developer system built from near-black shells, violet call-to-action energy, and terminal-first proof panels.
Kiro
Kiro helps you do your best work by bringing structure to AI coding with spec-driven development.
3.0
2
Visits
Available Pages
Version History
Workflow Collections
Design Analysis
Kiro Home design analysis
Build a dark system that feels exacting, technical, and fast to trust. A dark developer system built from near-black shells, violet call-to-action energy, and terminal-first proof panels.
Image Direction
Use dark app windows, terminal views, implementation checklists, and split proof panels. Screenshots should feel like the product itself is doing the persuasion.
Colors
Violet is the decisive action color. Nearly everything else should stay in black, charcoal, lilac shadow, and crisp white so the CTA and active code states carry the energy.
Typography
Let a mono-flavored display establish the engineering voice, but keep explanatory copy and labels clean and readable. This should feel precise, not gimmicky.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Spec Violet Terminal
A dark developer system built from near-black shells, violet call-to-action energy, and terminal-first proof panels.
focused, technical, and quietly animated
Primary mode: darkdeveloper tools marketingproduct-marketing
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
focused, technical, and quietly animated
Density
4
Variance
2
Motion
2
Signals
near-black canvas · violet action cues · terminal proof frames · mono utility labels
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Signal Violet
#6F36E8
Terminal Black
#050507
Console Surface
#14111C
Soft Outline
#2A2433
Ghost White
#F6F2FF
Muted Lilac
#2B2438
Assist Lavender
#CDB7FF
Usage rules
Violet should appear on the decisive moments, not on every frame.
Keep the background nearly black so product proof reads like the hero asset.
Use lavender only as a soft assist, never as a substitute for contrast.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
6px
sm
8px
md
16px
lg
24px
section
88px
Token Radii
Corner radii tokens with a live surface sample.
sm
8px
md
16px
lg
24px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Geist Mono
terminal-forward display voice
Body
Inter
clear product copy voice
Mono
Geist Mono
utility and code detail voice
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
4rem/—
Display
H2
2.25rem/—
H2
Body
1rem/—
Body
Caption
0.8125rem/—
Caption
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Let the mono display carry the technical posture, but keep support copy in a clean sans. · Use short lines and crisp weights so the page feels engineered rather than theatrical. · Reserve tiny uppercase labels for utility navigation and release cues.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
140ms-220ms
Easing
cubic-bezier(.22,.8,.2,1)
Spring
stiffness 110, damping 18
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 140ms-220ms |
easing | cubic-bezier(.22,.8,.2,1) |
spring | stiffness 110, damping 18 |
Layout Principles
Lead with the product window, then repeat a rhythm of left-aligned explanation and right-weighted proof.
Keep long pages quiet and modular so each feature section feels like another terminal chapter.
Use dark negative space to slow the pace between dense product moments.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#6F36E8
Text
#FFFFFF
Border
1px solid #6F36E8
Radius
16px
Padding
12px 24px
Min height
44px
Shadow
none
Typography
body
Buttons secondary
Base Attributes
Background
transparent
Text
#F6F2FF
Border
1px solid #F6F2FF
Radius
16px
Padding
12px 24px
Min height
44px
Shadow
none
Typography
body
Cards terminal
Feature Card
Component preview content
Base Attributes
Background
#14111C
Text
#F6F2FF
Border
1px solid #2A2433
Radius
24px
Padding
24px
Shadow
none
Cards feature
Feature Card
Component preview content
Base Attributes
Background
#0D0B13
Text
#F6F2FF
Border
1px solid #2A2433
Radius
16px
Padding
20px
Shadow
none
Navigation utility chip
OverviewFeaturesDocs
Base Attributes
Background
#211D25
Text
#F6F2FF
Active text
#FFFFFF
Item padding
10px 12px
Item radius
16px
Badges release
Base Attributes
Background
#1A1427
Text
#CDB7FF
Border
1px solid #2A2433
Radius
8px
Padding
8px 16px
Shadow
none
Inputs command
Base Attributes
Background
#0E0C14
Text
#F6F2FF
Border
1px solid #2A2433
Radius
16px
Padding
12px 16px
Min height
44px
Placeholder
rgba(246,242,255,0.42)
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -product ui
- -terminal capture
- -code diagram
Subject patterns
- -dark app windows, split terminal views, checklists, and structured implementation flows
Composition logic
- -Use one dominant product window per feature chapter.
- -Let screenshots stay crisp and rectangular rather than floating.
Treatment rules
- -Keep product frames darker than surrounding copy areas.
- -Use violet only as the active signal inside proof.
Generation cues
- -dark terminal software, violet active states, implementation plan panels
Avoid
- -No glossy 3D mascots.
- -No rainbow gradients that overpower the app shell.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -Do not wash the full page in glow or neon fog.
- -Do not replace product proof with abstract AI art.
- -Do not soften the geometry into consumer-social pills everywhere.