Design system
One system. Every new page.
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.
Typography
1. Core text styles
Heading 1 · Public Sans · 48px / 38px / 32px · Bold
Read the right one.
Heading 2 · Public Sans · 38px · Medium
Cohesion in every detail.
Heading 3 · Public Sans · 28px / 24px / 20px · Medium
Built for studios that ship.
Heading 4 · Public Sans · 24px · Medium
A smaller step in the scale.
Body · Public Sans · 20px / 18px / 16px · Regular
Cohesion keeps long-form copy calm and readable, with generous measure and steady rhythm across every section of the site.
Body Small · Public Sans · 16px / 16px / 14px · Regular
Used for captions, meta details and supporting notes that sit beneath the main copy.
Span · Public Sans · 14px · Medium
Labels, eyebrows and small print
Quotes · Public Sans · 20px / 18px / 16px · Italic
“They gave our brand a shape we could finally build on.”
2. CMS text styles
Applied inside CMS rich text for project write-ups and legal pages.
Rich text H1 · Heading 1
Evidence you can trust.
Rich text H3 · Heading 3
A concise introduction for long form updates and research notes.
Rich text paragraph · Body
Cohesion situates every project inside a clear narrative: the brief, the constraints, the decisions, and the outcome the client can measure.
3. Link styles
One shared link style, underlined on hover, highlighted on the current page.
Inline link · Body · Link style
Navigation link · Link · Inter · 18px
02
Colours
Neutrals carry the layout, one accent carries the action.
Neutrals · White → Black
Surfaces · Dark 10 and Black
Accents · Indigo, Mint, Orange
03
Imagery
Soft, atmospheric imagery that never competes with the type.
Empty state placeholder
Project covers use a 3:2 crop with a 6px radius; placeholders fall back to the lightest neutral.
04
Components
A complete reference of the reusable interface components available across the Cohesion site.
Navigation link
Inline link
Buttons · Primary, Project CTA, Back
Tap button
Benefit list
Brand and website design, up to six pages
Design system handover with reusable components
Two weeks of post launch support
Project card
Testimonial card
Mara Delgado
Founder, Northline Studio
Cohesion gave our work a structure clients immediately understood. Enquiries doubled within a quarter.
Stack Card
![](data:image/svg+xml,<svg display="block" id="1579681860" role="presentation" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg"><g fill="transparent" height="40px" id="Zy59kdFE6" transform="translate(6.665 0)" width="26.666666666666668px"><path d="M 0 40 L 0 0 L 26.667 0 L 26.667 40 Z" fill="transparent" height="40px" id="r5LVcnj8p" width="26.666666666666668px"/><path d="M 13.333 26.667 L 13.333 40 L 0 26.667 L 0 13.333 L 13.333 13.333 L 0 0 L 26.667 0 L 26.667 13.333 L 13.333 13.333 L 26.667 26.667 Z" fill="rgb(0, 0, 0)" height="40px" id="XCBSpwtXP" width="26.666666666666668px"/></g></svg>)
Skills List
UX/UI Expertise
HTML5/CSS3 Mastery
Product Design
Branding
Collaborative Team Player
Service Title
01
Website Design & Development
Pricing Card · About Card
Site design & build
A complete Cohesion site, designed and built end to end.
£9,600
/month
Brand and website design, up to six pages
Design system handover with reusable components
Two weeks of post launch support
Responsive layouts for desktop, tablet and phone
CMS setup for projects and journal
Reusable text, colour and link styles
Accessibility and performance pass
SEO metadata and social previews
Editor handover session with your team
Licensing Card
Project Photo Card
Hero Ticker
Testimonials Slider
