English
Make the site yours, one clear step at a time.
Edit content, refine the design, and choose features directly beside your site. The editor shows what you are changing before you save.
Your site. Your choices. A clear path from first edit to saved draft.
Work where you can see the result.
Choose a section below to open the real editor on this page. The illustration shows the relationship between your page and its controls.
A place to start.
Your content appears here while you work in the editor beside it.
Selected: this pageChoose what you want to work on.
Each choice opens the existing Website Editor.
Your starting point and your choices
See what the starting template includes and how your current browser choices differ. Open Features or Design to keep shaping the same draft.
Opening your browser choices…
This comparison only reads your browser draft. It does not switch templates, replace content, or create a purchase or download. Your content, navigation, translations and other design settings stay in the same draft.
See your design in use
Change colors, corners and spacing on familiar parts of a page.
Design preview
One design, familiar parts.
These examples use the colors and design choices in your current browser draft.
Text, surfaces and actions
Shared colors keep related elements together.
Action exampleProject sections
- Pages
- Navigation
- Settings
Read-only examples. The management example has no connected account or actions.
Current choices
- Corners
- Balanced
- Spacing
- Comfortable
- Borders
- Defined
- Density
- Comfortable
Automatic and custom colors
Each color has a purpose. Automatic values adjust with related colors; custom values keep your choice. Use the existing color controls to change or reset a value.
Editing dark appearance
- Background
#101010Automatic- Text
#F5F5F5Automatic- Main action
#EEF067Automatic- Surface
#181818Automatic- Text on surfaces
#F5F5F5Automatic- Button text
#000000Automatic- Muted surface
#232323Automatic- Secondary text
#ADADADAutomatic- Borders
#787878Automatic- Keyboard focus
#EEF067Automatic
Design
Your browser preview
Colors, corners and spacing are shared across this website preview. Density and border width change the examples above. Color edits apply to the appearance shown.
Recover your choices
Opening saved choices…
Save keeps your choices in this browser. Reset returns one color to automatic. Restore in the Editor returns all unsaved changes, including content and features, to your last save.
Saving and recoveryWhat changes together
Spacing changes the room around groups. Density changes the room inside the examples. Corners and borders shape cards, fields and actions. More design choices opens the existing density and border fields.
Check the result
These examples show a shared design source. They do not verify every installed page, management screen or email. Check real controls and keyboard focus in both appearances. Contrast feedback does not certify accessibility.
Reading, layout and brand
See the reading rhythm. Understand what this preview can change.
Loading font preview…
Project identity
- Project site name
- Field & Fold
- Project description
- Field notes and quiet practices for attention, reflection, and what follows when you return to the same place.
Browser tab example
Field & FoldThis example pairs your project’s name with the fixed Kottoko icon. Editing your project identity or design does not replace this website’s icon or wordmark.
Email examples
See transactional message examples that follow the project design. Viewing them does not configure a sender or send email.
View email examplesSupported outputs and limits
These examples show your browser draft. The separate local brand proof supports two fixed SVG files and a file describing their source. Downloads are not available in this public preview.
- Local brand sheet proof
brand-sheet.svg· 1600 × 1000- Local social announcement proof
social-announcement.svg· 1200 × 630- Source information
kottoko-brand-assets.manifest.json
Local proof uses a verified installed design. Unsaved draft changes are excluded. Export is blocked by a design applied only to the local site, an invalid record for it or an installed design that does not match its project. This preview does not verify export files or authorize publication.
The SVG files reference the project fonts; they do not include the fonts. The local proof uses a project name of up to 80 characters and a description of up to 240; its fixed layouts can shorten longer text.
Icon, email, PNG, PDF and presentation exports are outside this public preview. There is no hosted asset generator here.
Accessibility & responsiveness
Try it with a keyboard
Read an example, recover from an incomplete form, and preview a small screen.
Reading example
Rain at the edge of the route.
A note on interruption, attention, and what wet surfaces reveal.
Rain at the edge of the route.
Rain changes the plan. The direct route narrows, familiar marks disappear, and a surface that usually recedes begins to answer the sky. The interruption is useful because it asks for a slower pace before it asks for an explanation.
Recover from an incomplete form
Leave a required field empty. The example form points to what needs attention and keeps what you typed.
Keep the same task on a small screen
Open the editor's mobile preview, then use your browser zoom to check the content at a larger size.
Less motion, same actions
Open and close this reading note. Your device's reduced-motion preference removes the brief opening movement.
Rain at the edge of the route.
A note on interruption, attention, and what wet surfaces reveal.
Text and backgrounds follow this preview’s theme. Check your own content in both appearances.
Local examples, not an accessibility audit. Check your own content and complete user journeys before publishing.
Browser example
Motion that helps you follow a change
Try one brief reveal. Your project choice and device preference work together.
Show reading note
Rain at the edge of the route.
A note on interruption, attention, and what wet surfaces reveal.
The same reading content remains available without movement.
What this preview shows
Opening the note can briefly reveal related content. Closing is immediate. Reduced project motion or your device preference removes the movement, with the same content and controls.
This one local example does not remap every existing control or qualify the full Motion Library.
- Project motion
- Calm
- Feedback duration
- 120ms
- Reveal duration
- 240ms
- Easing
- cubic-bezier(0.2, 0, 0, 1)
Know how far a change goes.
The editor names the item you are editing. Shared navigation and project design have a wider effect.
This page
Change the words on the selected page in the current language.
Shared parts
Header and footer links are used across your site.
Whole project
Design choices such as colours and typography follow the project theme.
Keep the bigger picture in view.
The editor works with the current language and your saved draft. Some workflows have their own review tools.
Languages
Switch language in the site header. Content edits apply to the language you are viewing; design choices apply across the project.
Article history
Articles have a separate editorial review and version history. The page editor uses Save and Restore for the current demo draft.
Open the article exampleProject brief
An optional project brief is planned to capture your audience, goals, and constraints. It is not editable in this public demo yet.
Review, save, and recover.
Preview this page at desktop, tablet, and phone sizes. Supported feature examples also show common states. Save your demo draft when it looks right, or confirm Restore to return to the last save.
Build a website or app.With the core features included.
Kottoko is a starter project for websites and apps. It includes pages, user accounts, forms, and online store features you can customize instead of building from scratch.
The features you need, already built in.
See your changes as you make them.
Edit content, tune the design and choose features against the same website your visitors see.
Make Kottoko your own.
Change the heading and accent in this miniature page. It uses the same heading, field, and color controls as the website.
Make Kottoko your own.
Change the heading and accent in this miniature page. It uses the same heading, field, and color controls as the website.
What you can build
Explore starting points for websites, shops and member experiences.
Websites
Publish your ideas, work and resources.
Commerce
Sell products, downloads and subscriptions.
Members & apps
Create spaces for members and customers.
Growth
Connect with your audience and understand what works.
Design
Shape the look and feel of your project.
Operations
Keep your project connected and running.
Questions before you start.
Is Kottoko for websites or apps?
Both. Start with public pages, then use accounts, dashboards, forms, commerce, and other included features as your idea needs them.
Do I need to write code?
The editor lets you try supported content, design, and feature choices visually. Building custom behavior, connecting services, and deploying the project can require a developer or coding agent.
Are payments and email ready to use?
The payment integrations currently support test mode. These browser examples do not charge money or send transactional email. Live payment support still needs implementation and review; email delivery needs its own provider setup.
How do updates work?
Review how a change affects your project, prepare a backup, and check the result before release. Your hosting and setup determine the recovery steps.
Can I download Kottoko now?
Public downloads are not open yet. Explore the examples and documentation, or join the list below for launch updates.
Build your next project with a head start.
Get launch news, new examples, and product updates.
Confirm by email. Leave anytime. Read our privacy notice.