Overview
- Use object isolation as the hero device.
- Let serif headlines feel sculptural and quiet rather than luxurious or ornate.
- Use orange only where the user is asked to commit.
Crust
Crust Mill offers premium salt and pepper grinders with medical-grade stainless steel burrs, perfect grip, and easy filling. Available in Crust Orange with customizable magnetic Color Tags. Made with sustainable materials and German craftsmanship. $299 with free US shipping.
Food DrinkScrolling AnimationLarge TypeParallaxBento GridDesignBig Background ImageProductBig Background VideoClean
5.0
8
Visits
Categories
Available Pages
Version History
Workflow Collections
Design Analysis
Crust Home design analysis
Use object isolation as the hero device. Let serif headlines feel sculptural and quiet rather than luxurious or ornate. Use orange only where the user is asked to commit. Show one product object per chapter. Use macro de...
Key Takeaways
- Use object isolation as the hero device.
- Let serif headlines feel sculptural and quiet rather than luxurious or ornate.
- Use orange only where the user is asked to commit.
- Show one product object per chapter.
- Use macro detail crops to support technical proof.
- Keep the object on white or black stages, not in mixed environments.
Image Direction
- Show one product object per chapter.
- Use macro detail crops to support technical proof.
- Keep the object on white or black stages, not in mixed environments.
Colors
- Most surfaces should be white, soft gray, or black.
- Orange is the only hot color and should stay rare.
- Muted technical gray belongs to captions, tags, and secondary labels.
Typography
- Headlines are crisp serif statements.
- Body copy is neutral and technical.
- Do not let the UI voice become playful or chatty.
Design.md
System Overview
Core identity and authoring metadata from the refto.one design model.
Editorial Object Showcase
A sparse, product-led editorial system that alternates white gallery space with black technical chapters and a sharp orange purchase accent.
Sparse, tactile, and gallery-like.
Primary mode: lightconsumer hardwarecontent-rich
Theme
Fields outside the primary renderer remain visible here as structured fallback content.
Visual atmosphere
Summary
Sparse, tactile, and gallery-like.
Density
2
Variance
4
Motion
2
Signals
large empty fields · editorial serif headlines · matte black technical sections · single orange accent
Colors
Primitive palettes and resolved token colors for the active preview mode.
Palette colors
Gallery White
#F5F5F2
Soot Black
#0E0F12
Crust Orange
#FC4C02
Steel Gray
#6C6C6C
Usage rules
Use orange only for buying or tiny state emphasis.
Let white space do most of the work.
Token Spacing
Spacing scales rendered as tokens with a simple length specimen.
xs
0.4rem
sm
0.65rem
md
1rem
lg
1.5rem
xl
3rem
section_gap
clamp(5rem, 10vw, 10rem)
Token Radii
Corner radii tokens with a live surface sample.
control
999px
card
18px
full
999px
Typography Families
Font families from the current design YAML, including fallback stacks and usage character.
Display
Editorial Serif
high-contrast product serif
Body
Inter
low-drama utility sans
Typography Scale
Top-level typography scale rendered as live text specimens.
Display
clamp(3rem, 6vw, 5rem)/—
Display
H2
clamp(2rem, 4vw, 3rem)/—
H2
Body
0.98rem/—
Body
Label
0.82rem/—
Label
Typography Rules
Fields outside the primary renderer remain visible here as structured fallback content.
Rules
Use headline contrast and spacing before adding more UI framing. · Keep supporting copy narrow and technical.
Motion
Motion tokens rendered as resolved values for timing and personality.
Duration
180ms-260ms
Easing
cubic-bezier(.3,0,.15,1)
Motion
Resolved motion token values.
| Property | Value |
|---|---|
duration | 180ms-260ms |
easing | cubic-bezier(.3,0,.15,1) |
Layout Principles
Use oversized vertical gaps and isolated product anchors.
Alternate bright gallery chapters with black technical storytelling.
Component Preview
Low-complexity component tokens rendered as design-system specimens.
Buttons primary
Base Attributes
Background
#FC4C02
Text
#FFFFFF
Border
none
Radius
999px
Padding
0.75rem 1.1rem
Min height
40px
Shadow
none
Buttons secondary
Base Attributes
Background
#1A1B1F
Text
#FFFFFF
Border
1px solid rgba(255,255,255,0.08)
Radius
999px
Padding
0.6rem 1rem
Min height
32px
Shadow
none
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#0E0F12
Border
1px solid rgba(14,15,18,0.08)
Radius
18px
Padding
1.25rem
Shadow
none
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
#E6E6E6
Text
#4D4E50
Height
32px
Active text
#0E0F12
Item padding
0.35rem 0.7rem
Item radius
999px
Image direction
Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.
Role
supportive
Media types
- -isolated product render
- -detail crop
Subject patterns
- -one hero object
- -one mechanism crop at a time
Composition logic
- -Keep the object centered or slightly offset in a large field.
- -Use dark chapters only when the object needs technical drama.
Treatment rules
- -Preserve matte material realism.
- -Avoid glossy ad-tech sheen.
Generation cues
- -Prompt for studio product photography, white cyclorama or black technical void, and one orange accent tag.
Avoid
- -No busy kitchen lifestyle scenes.
- -No neon tech gradients.
Anti Patterns
Compact list of patterns the design system explicitly avoids.
- -No multi-accent color systems.
- -No soft playful gradients.
- -No cluttered feature grids.