Awesomic · scrub to study layout
Awesomic
> Awesomic
editorial zinc grid with confetti-orange punctuation. Awesomic operates in a restrained, neutral-first visual register: a zinc-gray scale carries nearly the entire interface, with one vivid orange badge accent and almost no other chromatic intrusion. The geometry is defined by generous corner rounding — 36px cards, 14px buttons, 10000px pills — and hairline 1px borders replace drop shadows as the primary elevation tool. Typography is a single custom geometric sans (Cosmica) deployed at bold display weights (56–64px / weight 600) for editorial headlines, paired with compact 14px body text that signals efficiency. The atmosphere is that of a confident, infrastructure-grade marketplace: quiet surfaces, precise density, and color deployed as functional punctuation rather than decoration.
↗ https://www.awesomic.ioColor Palette
BRAND
Ember
#ff5a00
Accent badges (YC batch tags, highlight chips) — the single vivid color in the system, used sparingly for startup credentials and category emphasis
ACCENT
Magenta Spark
#fe45e2
Rare decorative card accent — used on one hero card as visual punctuation against the monochrome grid
NEUTRALS
Obsidian
#09090b
Primary action buttons, hero headlines, dominant text — the deepest near-black that grounds every dark CTA and display heading against the light canvas
Graphite
#18181b
Body text, nav text, badge text — the working ink color across paragraphs, links, and labels
Slate
#27272a
Secondary headings and elevated card surfaces — a mid-dark gray for cards that need visual weight
Iron
#3f3f46
Muted text, button labels on light surfaces, badge text — the mid-gray used for secondary UI labels and outlined-button text
Steel
#52525b
Icon strokes, supporting metadata — borders and icon outlines in darker contexts
Fog
#71717a
Helper text, tertiary labels — muted copy and supporting metadata
Ash
#a1a1aa
Placeholder text, disabled labels, light icon strokes — the lightest readable gray
Mist
#d4d4d8
Subtle borders, secondary card fills, link pill backgrounds — structural divider color
Cloud
#ececee
Primary border color across the system — 1px hairline rules on cards, badges, and inputs
Paper
#f4f4f5
Canvas background, card surfaces, badge fills — the warm-cool gray that carries the page surface
Snow
#ffffff
Elevated surfaces (cards on canvas), input fields, button backgrounds for ghost/neutral actions
Typography
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
The quick brown fox jumps
THE QUICK BROWN FOX JUMPS
The quick brown fox jumps
FONTS
Spacing & Shape
Guidelines
✓ DO
- Use #8052ff (Electric Iris) exclusively for primary action buttons
- Set headlines at weight 400 with aggressive negative letter spacing (-0.04em)
- Use weight 200 (ultra-light) for 18px body text for airy readability
- Maintain pure #000000 black as section canvas background
✕ DON'T
- Do not use filled violet for large background surface containers
- Do not set body text at standard weight 400
- Do not introduce card containers with heavy borders or drop shadows
- Do not add color gradients to flat UI components
Similar Design Systems
Explore related DESIGN.md specifications & token sets.
Dala
Dala design tokens and UI patterns as AI-ready DESIGN.md for Cursor, Claude Code, and v0.
Caldera
Caldera runs on a warm limestone canvas flooded with molten orange. The interface is flat and unshadowed, letting ultrabold compressed type at near-architectural scale (up to 189px) carry all structural weight. A single vivid orange (#fc5000) acts as the only aggressive chromatic accent against monochrome warm grays, with a violet plasma reserved for the hero halftone and a sulfur yellow for tags. The visual language is volcanic: condensed heavy letterforms, halftone dot patterns, 40px radii on cards and buttons, and 800px pill controls — heat contained within a soft, paper-like surface. https://caldera.xyz
Jeton
Editorial fintech on warm marble Jeton operates as a fintech operating system on a near-blank canvas: vast white space, one searing orange-red accent, and typography that does all the talking. The interface is deliberately flat — no heavy elevations, no decorative borders — relying on generous whitespace, rounded geometric cards, and a single warm hue (#f73b20) to create visual punctuation. Headlines are oversized and tight-set (line-height 0.9–1.0 at 100+px), giving the page a confident, editorial rhythm rather than a dense SaaS feel. Color appears sparingly: orange for brand voice, near-black brown (#360802) for body text, and the occasional pastel wash for feature cards. The result reads like a magazine spread for financial infrastructure — restrained, spacious, and unmistakably bold.