PROJECT REFERENCE
Design System
Type /design-system in the Agent panel with your prompt to create your first page based on this design system.
Recommended model: GPT 5.6 Sol or above.
01 / DESIGN TOKENS
Colors
Colors/White
Light: rgb(255, 255, 255)
Colors/Body Dark
Light + dark: rgb(36, 36, 36)
Colors/Body Gray
Light: rgb(125, 125, 125) · Dark: rgb(141, 141, 141)
Colors/Body Gray Bg
Light: rgb(250, 250, 250) · Dark: rgb(242, 242, 242)
Colors/Line Gray
Light: rgb(222, 222, 222)
Colors/Body Black Bg
Light: rgb(0, 0, 0)
Colors/Transparent
Light: rgba(36, 36, 36, 0)
02 / TYPE
Typography
The site’s reusable text styles use Geist. Manrope also appears in editor-facing instructions; custom clock components include their own font settings. Font sizes follow the breakpoint order shown in each style label (Super / Desktop / Tablet / Phone, where applicable).
Text Styles/Heading 1 / Super / Desktop / Tablet / Phone
Geist · 700 · 200 / 140 / 100 / 60 px · 80%
head
Text Styles/Heading 2 / Super / Desktop / Tablet / Phone
Geist · 700 · 120 / 100 / 80 / 40 px · 80%
head h2
Text Styles/Heading 3 / Desktop / Tablet / Phone
Geist · 500 · 40 / 34 / 22 px · 120%
Clear, human design
Text Styles/Heading 4 / Desktop / Tablet / Phone
Geist · 600 · 14 px · 140% · uppercase · all breakpoints
SECTION MARKER
Text Styles/Body Topline / Desktop / Tablet / Phone
Geist · 600 · 14 / 11 / 12 · 160% px · uppercase
DESIGN WITH INTENT
Text Styles/Body Bold / Desktop / Tablet / Phone
Geist · 700 · 14 px · 160% · all breakpoints
Clear and thoughtful.
Text Styles/Body Testimonial / Super / Desktop / Tablet / Phone
Geist · 400 · 14 px · 130% · all breakpoints
The process felt clear, thoughtful and genuinely collaborative.
Text Styles/Body Text / Super / Desktop / Tablet / Phone
Geist · 400 · 16 px · 140% · all breakpoints
Supporting copy uses the project’s existing body style.
Separate duplicate presets also exist for Heading 1–4, Body Text and Body Topline; the examples above group these by shared name.
03 / INTERACTION
Buttons & Controls
The project includes reusable button and menu controls, plus an interactive FAQ. No native form inputs or pricing block components were found.
Navigation Button · black button
Navigation Button · white button
Menu controls · closed and open states
04 / REUSABLE ASSETS
Components
Examples below are live instances of the project’s existing canvas components, with their supplied variants retained.
LIVE COMPONENT EXAMPLES
Blog line / Blog
Testimonial · Person and text
5 / 5
Working with Lucas was an absolute pleasure. He took our vision and turned it into stunning visuals
RENEE TAKADA
INFRAME, Creative Director
5 / 5
Portfolio / Top work
FAQ Question · Close + Open
What kind of projects do you usually take on?
What kind of projects do you usually take on?
Sure! You’ll find selected projects on my Instagram, behind-the-scenes and WIPs on Twitter, and full case studies on Behance. Each platform highlights a different side of my work — feel free to explore or reach out if you're looking for something specific.
01
Other existing variants include the testimonial’s Person only state, six star ratings, and portfolio card sizes Top work, medium, small, tiny and mobile.
SOCIAL LINK COMPONENTS · LONG VARIANTS
ACHIEVEMENTS · LOGO · DIVIDER
15+
years experience
2
awwords
1000
lectures
200+
students
460
portfolio works
Shared by the Main layout: Navigation (menu close, menu open, menu mobile close, menu mobile open) and Footer (Desktop, Tablet, phone). Additional component families: Navigation Button, Burger Menu, Menu Button, Blog Line, FAQ Question, Testimonial, Testimonial Stars, Portfolio Top Work, seven social links, Achievement, Achievements, Logo Box and Line.
05 / PAGE COMPOSITION
Sections
The site’s page sections are authored as page layers, not standalone reusable section components. This index points to existing sections without replacing them with static demos.
HOME · /
Hero · About · Best works · Latest portfolio · About me · Opinions (testimonials) · Q and A
PROJECTS · /projects
Featured projects · project list · Book a Call CTA
ABOUT · /about
About me · Q and A · Ask Me CTA
These are existing page layers, not standalone section components. The Main layout already supplies shared Navigation and Footer components; this page does not duplicate them.
Section header top:
01
/introduction
Internal page navigation background:
06 / RESPONSIVE RULES
Spacing & Layout
Observed site rhythm: 10px dense gaps, 20px standard grouping, 40px major content gaps, and 90px section padding. Existing content uses fluid stacks and centered content areas.
OBSERVED SPACING RHYTHM
10 px
Dense element gap
20 px
Standard group gap
40 px
Major content gap
90 px
Primary section rhythm
CONTENT WIDTHS · PAGE BREAKPOINTS
1540 px
Observed content max-width
1200 px
Desktop page width
810 px
Tablet page width
390 px
Phone page width
Existing sections are full-width with 30 px horizontal insets and centered inner stacks. The Main layout also includes a 1920 px Super breakpoint. The existing website pages use Desktop, Tablet and Phone breakpoints.