Use this skill when designing or updating Echo11 frontend experiences. It captures the current implemented UI theme, layout system, color logic, typography, motion language, and component rules based on the actual codebase, while staying flexible for future refinement.
This skill describes the current real design system of Echo11 based on the implemented codebase, not an abstract or idealized style guide.
Use this skill when:
This is a flexible guideline, not a rigid brand law. Echo11 can evolve. The goal is to preserve the current design DNA while allowing stronger refinement over time.
Echo11 is currently a dark-first premium digital studio interface with a cinematic and technical feel.
It is defined by:
This is not generic SaaS UI, soft startup pastel design, or bubbly dashboard styling.
Current global tokens come from src/app/globals.css and tailwind.config.ts.
#000000#fcfcfc#222222#1a1a1a#a1a1a1#111111#00E5FFrgba(0, 229, 255, 0.4)Echo11 uses a split typography voice.
var(--font-syne)var(--font-geist-mono)Echo11 currently prefers sharp edges.
rounded-none or very restrained geometry.The public-facing site uses a wide, spacious, presentation-led structure.
max-w-7xlpx-6 lg:px-8Current homepage flow:
This means Echo11's marketing frontend should feel like a curated studio presentation.
There are distinct route groups for:
These should share the same visual DNA but can vary in density and interaction complexity.
Echo11 uses translucency and atmosphere selectively.
.glass.lab-glassCurrent button language is:
Use these patterns:
Existing input style favors:
Motion is a core part of Echo11's design identity.
The hero sets the strongest visual precedent for the brand.
This means future hero sections should preserve:
The feature grid establishes a pattern for content-heavy studio messaging:
Use this as reference for capability cards, service cards, feature summaries, and value-proposition sections.
The /lab area is still in development, so its UX can evolve more aggressively than the rest of the site.
Even while /lab evolves, it should still inherit Echo11's design DNA:
Before shipping a new UI, ask:
Do not drift into these patterns unless there is a deliberate redesign:
When extending Echo11, aim for:
This skill is based on the actual implementation in:
src/app/globals.csstailwind.config.tssrc/components/layout/Navbar.tsxsrc/components/layout/PageWrapper.tsxsrc/components/sections/Hero.tsxsrc/components/sections/PhilosophyGrid.tsxsrc/components/ui/*If those files materially change, this skill should be updated.