The design system for the SnailDesign studio website. This is the source of
truth for every generated screen — colour, type, layout, components, and the rules that
keep the mark intact.
蜗牛設計Yantai, Shandong
Space Grotesk · InterTypefaces
Teal · Ivory · AmberPalette
6 categoriesService structure
01 — Logo
The mark is a fixed asset.
The shell is a rectangular spiral of 3½ clockwise turns at stroke 8. The head is the
original solid wedge, scaled 1.30× about its tip so it reads heavier than the shell and
becomes the focal point. Both paths use currentColor and inherit their
container's text colour.
SNAILDESIGN
Brand · Print · Packaging
Primary lockup
SNAILDESIGN
Wordmark only
App icon / avatar
✓ Correct — the supplied SVG
Stroke 8. Three and a half turns. Solid wedge, detached, 1.30×. Tall proportion.
✗ Never — a generated approximation
Hairline stroke, two turns, wishbone antennae, square proportion. This is what
image generation produces. It is not the logo.
Rule for generated screens: never draw the mark. Render the wordmark
SNAILDESIGN
as text, or leave an empty placeholder at roughly 1:1.45, and drop the real SVG in afterwards.
Set as one word — SNAILDESIGN, never “Snail Design”.
Clear space on all sides = 4 × the shell stroke width.
Below 24px, use the mark alone without the wordmark.
Never recolour outside the palette.
Never rotate, outline, or add effects.
Never place on a busy photograph.
02 — Colour
One accent per viewport.
Teal is the only large colour field. Amber is punctuation — rules, numerals and
annotation — never a surface and never body text.
Ink
#10231F
Body text, headings on light, dark footer
Teal
#0E5A4E
Primary buttons, dark bands, links
Amber
#E8B14C
Sparing accent — nav underline, numerals
Ivory
#F7F5F0
Page background
White
#FFFFFF
Cards, alternating bands
Line
#E6E2D9
Hairline borders and rules
Muted
#5A6663
Secondary text, captions, eyebrows
Signature
Reversed on teal is the strongest application. Favour it for CTA bands and the
app icon.
03 — Typography
Space Grotesk over Inter.
No serifs anywhere. No Chinese type on the English site.
Hero headline Space Grotesk 700 64–80px · −0.03em
Design that earns its place.
Section headline Space Grotesk 700 40–48px
Six disciplines, one system.
Card title Space Grotesk 500 20–24px
Packaging & Product Design
Body Inter 400 16–18px · 1.6 · max 65ch
Brand systems, websites, campaigns and packaging — built slowly enough to be right, and sharply enough to sell.
Eyebrow / caption Inter 500 11px · 0.14em · uppercase
Selected work
04 — Layout
Whitespace is the point.
Property
Value
Max content width
1280px
Side padding
48px desktop / 24px mobile
Section padding
80–120px vertical
Grid
12 column · prefer asymmetric layouts
Card
White, 12px radius, 1px #E6E2D9 border, no shadow
Section breaks
Full-bleed teal or ink bands
Never: gradients, glassmorphism,
drop shadows, centred-everything layouts, or a horizontally scrolling page body.
05 — Components
Small parts, strict rules.
Buttons
Start a projectSee our work
Navigation
WorkServicesStudio
Numerals
010203
Eyebrow + headline
What we do
Six disciplines.
06 — Imagery & content
Real work only.
Imagery
Use the studio's own portfolio photography — built work in context.
Printed collateral, packaging on shelf, shopfronts, signage, vehicle livery, uniforms.
Warm natural light, muted grading. Real context over floating mockups.
Never generic desks, coffee cups or paper swatches.
Content
Never invent clients, statistics, testimonials, awards or years in practice.
Real names: TAETEA, YUHWA Group, LWE, Milano Casa, Octopus Market, YEAFODO, Kokonoya, TING Coffee, Bihai Hotel, NOBOBO, CABERO.
Six service categories, exactly. Three nav items plus CTA.
Sentence case body copy; headlines take a full stop.
07 — Accessibility
Non-negotiable.
Body text contrast ≥ 4.5:1; large text ≥ 3:1.
Focus states visible — 2px teal outline, 2px offset.
Amber on ivory fails for text. Rules, numerals and icons only.
Every image needs alt text describing the work shown.