Nocta Studio
00
DESIGN SYSTEM
One system. Every new page.
Every colour, text style and component this template is built from, on one page. Give it to the Agent as the reference when you build something new, and the new page comes out looking like the rest of the site.
/design-system
Type this in the Agent panel with your prompt to build your first page from this system.
Recommended model: GPT 5.6 Sol or above.
01
COLOURS
Twelve tokens. Nothing hard-coded.
Every fill, border and text colour in the template points at one of these. Change a token and it changes everywhere it is used.
Background V1
NEUTRAL
rgb(5, 5, 5)
Elements V1
NEUTRAL
rgb(15, 15, 15)
Elements V2
NEUTRAL
rgba(255, 255, 255, 0.02)
Elements V3
NEUTRAL
rgb(34, 34, 34)
Accent
ACCENT
rgb(252, 72, 35)
Heading V1
TEXT
rgb(255, 255, 255)
Heading V2
TEXT
rgb(120, 120, 120)
Paragraph
TEXT
rgba(255, 255, 255, 0.6)
Border V1
BORDERS
rgba(255, 255, 255, 0.08)
Border V2
BORDERS
rgba(255, 255, 255, 0.25)
Transparent
NEUTRAL
rgba(0, 0, 0, 0)
Error 15%
UTILITY
rgba(255, 34, 68, 0.15)
02
TYPOGRAPHY
Thirteen roles, one typeface.
Six heading levels and seven body sizes. Every text on the site uses one of these, so the type scale never drifts.
Ag
Heading/Heading 1
h1 · 5rem · 1.1em
Ag
Heading/Heading 2
h2 · 3.8rem · 1.1em
Studios that ship
Heading/Heading 3
h3 · 1.3rem · 1.1em
Studios that ship
Heading/Heading 4
h4 · 1.3rem · 1.1em
Studios that ship
Heading/Heading 5
h5 · 1.2rem · 1.4em
Studios that ship
Heading/Heading 6
h6 · 1rem · 1.05em
A small senior team
Body/Statement
p · 3rem · 1.1em
A small senior team
Body/Statement Small
p · 2.5rem · 1.1em
A small senior team
Body/Text XLarge
p · 2.5rem · 1.1em
Strategy, design and development under one roof.
Body/Text Large
p · 1.1rem · 1.4em
Strategy, design and development under one roof.
Body/Text Main
p · 1rem · 1.4em
Strategy, design and development under one roof.
Body/Text Small
p · 0.9rem · 1.2em
SELECTED WORK
Body/Text Tiny
p · 0.75rem · 0.8em
03
COMPONENTS
Every component, one card each.
Each card shows the component in its main state. Point the Agent at the one you want and it reuses it instead of drawing something new.
Controls
buttons, badges, markers
Primary Button
Component
Secondary Button
Component
Contact Form Button
Component
Newsletter Button
Component
available for work
Section Tag
Component
Website Logo
Component
Category
Tab
Component
Category
Filter Tab
Component
Dots
Component
Tool Icon
Component
Check Box Item
Component
Data analysis models
Capabilities Item
Component
4.9/5 stars (100+Clients)
They hit their targets — you’re next.
Review Stats
Component
Cards
repeatable content blocks
/001/
Branding
Growly
Project Card
Component
Design Retainer
Recommended
Perfect for startups and small businesses needing quality designs.
/month
Add development
What's included
Unlimited requests
One request at a time
Fixed monthly rate
Async communication
Flexible scope
Pricing Card
Component
Metrix Card
Component
4.9
Rating
"This platform completely changed how I connect with industry peers and find new opportunities."
Samantha Lee
ConnectSphere
Reviews Card
Component
4.9/5
We’ve delivered 100+ projects that drive real results.
4.9/5 stars (100+Clients)
They hit their targets — you’re next.
Large Review Card
Component
Category
/
Category
Title
Blog Card
Component
Satisfaction rate
4.9/5
from 100+ client projects
★★★★★
4.9/5
Trusted by brands worldwide.
Benefit Card 01
Component
Plans start from $1,999 / project
Flexible
pricing
Pricing plans that adapt to your budget and scope.
Benefit Card 02
Component
Fast turnaround
Projects launched in as little as 2 weeks.
Benefit Card Simple
Component
Chat to sales
Contact Info Card
Component
/001/
Bima
Project Info
Component
Contact Form
Component
Radio Box Component
Component
001
Brief
Description goes here.
WHAT THIS INCLUDES
Chip one
Chip two
Chip three
Chip four
Process Item
Component
Corners
Component
Sections
full-width blocks, shown at page width
Case studies
Case studies
A few of the products we shipped, and what changed after.
Section Head
Component
Navbar
Component
Footer
Component
Logo Ticker
Component
/001/
Brief
We start with a call to understand your business, your goals and who you are selling to. You get a fixed scope and a fixed price before any work begins.
WHAT THIS INCLUDES
Discovery call
Fixed scope & price
Timeline
Content plan
/002/
Design
/003/
Build
/004/
Launch
Process Accordion
Component
Projects
Working together
How does the process work?
How long does a project take?
How much does a project cost?
What is included in each package?
Do you offer development, or only design?
Can you work with our existing brand?
FAQ Tabs
Component
How does the process work?
How long does a project take?
How much does a project cost?
What is included in each package?
Do you offer development, or only design?
Can you work with our existing brand?
FAQs Component
Component
Question
Answer
Helper/FAQ Item
Component
Award Item
Component
Nocta Studio
Page Loading
Component
04
CODE COMPONENTS
Five coded pieces, edited like any other.
These carry the interaction the canvas cannot. They follow the text styles and colour tokens above, and their content is a list on the instance.
Digit Up
Code
Social Share
Code
Nocta is a focused studio building brands and websites designed to win trust, attention, and clients. One clear scope, one accountable partner, work that moves forward.
Reveal Text
Code
/001/
Brand identity
Distinct brand systems designed for clarity, consistency, and long-term recognition.
What we offer
/002/
Web design
Conversion-focused website design built to support long-term business goals.
What we offer
/003/
Development
Fast, flexible websites and apps built to scale. Clean, efficient, and future-ready.
What we offer
/004/
Product design
Interface and product work for teams shipping something people use every day, from the first flow to a system your team can build on.
What we offer
Services
Code