Atomik

Overview

Atomik is a productivity-focused Chrome extension that bridges Figma and Elementor, enabling designers and developers to convert layouts in seconds. The brand aesthetic is **Warm Minimalism with Technical Precision**—a dark, sophisticated canvas (nearly black at #070808) paired with a warm golden accent (#ffcd81) that signals approachability and energy. The UI evokes a premium, professional tool that respects the user's time and intelligence. Voice: direct, encouraging, and solution-oriented. Atomik speaks in active verbs and concrete outcomes: "Convert layouts instantly. Customize in bulk. Ship faster." The tone avoids jargon while celebrating technical capability—never breathless, always grounded in tangible results.

Colors

The color system centers on a high-contrast dark foundation with a warm golden accent that drives all interactive moments. **Primary (#ffcd81)** is the signature warm gold used exclusively on primary CTAs ("Quero assinar o Atomik"), focus states, and brand-critical interactions—it appears infrequently but commands attention. **Secondary (#faf9f5)** is an off-white cream that serves as the inverse surface and secondary button fill, providing breathing room against the dark background. **Tertiary (#fecc85)** is a slightly deeper gold used for supporting highlights and badges. **Surface stack** ranges from near-black (#070808 for base) through mid-grays (#1c1c1d for containers) to lighter grays (#28292a for elevated surfaces), creating visual hierarchy without harsh contrast. **On-surface (#f

Typography

The type system pairs **Castoro** (serif, 400 weight) for display and headline scales with **Cabin** (sans-serif, 400/600 weights) for body and label text. This pairing creates visual warmth and sophistication: Castoro's organic letterforms humanize the interface, while Cabin's geometric clarity ensures readability at small sizes. Display (60px, -0.02em letter-spacing) is reserved for hero statements and major section breaks; Headline-lg (48px) anchors feature sections; Headline-md (32px) introduces subsections. Body-lg (18px, 28px line-height) is used for descriptive copy and maintains 1.56 line-height ratio for comfortable reading. Body-md (16px) is the default paragraph text. Label-md (14px, 600 weight, 0.01em spacing) is applied to button text and form labels to ensure crisp, scannable

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on viewport. Page rhythm is established through a 24px gutter (md spacing) between sections, with 40px (lg spacing) used for major section breaks. The hero occupies full viewport height with a dark background image (noise texture overlay at 0.5 opacity) and centered text stack. Cards and containers use 24px padding (md) internally and are separated by 24px margins. The spacing scale is semantic: xs (4px) for micro-interactions and icon spacing, sm (12px) for form field padding, md (24px) for card padding and section gutters, lg (40px) for major section separation, xl (64px) for page-level breaks. Container max-width of 1280px prevents line lengths from exceeding 80 characters at body-lg size, ensuring readability. Ali

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle layering rather than aggressive depth cues. **Level 1 (Base)**: Surface at #070808 with a noise texture overlay (atomik-noise-v2.webp at 0.5–1% opacity) provides tactile grounding. **Level 2 (Standard Cards)**: box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with background-color: {colors.surface-container} (#1c1c1d) creates a subtle lift. **Level 3 (Elevated/Modals)**: box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) with background-color: {colors.surface-container-high} (#28292a) signals prominence. Buttons on hover receive the Level 2 shad

Shapes

The shape philosophy is **Technical Softness**—rounded corners are present but restrained, reflecting both approachability and precision. **Buttons and CTAs** use 100px border-radius (full rounding, pill-shaped) to signal friendliness and reduce visual aggression. **Cards and containers** use 6px (md) or 8px (lg) border-radius to feel modern without appearing playful. **Form inputs** use 4px (DEFAULT) border-radius for a clean, utilitarian feel. **Small UI elements** (badges, tags) use 100px (full) border-radius. This hierarchy—full rounding on primary CTAs, moderate rounding on containers, mi

Components

Action Elements **Button-primary** (primary CTA): background-color: #ffcd81, color: #28292a, padding: 14px 28px, height: 48px, border-radius: 100px, font-family: Cabin, font-weight: 600, font-size: 14px. On hover, background shifts to #fecc85 and receives box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15). Transition: all 200ms ease-out. **Button-secondary** (secondary CTA): background-color: #faf9f5, color: #070808, same padding/height/radius as primary. On hover, background becomes #e9ecef. **Button-ghost** (tertiary): transparent background with 1px solid #ffcd81 border, text color #ffcd81. On hover, background becomes rgba(255, 205, 129, 0.1). All buttons use cursor: pointer and are disabled with opacity: 0.5 and cursor: not-allowed.

Containers & Surfaces **Card**: background-color: #1

Do's and Don'ts

**Do**

• Do use #ffcd81 (primary) exclusively on primary CTAs and focus states—it's the brand's signature and loses impact if overused.
• Do maintain 24px gutters (md spacing) between sections and 24px padding inside cards to preserve the premium, breathing aesthetic.
• Do pair Castoro serif headlines with Cabin sans-serif body text to balance warmth and clarity—never use Castoro for body copy.
• Do apply text-shadow: 0 2px 4px rgba(0,0,0,0.4) on text over hero imagery or textured backgrounds to ensure 4.5:1 contrast ratio.
• Do use full-rounded (100px border-radius) buttons for primary CTAs and moderate rounding (6–8px) for cards to create visual hierarchy.

**Don't**

• Don't use the dark background (#070808) as text color—it disappears. Always use #f0f0f0 (on-surface) for body text.
• Don't apply multiple shadows or blur filters; the aesthetic is solid and grounded. Stick to the three-level shadow system (0 3px 8px, 0 8px 24px).
• Don't mix Castoro and Cabin weights arbitrarily. Castoro is 400 only; Cabin uses 400 for body and 600 for labels/buttons.
• Don't exceed 1280px container width or use asymmetric gutters—consistency reinforces the technical, professional positioning.
• Don't use secondary (#faf9f5) as a background for large content areas; it's reserved for secondary buttons and inverse surfaces. Keep the dark background as the dominant canvas.