01
Clear hierarchy
Keep the promise, proof, and next step in a predictable reading order.
am-marketing
示範 FAQ、feature grid、footer、header、logo cloud、newsletter、poll、pricing、product collection、sections、team、testimonials 與其他 marketing patterns。
FAQs
Answers
Frequently asked questions
Use native disclosure patterns for answers that should remain easy to scan and share.
What does this pattern own?
It owns structure, semantics, spacing, and token-driven presentation.
Where does workflow logic live?
Does it support dark mode?
Feature grids
Proof, repeated
Make the important benefits easy to compare.
A stable feature grid keeps repeated promises consistent across landing pages and product stories.
02
Token-driven
Use the same spacing, type, borders, and surfaces across themes.
03
Ready to compose
Leave data and workflow decisions with the consumer.
Headers
Logo clouds
Polls
Help shape the roadmap
Which pattern should we polish next?
Native radio controls keep the choice keyboard-friendly while the result bars remain readable without color alone.
Closes
Pricing
Simple plans
Choose the right orbit.
Plan comparison stays presentational; entitlement and billing remain consumer-owned.
Starter
For exploring the foundation.
NT$0/ month
- One project
- Core patterns
Studio
For teams shipping weekly.
NT$1,280/ month
- Unlimited pages
- Priority handoff
Scale
For governed multi-site systems.
Let’s talk
- Shared contracts
- Custom support
Product cards
Product collections
Curated goods
A collection with room to browse
Group related products into a calm, scannable surface; consumer code owns filters, inventory, and cart behavior.
Sections
A flexible story block
Let the copy and the visual share the same rhythm.
The equal split keeps a promise, supporting detail, and next action easy to scan across landing pages.
Section previewCopy + media
Wide media3 / 4 visual
Wide media
Give the visual more room when the story needs proof.
The wide layout supports 1/4 and 3/4 compositions while preserving a readable copy column.
Stacked on small screens
Keep the reading order intentional at every width.
Use the stacked variant for a vertical image-and-copy story that remains comfortable on mobile and desktop.
Stacked mediaVertical story
Team sections
People behind the patterns
Meet the team
Profile cards stay presentational while people data and social destinations remain consumer-owned.
Ariel Chen
Design systems lead
Turns complex product decisions into calm, reusable patterns.
Mina Lin
Content strategist
Shapes clear stories that help people choose their next step.
Nandor Lin
Frontend engineer
Builds accessible interfaces with a careful eye for the edge cases.
Testimonials
Trust, in their words
Built to make handoffs feel lighter.
Use structured quotes as evidence without coupling the presentation to a review provider.
“The page shell made our handoff much clearer.”
“We can bring our own content and still keep the system coherent.”
“The responsive defaults gave us a solid first pass on every viewport.”
Announcements
Blog cards
A content system that leaves room for the story
Use structured metadata and a predictable card shell so every article can be discovered, scanned, and revisited.
- Author
- Ariel Chen
- Reading time
- 6 min read
Why small marketing surfaces deserve real contracts
Announcements, CTAs, and contact forms may be small, but their semantics and data boundaries shape the whole journey.
- Author
- Mina Lin
- Reading time
- 4 min read
The quiet power of an intentional empty state
When there is nothing to show, give people a useful explanation and a visible path to continue exploring.
- Author
- Nandor the Relentless
- Reading time
- 3 min read
Cards
Use a stable surface for a short promise, supporting evidence, and one next action.
Theme, spacing, radius, and focus states inherit the same Astromer semantic tokens.
Keep the container flexible so consumers can bring their own content and workflow.
Carts
Cart
Your field kit
- Qty 2NT$680
- Qty 1NT$2,480
- Subtotal
- NT$3,840
- Shipping
- Free
- Total
- NT$3,840
Contact forms
CTAs
One next step
Make the next action easy to understand.
Pair a short reason to continue with a primary action and an optional lower-emphasis path.
Empty content
No stories match that search
Try a broader phrase or explore one of the popular topics below.