The Atlantis Collection

Brand Kit

The Atlantis Collection

The Atlantis Collection brand kit — colors, typography, logo, voice, and downloadable design tokens. The single source of truth for the brand.

Treasure Gold

#ba651d oklch(0.595 0.135 55)

Colors

The semantic palette, defined in OKLCH. Each swatch shows light (left) and dark (right). Hex is the sRGB approximation, derived from the canonical OKLCH.

Note the mode-dependent behavior: accent is treasure gold in light mode but flips to blue in dark mode, while primary stays blue in both.

Core

Background

--background

Page background. Warm off-white in light, near-black in dark.

Light #fefaf1 oklch(0.985 0.012 85)
Dark #0a0a0a oklch(0.145 0 0)

Foreground

--foreground

Primary text color.

Light #0a0a0a oklch(0.145 0 0)
Dark #fafafa oklch(0.985 0 0)

Surface

Card

--card
Light #ffffff oklch(1 0 0)
Dark #171717 oklch(0.205 0 0)

Card Foreground

--card-foreground
Light #0a0a0a oklch(0.145 0 0)
Dark #fafafa oklch(0.985 0 0)

Popover

--popover
Light #ffffff oklch(1 0 0)
Dark #171717 oklch(0.205 0 0)

Popover Foreground

--popover-foreground
Light #0a0a0a oklch(0.145 0 0)
Dark #fafafa oklch(0.985 0 0)

Muted

--muted
Light #f8efe0 oklch(0.955 0.022 78)
Dark #262626 oklch(0.269 0 0)

Muted Foreground

--muted-foreground

Secondary / supporting text.

Light #685d50 oklch(0.485 0.025 70)
Dark #a1a1a1 oklch(0.708 0 0)

Brand

Primary

--primary

Royal blue. Primary actions. Blue in BOTH light and dark.

Light #0069a8 oklch(0.5 0.134 242.749)
Dark #00598a oklch(0.443 0.11 240.79)

Primary Foreground

--primary-foreground
Light #f0f9ff oklch(0.977 0.013 236.62)
Dark #f0f9ff oklch(0.977 0.013 236.62)

Secondary

--secondary
Light #f8efe0 oklch(0.955 0.022 78)
Dark #27272a oklch(0.274 0.006 286.033)

Secondary Foreground

--secondary-foreground
Light #18181b oklch(0.21 0.006 285.885)
Dark #fafafa oklch(0.985 0 0)

Accent

--accent

Treasure gold in light mode, but flips to blue in dark mode — document both.

Light #ba651d oklch(0.595 0.135 55)
Dark #00598a oklch(0.443 0.11 240.79)

Accent Foreground

--accent-foreground
Light #fffbf4 oklch(0.99 0.01 80)
Dark #f0f9ff oklch(0.977 0.013 236.62)

Feedback

Destructive

--destructive

Errors and destructive actions.

Light #e7000b oklch(0.577 0.245 27.325)
Dark #ff6467 oklch(0.704 0.191 22.216)

Form

Border

--border

Hairline borders. Semi-transparent white in dark mode.

Light #e4dbce oklch(0.895 0.02 75)
Dark #ffffff oklch(1 0 0 / 10%)

Input

--input
Light #e4dbce oklch(0.895 0.02 75)
Dark #ffffff oklch(1 0 0 / 15%)

Ring

--ring

Focus ring. Treasure gold in light mode.

Light #ba651d oklch(0.595 0.135 55)
Dark #737373 oklch(0.556 0 0)

Chart

Chart 1

--chart-1
Light #ffdf20 oklch(0.905 0.182 98.111)
Dark #ffdf20 oklch(0.905 0.182 98.111)

Chart 2

--chart-2
Light #f0b100 oklch(0.795 0.184 86.047)
Dark #f0b100 oklch(0.795 0.184 86.047)

Chart 3

--chart-3
Light #d08700 oklch(0.681 0.162 75.834)
Dark #d08700 oklch(0.681 0.162 75.834)

Chart 4

--chart-4
Light #a65f00 oklch(0.554 0.135 66.442)
Dark #a65f00 oklch(0.554 0.135 66.442)

Chart 5

--chart-5
Light #894b00 oklch(0.476 0.114 61.907)
Dark #894b00 oklch(0.476 0.114 61.907)

Typography

One typeface — Roboto Slab (variable) — across body and headings for a cohesive, crafted feel.

Carry the Secrets of the Ocean text-xs · 0.75rem Fine print, badges
Carry the Secrets of the Ocean text-sm · 0.875rem Secondary text, footer
Carry the Secrets of the Ocean text-base · 1rem Body copy
Carry the Secrets of the Ocean text-lg · 1.125rem Lead paragraphs
Carry the Secrets of the Ocean text-xl · 1.25rem Section subheads (h3)
Carry the Secrets of the Ocean text-2xl · 1.5rem Section heads (h2, mobile)
Carry the Secrets of the Ocean text-3xl · 1.875rem Section heads (h2, desktop)
Carry the Secrets of the Ocean text-4xl · 2.25rem Page titles (h1, mobile)
Carry the Secrets of the Ocean text-5xl · 3rem Page titles (h1, tablet)
Carry the Secrets of the Ocean text-6xl · 3.75rem Hero title (desktop)

Spacing & layout

The spacing rhythm, corner radii, and responsive breakpoints the brand uses.

Spacing scale

1 0.25rem · 4px
2 0.5rem · 8px
3 0.75rem · 12px
4 1rem · 16px
6 1.5rem · 24px
8 2rem · 32px
12 3rem · 48px
16 4rem · 64px
24 6rem · 96px
32 8rem · 128px

Corner radius

rounded-sm 0.525rem
rounded-md 0.7rem
rounded-lg 0.875rem
rounded-xl 1.225rem
rounded-2xl 1.575rem
rounded-3xl 1.925rem
rounded-4xl 2.275rem

Base radius --radius: 0.875rem . All steps scale from it.

Breakpoints

sm 640px
Large phone
md 768px
Tablet — primary layout switch
lg 1024px
Two-column / desktop
xl 1280px
Wide desktop

Accessibility

WCAG 2.x contrast for the core text-on-surface pairings, computed live from the tokens in both light and dark. Grades carry a text label, never color alone.

Body text on page

Aa The quick brown fox
light 18.96:1 AAA
Aa The quick brown fox
dark 18.96:1 AAA

Muted text on page

Aa The quick brown fox
light 6.15:1 AA
Aa The quick brown fox
dark 7.63:1 AAA

Text on cards

Aa The quick brown fox
light 19.79:1 AAA
Aa The quick brown fox
dark 17.16:1 AAA

Text on primary button

Aa The quick brown fox
light 5.57:1 AA
Aa The quick brown fox
dark 7.10:1 AAA

Text on secondary

Aa The quick brown fox
light 15.53:1 AAA
Aa The quick brown fox
dark 14.26:1 AAA

Text on accent

Aa The quick brown fox
light 4.09:1 AA Large
Aa The quick brown fox
dark 7.10:1 AAA

Destructive text on page

Aa The quick brown fox
light 4.71:1 AA
Aa The quick brown fox
dark 6.89:1 AA

Voice & messaging

How the brand sounds, the canonical copy, and the channels it lives on.

Tone of voice

Poetic but grounded. We write like a beachcombing artist, not a marketer — evocative of the ocean, honest about the craft, never hypey.

Core copy

  • Hero headline

    Carry the Secrets of the Ocean

  • Hero subtitle (short)

    Rare treasures from the deep, handcrafted from real ocean artifacts. Limited releases — once sold out, lost forever.

  • About headline

    From sea to shelf to keychain.

  • About body

    The Atlantis Collection started out of love for the things the ocean leaves behind — fossilized shark teeth, polished stones, fragments worth carrying. Every piece is set by hand into a tiny wooden treasure chest, ready to be the first thing you reach for in the morning.

  • About closer

    No two are exactly alike, because the ocean doesn't repeat itself.

Principles

Do: Evoke the ocean and discovery

Don't: Lean on generic luxury clichés

"Carry the Secrets of the Ocean" — not "Premium quality keychains".

Do: Be honest about the handcraft and scarcity

Don't: Manufacture false urgency

"Limited releases. Once sold out, lost forever." — true because each piece is one-of-a-kind.

Do: Keep it warm and personal

Don't: Sound corporate or padded

"No two are exactly alike, because the ocean doesn't repeat itself."

Naming

Use the full "The Atlantis Collection" on first reference; "Atlantis Collection" is acceptable thereafter. Never abbreviate to "TAC".

Alt-text conventions

  • Product: Format: "<Product Name> — view <n>". Falls back to the Shopify alt text.
  • Packaging: "Atlantis Collection keychain in its wooden treasure chest packaging".
  • Logo: "The Atlantis Collection".

Downloads

Machine-readable design tokens and brand assets, always in sync with the live site.

Brand asset pack Logos, icons, tokens.css & tokens.json in one zip. tokens.json Structured tokens with OKLCH + derived hex. tokens.css Ready-to-import CSS custom properties.