Ant's Corner
Design System
The Curated Specimen — a high-end editorial language treating every element like a biological specimen in a gallery. Clean, sophisticated, and deeply organic.
Section 01
Colour Palette
A playful market palette: punchy red and cyan, striped awning accents, and warm cream-tan neutrals grounded by brown text.
Primary Red
#D9534F
Primary call-to-action color, main mascot accent, and bottom banner base.
Cyan
#2BA9B4
Main text-banner counterpart and awning stripe anchor.
Brown
#644032
Body text, border lines, and shape outlines.
Cream
#FFFAF5
Primary light text and stripe spacer tone.
Surface
#F9E7C4
Base canvas. The page background.
Surface Container Low
#F4DDB5
Cards, specimen boxes, large sweeping sections.
Surface Container Highest
#FFFAF5
Focused interactive elements. Cart drawers, hover states.
Brand Duo Accent
135° Red → Teal
Reserved for decorative accents like logo text and select highlights.
Section 02
Typography
High-contrast pairing — Plus Jakarta Sans commands authority, Inter provides clarity.
Display — Plus Jakarta Sans
Display LG
3.5rem · weight 800 · tracking −0.04em · Hero titles, collection names
Heading XL
2.5rem · weight 800 · tracking −0.03em · Section headers
Title MD
1.5rem · weight 700 · tracking −0.02em · Card headings, product names
Label LG
1.125rem · weight 600 · tracking −0.01em · Prices, captions
Body — Inter
Body Large — 1.125rem
Body Base — 1rem · Standard paragraphs and descriptions. Inter provides a clinical clarity that grounds the more expressive display typeface.
Body Small — 0.875rem · Supporting copy, metadata, chip labels.
Label SM — 0.6875rem
Metadata labels, always uppercase, tracking +0.12em. Used for categories, tags, section markers.
The No-Black Rule
Never use pure #000000. Headlines use text-slate-950. Body uses on-surface (#644032).
Section 03
Buttons
Three levels of emphasis. Primary is reserved for the single most important action per view.
Primary
Background: #D9534F (solid) · subtle shadow
White text · rounded-[0.75rem]
Hover: translateY(−2px) + #C4443F + enhanced shadow
Secondary
Background: surface-container-highest (#FFFAF5)
On-surface text (#644032) · subtle border · same radius as primary
Hover: background shifts to surface-container-low (#F4DDB5)
Disabled state
opacity: 0.45 · cursor: not-allowed · no transform
Section 04
Cards — The Specimen Box
No borders. No dividers. Boundaries defined solely through tonal surface shifts — a surface-container-low card sitting on a surface background.
Specimen Card
Packaging Supplies
background: surface-container-low · border-radius: 1.25rem · hover lifts 2px and shifts to surface-container-highest
Brand Card
Field Note
Same background as specimen-card. Used for editorial prose blocks, hero inner panels, and the field note section. No hover effect.
Glass Surface
Floating Element
rgba(255,250,245,0.82) + backdrop-blur(20px). Used for navigation, modal backdrops, and floating overlays. Keeps the user visually grounded.
Section 05
Anatomy List — Chips
The signature component for product specs, service details, and feature tags. Horizontal scrolling row of tonal chips mimicking museum archive tags.
Usage example — service detail chips
background: surface-container-low · padding: 0.625rem 1rem · border-radius: 9999px · font-weight: 600 · font-size: 0.875rem
Section 06
Elevation & Depth
Depth is biological, not mechanical. Layers of fine paper stacked on a desk — tonal shifts replace shadows.
The Layering Principle
surface-container-low
surface-container-highest
Focused element — cart item, interactive field. The soft lift mimics layers of fine paper.
Shadows — Floating Elements Only
Ambient Float
0 20px 40px rgba(100,64,50,0.12). Reserved for modals and FABs only.
Glass Float
Same shadow + backdrop-blur(24px). Used for nav, toasts, overlays.
Section 07
Input Fields
Minimalist. No visible outer frame. The active state speaks through a 2px bottom bar in Primary and a background shift — not a thick border.
Default
background: surface-container-low · inset shadow 2px bottom at 8% opacity
Active / Focus
background shifts · 2px bottom bar in primary · no outer ring
Ghost Border — Accessibility Only
If a visible boundary is needed for accessibility: outline-variant at 15% opacity. Never 100% opaque.
Section 08
Do's & Don'ts
The editorial rules that keep Ant's Corner looking intentional, not accidental.
✓ Do
Use intentional asymmetry
If an image is on the left, let the text on the right have a larger top margin—staggered editorial flow.
Lean into white space
If you think there is enough space, add 20% more. Breathing room is never wasted.
Use glassmorphism for navigation
rgba surface + backdrop-blur(20px). Keeps the user grounded in the nature of the site.
Use the 8px baseline grid
Section gaps: 5rem or 6rem. Content grouping: 1rem. Label-value pairs: 0.5rem.
✕ Don't
Use dividers or borders
Forbid <hr> and border-bottom. Use spacing (spacing-8 or spacing-12) and tonal backgrounds to create separation.
Use pure black
Use on-surface (#644032) for body text. Pure black is too harsh for the warm cream palette.
Use sharp corners
Everything follows the 0.5rem–1rem roundedness scale. Sharp corners break the organic, naturalist feel.
Use external shadows on cards
Shadows are only for floating elements (modals, FABs, toasts). Cards communicate depth through tonal surface shifts.
Section 09
Spacing & Rhythm
Strict 4px/8px baseline with "Breathing Room" logic. When in doubt, go wider.
0.5rem · 8px
label-value pair spacing
1rem · 16px
related text grouping
5rem · 80px
major section gap
6rem · 96px
generous section gap